I have read many topics here on stackoverflow regarding this question. I have read and used the solutions provided here, however! for some reason this stuff just doesn't work with me. I get a completely blank page.
The idea is to get primary button above the default button on extra small devices. For some reason i am completely blank even on md and sm devices.
Would appreciate help. Thank you
<body>
<div class="row">
<div class="col-md-6 col-xs-12 col-xs-push-12">
<button class="btn btn-default" type="button">Button</button>
</div>
<div class="col-md-6 col-xs-12 col-xs-pull-12">
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
</body>
You just need to think "mobile-first". Create the markup for the smallest device layout first, and then adjust it using push/pull for larger screens. The col-xs-12 is not necessary since the columns stack automatically on xs widths.
<div class="row">
<div class="col-md-6 col-md-push-6">
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="col-md-6 col-md-pull-6">
<button class="btn btn-default" type="button">Button</button>
</div>
</div>
Demo: http://codeply.com/go/aUME1OcT0S
Update: As of Bootstrap 4, it's possible to re-order 12 unit columns: bootstrap pulling/pushing 12 columns not working properly
Unfortunately you cannot use the push/pull method on col-*-12 because of the way push/pull works. So a solution that works very well is to have the order correct for mobile and then use the push/pull method on larger screen sizes like this:
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-6">
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="col-xs-12 col-md-6 col-md-pull-6">
<button class="btn btn-default" type="button">Button</button>
</div>
</div>
And here is a working codepen: http://codepen.io/egerrard/pen/NdqpXZ?
FYI, you are also only using md and xs column notations but you mention you only want this functionality for xs screen sizes. If that is the case you need to change your md columns to sm.
Related
Background:The website I am working on there are several different filters that people can use in order to show only the data they need; basic stuff. To make things look nice since I am not css inclined, I am using bootstrap to make things look clean.
Problem: I can't seem to get the buttons to line up with the right side of the fields. I can make them pull to the very edge of the field set, I can make push/pull them to the general area they should be in, but I can't get them to line up nicely and stay that way regardless of how you rearrange the size of the page window.
JSFiddle: https://jsfiddle.net/v3cugpx1/1/
<div class="form-group col-md-12">
<div class="input-group-btn">
<div class="pull-right">
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Any help would be greatly appreciated.
Cheers!
It's important to match the nesting of columns because of the gutters in the grid, which the other answers remark upon. If you start with the other two answers, it's easy enough to modify them to add the margin between the buttons you're looking for:
<div class="form-group col-md-12">
<div class="col-md-12">
<div class="btn-toolbar col-md-12">
<a class="btn btn-info pull-right" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
The only really real addition is the btn-toolbar class to the inner-most div. And for posterity here's the Fiddle.
Don't use .input-group instead use col-sm-* classes to give extra padding multiple times, so that you can match the padding available on all other form elements. And then arrange the buttons inside of it, like:
<div class="form-group col-md-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left pull-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Have a look at the updated Fiddle.
Hope this helps!
You are using wrapper cols for the inputs. I included one "col-md-12" before the button's "form-group" and another one after it. This way your code stay consistent and you achieve what you want.
<div class="col-md-12"> <----
<div class="form-group col-md-12">
<div class="col-md-12"> <----
<div class="input-group-btn">
Updated Fiddle
Hi guys using bootstrap and struggling to understand how to get a my main div box to have other divs inside of it
For example i am trying to make this:
This big box is just a div.
What i got so far:
<div class="container">
<div class="MainBox">
<div class="Leftbox">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="CentreBox">
</div>
</div>
</div>
I am not so sure how to do the boxes on the right hand side , i have tried different methods but it mucks up the whole div. Any help would be great. Thanks xx
You really want to look into Bootstraps grid system, as suggested by #Sringland in his comments, found here: Bootstrap Docs
The grid system creates 12 columns on any screen size (from xtra small - large), and can be defined as a class by col-(screensize)-(span). For example - if you want 12 columns spanning a large sized screen add the class: col-lg-12 to your div.
These columns are "embeddable", and will create a new 12-column layout inside one another. So if you want to split up an 8 column layout into two equal sized containers within it, it would like like this:
<div class="col-md-8">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
So remember, each time you "open" a column regardless of its size, that container will have another 12 columns to work with.
After all this is said, your layout will look something like this:
<div class="row height-500px">
<div class="container">
<div class="col-md-3 border height-500px">
<!-- Content goes here -->
</div>
<div class="col-md-7 border height-500px">
<!-- CONTENT GOES HERE -->
</div>
<div class="col-md-2 height-500px">
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
<div class="col-md-12 height-125px border">
<!-- Content goes here -->
</div>
</div>
</div>
</div>
Here is a link to a Bootply to see it in action. Please see the bootply for a better understanding of the height classes and border classes. I created these simply to represent your layout.
Now, gutters (the space between the columns) are not working as intended, and I hope someone help there. But, hopefully this will be a good starting point for you.
Jus try using bootstrap grid system. I used buttons for the right column, but you can use whatever you need.
<div class="container MainBox border-on">
<div class="col-md-2 left border-on">
<h3>Box</h3>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary btn-responsive">P</button>
<button type="button" class="btn btn-success btn-responsive">B</button>
<button type="button" class="btn btn-success btn-responsive">L</button>
<button type="button" class="btn btn-success btn-responsive">R</button>
<button type="button" class="btn btn-success btn-responsive">T</button>
<button type="button" class="btn btn-success btn-responsive">F</button>
</div>
</div>
<div class="col-md-8 CentreBox border-on">
<h3>
center
</h3>
</div>
<div class="col-md-2 right border-on">
<h3>
right
</h3>
<div class="col-md-12">
One
</div>
<div class="col-md-12">
Two
</div>
<div class="col-md-12">
Three
</div>
<div class="col-md-12">
Four
</div>
</div>
</div>
I am learning how to use Twitter Bootstrap. I need to put two buttons in one row, one in the centre and the other to the right. The buttons are in the right positions column wise but they are in different rows.
Could anyone assist me with fixing my code below to get the two buttons on the same row?
<div class="row">
<div class="col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
</div>
<div class="col-sm-6 col-sm-offset-6">
<button class="btn btn-default lead pull-right ">Edit Button Right</button>
</div>
</div>
The problem is that on your second div class you use col-sm-offset-6. Delete this and it should align on the same row.
Using offset will give you a left margin of 6 columns, and since your first div already use 6 columns, there arent enough columns on the same row.
I agree with the above answer, here is the code from bootstrap page which has some fairly clear examples: http://getbootstrap.com/css/
<div class="col-sm-9">
<div class="row">
<div class="col-xs-8 col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button left</button></p>
</div>
<div class="col-xs-4 col-sm-6">
<p class="lead pull-right"><button class="btn btn-default ">Edit Button Right</button></p>
</div>
</div>
It does leave a space between the buttons, I don't know if you want that there or not.
I am trying to get two buttons on the same line on mobile. The buttons are on the same line for the desktop but as soon as it goes mobile they stack on top of each other. I have tried adding an inline-block tag to the div class but they still stacked, albeit at the correct 50 50 size.
Here is my html:
<div class="buttonDiv">
<div class="row">
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">SIGN UP</button>
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">CHECK STANDINGS</button>
</div>
</div>
</div>
and here is the relevant CSS:
.buttonDiv{
position:relative;
bottom:90px;
font-family: "Cabin Condensed";
font-weight:700;
display:inline-block;
}
#buttonCustom{
position:relative;
margin-bottom:10px;
height:10%;
width:100%;
}
css looks like an overkill, unless OP solves some other design task (s)he didn't mention in the question.
If all you want is to keep 2 buttons inline on any device you can get away with...
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary">SIGN UP</button>
<button class="btn btn-primary">CHECK STANDINGS</button>
</div>
</div>
... and no additional css required.
fiddle.
Bootstrap has the classes xs for phones, and sm for tablets. You actually only need to add col-xs-6 to both your classes as this will affect all other widths unless otherwise stated. From the bootstrap docs:
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
add col-sm-6 col-xs-6 to the two btns. This indicates that when the screen is small size or xsmall size. They maintain 50% width.
You could look into this JsFiddle.
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Some content</h1>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
<button class="btn btn-primary my-button">Sign Up</button>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
<button class="btn btn-primary my-button">Check Standings</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>Some content</h1>
</div>
</div>
CSS
.my-button{
width:100%;
}
You can paly with the values of classes of these lines <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">. To understand this grid-system you can look at the official documentation. Happy Coding.
I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I fix this?
Here is my code.
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
Wrap the Button in div with "text-center" class.
Just change this:
<!-- wrong -->
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>
To this:
<!-- correct -->
<div class="col-md-4 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button>
</div>
Edit
As of BootstrapV4, center-block was dropped #19102 in favor of m-*-auto
According to the Twitter Bootstrap documentation: http://getbootstrap.com/css/#helper-classes-center
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.
See an example of the code above here: https://jsfiddle.net/Seany84/2j9pxt1z/
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button class="btn btn-primary" id="singlebutton"> Next Step!</button>
</div>
</div>
</div>
add to your style:
display: table;
margin: 0 auto;
<div class="container-fluid">
<div class="col-sm-12 text-center">
<button class="btn btn-primary" title="Submit"></button>
<button class="btn btn-warning" title="Cancel"></button>
</div>
</div>
You can do it by giving margin or by positioning those elements absolutely.
For example
.button{
margin:0px auto; //it will center them
}
0px will be from top and bottom and auto will be from left and right.
I tried the following code and it worked for me.
<button class="btn btn-default center-block" type="submit">Button</button>
The button control is in a div and using center-block class of bootstrap helped me to align the button to the center of div
Check the link where you will find the center-block class
http://getbootstrap.com/css/#helper-classes-center
use text-align: center css property
Update for Bootstrap 4:
Wrap the button with a div set with the 'd-flex' and 'justify-content-center' utility classes to take advantage of flexbox.
<!-- Button -->
<div class="form-group">
<div class="d-flex justify-content-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">
Next Step!
</button>
</div>
</div>
The benefit of using flexbox is being able to add additional elements/buttons on the same axis, but with their own separate alignment. It also opens up the possibility of vertical alignment with the 'align-items-start/center/end' classes, too.
You could wrap the label and button with another div to keep them aligned with each other.
e.g. https://codepen.io/anon/pen/BJoeRY?editors=1000
You can do the following. It also avoids buttons overlapping.
<div class="center-block" style="max-width:400px">
Accept
Reject
</div>
It works for me
try to make an independent <div>then put the button into that.
just like this :
<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>
Then Go to to your CSSStyle page and do the Text-align:center like this :
#contactBtn{text-align: center;}
For Bootstrap 3
we divide the space with the columns, we use 8 small columns (col-xs-8), we leave 4 empty columns (col-xs-offset-4) and we apply the property (center-block)
<!--Footer-->
<div class="modal-footer">
<div class="col-xs-8 col-xs-offset-4 center-block">
<button type="submit" class="btn btn-primary">Enviar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>
For Bootstrap 4
We use Spacing, Bootstrap includes a wide range of abbreviated and padded response margin utility classes to modify the appearance of an element.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
more info here: https://getbootstrap.com/docs/4.1/utilities/spacing/
<!--Footer-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary ml-auto">Enviar</button>
<button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>
I had this problem. I used
<div class = "col-xs-8 text-center">
On my div containing a few h3 lines, a couple h4 lines and a Bootstrap button.
Everything besides the button jumped to the center after I used text-center so I went into my CSS sheet overriding Bootstrap and gave the button a
margin: auto;
which seems to have solved the problem.
or you can give specific offsets to make button position where you want simply with bootstrap grid system,
<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>
this way, also let you specify button size if you set btn-block.
sure, this will only work md size range, if you want to set other sizes too, use xs,sm,lg.