How does Bootstrap's Jumbotron example create space in navbar elements

Question

In the Bootstrap Jumbotron example, the username, password and sign in button are spaced without the aid of JavaScript (I disabled JS in both and refreshed), margin, padding, etc. How are these elements spaced? div.form-group specifically is a mystery to me. I have tried to mimic the code myself. I'm using Bootstrap's CSS and JS. In my HTML I have no space between the the three elements. After disabling JS, and trying various styles I cannot explain how the spacing in the Bootstrap Jumbotron example is achieved. Besides the difference in spacing my elements have a slightly different size. My password input is 160px wide with 12px of padding and 1px of border, while the proper Jumbotron example is 170px wide. Both computed widths are auto. How can I get spacing between email, password, and the sign in button like in the Bootstrap example cited?

There is a similar but different question, of how to get it to work differently than in the example by Bootstrap.

<form class="navbar-form navbar-right">
  <div class="form-group">
     <input type="text" placeholder="email" class="form-control"></div>
     <div class="form-group"><input type="password" placeholder="password" class="form-control"></div>
     <button type="success" class="btn btn-success">Sign In</button>
</form>

Here is the whole page:

<!DOCTYPE html><html><head><title>Foodle Bardle</title><link rel="stylesheet" href="/stylesheets/bootstrap.css"><link rel="stylesheet" href="/stylesheets/bootstrap-theme.css"><link rel="stylesheet" href="/stylesheets/style.css"><script type="text/javascript" src="/javascripts/jquery.min.js"></script><script type="text/javascript" src="/javascripts/bootstrap.min.js"></script></head><body><nav class="navbar navbar-inverse navbar-fixed-bar" aria-expanded="false" aria-controls="navbar" data-toggle="collapse" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Foodle Bardle</a></div><div id="navbar" aria-expanded="true" class="navbar-collapse collapse in"><form class="navbar-form navbar-right"><div class="form-group"><input type="text" placeholder="email" class="form-control"></div><div class="form-group"><input type="password" placeholder="password" class="form-control"></div><button type="success" class="btn btn-success">Sign In</button></form></div></div></nav><div class="jumbotron"><div class="container"><h1>Sample</h1><p>Welcome to Sample. Lots of sites and apps offer a foo. Some even add a bit of the bar (foobar fooy and doey) way to bar up. Here is a place to nuture your bardle using all the tools available. </p></div></div><div class="container"><div class="row"><div class="col-md-4"><h2>Foo Integration</h2><p>Foo work is demanding, and solving complex bars all day will actually make productivity smurf, but there are ways to maximize hoey bar over time. </p><a class="btn btn-primary btn-lg">Learn More</a></div><div class="col-md-4"><h2>GTD - Getting Bardle Done</h2><p>David Barish gave us some insights that can help us keep our foodle focused on what matters at the moment. </p><a class="btn btn-primary btn-lg">Learn More</a></div><div class="col-md-4"><h2>SRS - Spaced foobardle Software</h2><p>One of psychology's best kept secrets, SFS is a way to overcome much of the innefiency in learning. All people forget and learn in some predictable ways, SFS puts the computer to task, scheduling well structed foodle bars or bardle foos for review at the ideal moment. </p><a class="btn btn-primary btn-lg">Learn More </a></div></div></div></body></html>

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Logic behind it:- The elements on the Bootstrap Jumbotron link are made to display as inline-blocksand Inline blocks tend to behave as "words" in a sentence, and as words have spaces between them to differentiate them from each other (delimiter), likewise HTML Renderers also adds a space between the elements with the attribute of display:inline-block;

The problem:- Your elements are being treated as such because they have a (hidden) space (in the form of new-line) between them.

<form class="navbar-form navbar-right">
  <div class="form-group">
     <input type="text" placeholder="email" class="form-control"></div>
     <div class="form-group"><input type="password" placeholder="password" class="form-control"></div>
     <button type="success" class="btn btn-success">Sign In</button>
</form>

Solution:- So to avoid this type of behavior, you shall have to write them as such that they don't have a space(or a new-line) between them.

A. You could just write the whole concerning elements' HTML in one line.

B. Write the HTML as below.

<form class="navbar-form navbar-right"><div class="form-group">
     <input type="text" placeholder="email" class="form-control"></div><div class="form-group">
     <input type="password" placeholder="password" class="form-control"></div><button type="success" class="btn btn-success">
     Sign In</button>
</form>

CodePen Demo!

Note:- Now that i reread your question I have a better understanding of your requirements, and If I'm not wrong, you want the opposite to happen. So for your solution,

Make sure that the elements have the display attribute set to inline-block.
Also make sure that the elements are not inheriting the property of float:left (or right), and if it is, then you can stop the float as shown here.

The style of `inline-block` was applied, but I cannot fault you for thoroughness. I was surprised to find out that adding another line break between the input and div.form-group did the trick, besides putting the input and div on the same line. — haleonj, Feb 03 '16 at 23:45

How does Bootstrap's Jumbotron example create space in navbar elements

1 Answers1