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>Foodle Bardle</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>
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.
Related
I'm having trouble getting a glyphicon-search button to line up in bootstrap.
This is not a unique problem, I found this question that asks a similar thing, except the accepted and celebrated answer isn't working for me. Just like the answer, I have a div input group wrapper that should line up the field, but it isn't working, as you can see in my jsfiddle:
http://jsfiddle.net/pk84s94t/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button>
</span>
<input type="text" class="form-control input-sm">
</div>
http://jsfiddle.net/kv8n7n5g/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<input type="text" class="form-control" placeholder="Search">
</div>
You had the glyphicon classes inside the button tag.
If that doesn't work you may have to change the line-height of the icon to 1. I was using ionicons and the 1.4... line-height was throwing everything off.
That's interesting. I've never tried using a button with an input group like that, and I'm not sure why that behavior is occuring. Seems to be an easy fix though.
I added top:0 to the existing rule .input-group-btn>.btn which already had position: relative; ...
http://jsfiddle.net/pk84s94t/1/
EDIT
While this does fix the behavior, Rachel S's answer is a better solution as it's not changing CSS rules, but using proper HTML within bootstrap to fix the problem.
The problem you are having is due to the glyphicon button default size in bootstrap. But if you put some text in the button it aligns perfectly as now the button for the text is given more priority than the glyphicon's default. For the text I used  . It works fine now.
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> 
</button>
</span>
</div>
Fiddle
<div class="row">
<div class="col-xs-6 input-group input-group-lg" style="padding-left:15px;">
<span class="input-group-addon add-on"><i class="fa fa-calendar"></i></span>
<input class="form-control" id="daterange" type="text" placeholder="Run Range"
maxlength="128" readonly="readonly" style="background-color:White;cursor:pointer;" />
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-primary btn-lg has-spinner" id="btn-search">Go!</button>
</div>
</div><br>
I have literally dozens of other instances of rows and columns in my site but this row refuses to behave. Why?
input-group class in Bootstrap is displayed as a block element, so it will push anything after it to a new line. If you want the button to be next to the input field, you need to add a class for example input-group-inline and override the default style from Boostrap.
.input-group-inline {
display: inline-block;
}
Your fiddle is missing a reference to bootstrap.css, i added it and it all works fine https://jsfiddle.net/ujbh3z4p/ try checking the references in your html
Remove padding from a row. This can cause to rows to be different widths.
Bootply codes can be seen here => http://www.bootply.com/QpvisrtAJR
I want the input box to be longer, however, the width:100% doesn't work for it.. And I don't want to use width: xxxpx or size=xxx to make it longer because it will be un-responsive in different resolution..
Does anyone have ideas about this?
Your input rule isn't actually being applied. It is not specific enough so is being overwritten by a default bootstrap rule. Try this instead:
.form-inline button.form-control,
#contain_word
{
display: block;
width: 100%;
}
http://www.bootply.com/Qh2VwydnHx
Also you have a an erroneous character in your html where you give the input field an id. Should be:
<input type="email" class="form-control" id="contain_word">
Not:
<input type="email" class="form-control" id="contain_word`">
You can use the calc() method to have the input field 100% in width but still float left to the label.
Updated Bootply: http://www.bootply.com/2K3ZIWsuWy
Calc() is compatible with most browsers except Opera Mini. For Blackberry you still need -webkit.
Check out the compatibility table here: http://caniuse.com/calc
You can add your class with a specified width
or override existing styles, but it is better to create your own style file
http://www.bootply.com/QpvisrtAJR#
div class="row">
<form class="form-inline" role="form">
<div class="form-group col-sm-6 no-padding">
<label for="contain_word`">Containing word(s): </label>
<input class="form-control test" id="contain_word`" type="email">
</div>
<div class="col-sm-2">
<button class="btn btn-primary form-control">Search</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary form-control">Clear</button>
</div>
</form>
</div>
Sort of a weird problem. I'm following this section exactly but having a little trouble. When the button is aligned to the left of the field they align perfectly but when the button is aligned to the right (which I think of as more natural for a "submit" type behavior) there is about 5-10px of padding on top of the button that I can't get rid of:
My code is below:
<div class="col-sm-7">
<h3>Get the latest Amazon News first:</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail" />
<span class="input-group-btn">
<button class="btn btn-default btn-group" type="submit">Sign Up</button>
</span>
</div><!-- /input-group -->
</div><!-- /col-7 -->
<div class="col-sm-5">
<h3>Get Started Now:</h3>
<a class="btn btn-large btn-primary" href="#"><i class="icon-caret-right icon-space-right"></i>Start a Free Trial!</a>
</div>
I'm pretty confused why it would work on one side and not the other. Any help would be appreciated!
Something seems to be wrong if you have written any of your custom css. I just copied your html and created a pen using bootstrap cdn css hosted files. Check this pen/demo.
It's because somehow you are adding break tag i.e. above and below of your button element. just remove those breaks.
The following code example code should result in something like .
<form class="well form-search">
<div class="pull-right">
<div class="input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</form>
This works perfectly well in Firefox, but in both Chrome and Internet Explorer 7 browsers, it looks like the following:
Am I doing something "illegal" with bootstrap? I did not make any adaptions yet so it's completely out-of-the-box.
Any help is greatly appreciated!
This was a reported issue: https://github.com/twitter/bootstrap/issues/1362
The fix outlined by tonybolzan in the issue works best because you don't have explicitly set a width:
.input-prepend, .input-append {
white-space: nowrap;
-webkit-padding-end: 27px;
}
The problem is with the whitespace found in your markup, try to place the span tag on the same line as the input, like so:
<form class="well form-search">
<div class="pull-right">
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</div>
</form>
This is old, but it helped me determine the answer I was looking for:
The problem is probably that bootstrap is setting the width of the input to 210px, which is causing the whole icon/input/button grouping to be wider than your well.
I've updated the fiddle Andres posted above with a sample of the problem by forcing the well forms to a smaller width than their default and a fix by using an input class with a smaller width.
http://jsfiddle.net/dDtUg/2/