I have created a tile using Bootstrap. Inside the tile, near to the bottom I want three buttons (start, middle and end) of the tile.
I made the start and end buttons but using two div tags with pull-left and pull-right classes. Now what I want is to place the middle button.
Here's a part of my code and a screenshot:
<div class="col-lg-12">
<div class="pull-left">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<!-- I want another button here, center to the tile-->
<div class="pull-right">
<button class="btn btn-primary btn-xs pull-right" type="button">Decline</button>
</div>
</div>
Use this option:
<div class="text-center">
<button class="btn btn-primary btn-sx" type="button">
Confirm
</button>
</div>
One Bootstrap's most powerful features is nesting row elements. Every col-* container can have another row inside it, which then provides another full set of 12 col spaces:
<div class="col-lg-12">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Middle Button</button>
</div>
<div class="col-xs-4">
<button class="btn btn-primary btn-xs" type="button">Decline</button>
</div>
</div>
</div>
I'm not sure how your pull-* classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.
Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.
You're using bootstrap I presume, so your best bet and practice would be to take advantage of its' grid system.
Make a div with a class called row and divide the children inside of that parent div into the content you want.
The way this division works is that the number behind col-[size]- decides how much of the horizontal space it will take up. In the end it has to add up to 12, so in your case, we want three parts that are size 4 each.
For example :
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
Then simply put the buttons inside of the col-xs-4 div's and you're ready to go.
that worked for me
<div class="text-center">
<div class="text-center">
<button type="button" class="btn btn-fb btn-outline-primary waves-effect" (click)="doFacebookLogin()" mdbWavesEffect>
<i class="fa fa-facebook left"></i>Facebook</button>
<button type="button" class="btn btn-tw btn-outline-info waves-effect" (click)="doTwitterLogin()" mdbWavesEffect>
<i class="fa fa-twitter left"></i>Twitter</button>
<button type="button" class="btn btn-gplus btn-outline-danger waves-effect" (click)="doGoogleLogin()" mdbWavesEffect>
<i class="fa fa-google-plus left"></i>Google +</button>
</div>
divide the row div in to 3 column divs - col-md-4. Use text-center for the parent div(col-md-4) of each button to solve the issue.
<div class="row">
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B1</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B2</button>
</div>
<div class="col-md-4 form-group text-center">
<button type="button" class="btn btn-primary">B3</button>
</div>
</div>
Related
How can I group buttons with Bootstrap (specifically with Bootstrap 4), so that if I have several lines/rows of buttons, one of the buttons would occupy two rows at once? Pretty much like on a calculator or a keyboard's num pad, where Enter occupies two rows like:
[1] [2] [3] [E]
[ 0 ] [.] [n]
I am pretty sure there is a simple way to do it, but I can't find it.
upd. After seeing the previous attempt of answer I better add a pic
Try this:
<div class="row">
<div class="col-9">
<div class="row">
<div class="col-4">
<button class="btn btn-primary btn-block">1</button>
</div>
<div class="col-4">
<button class="btn btn-primary btn-block">2</button>
</div>
<div class="col-4">
<button class="btn btn-primary btn-block">3</button>
</div>
</div>
<div class="row mt-2">
<div class="col-8">
<button class="btn btn-primary btn-block">0</button>
</div>
<div class="col-4">
<button class="btn btn-primary btn-block">.</button>
</div>
</div>
</div>
<div class="col-3">
<button class="btn btn-primary btn-block">Enter</button>
</div>
</div>
updated
Using bootstraps btn-group-justified layout I have a group of buttons that looks like this:
But I need it to look something like this:
Is it possible to change bootstraps justified layout to accommodate something like this?
I know I can do it without using bootstraps justified layout, but I do need the button groups to take up the whole width and be the same width as other button groups.
The btn-group-justified class has a fixed table-layout so the child elements with a btn-group class act like table cells. You just need to change their width.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin-top: 10px;
}
.btn-group-justified > .btn-group:nth-of-type(odd) {
width: .25%;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group btn-group-justified" role="group" aria-label="">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Mango</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Junk</button>
</div>
</div>
</div>
</div>
</div>
I was working on a sample where I had to align a button group to the right.
I found the css class .pull-right.
While it correctly moved the button group, I was unable to reset the next section.
I've used the clearfix mixin on several objects, I cannot clear the way section intersects with the button group.
The sample on bootply (link below):
<div class="container foo">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
And the css
.foo
{
.clearfix();
}
.foo::before,
.foo::after {
content: " "; // 1
display: table; // 2
}
.foo::after {
clear: both;
}
Due to missing less mixin support I manually implemented the mixin
Here is a runnable example: http://www.bootply.com/8GgDsWc8kZ
I've been googling this and I put foo into every div there, no place cleared the section from intersecting.
Any hints appreciated.
Just add a div between the buttons and the box with the clearfix class from Bootstrap applied to it.
BOOTPLY
HTML:
<div class="container foo">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="clearfix"></div>
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
You appear to be missing some tags. That's what's causing Bootstrap to not function the way you expect.
BOOTPLY
<div class="container foo">
<div class="row">
<div class="col-md-3 pull-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<section class="debug text-center row">
<div class="col-md-12">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</section>
</div>
I'd suggest that you take some time to read over the grid system documentation on the Bootstrap website.
Here you go, I added a boostrap "row" and "col-xs-12" around your 3 buttons, as well as around your section.
<div class="container foo">
<div class="row">
<div class="col-xs-12">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
</div>
</div>
http://www.bootply.com/0TSYSI4T8b
Basically what I'm attempting to do it to get two buttons on the opposite side of the website but on the same row. Here's what it looks like:
And here's the code for what I have:
<div class="panel-footer"><!-- panel-footer -->
<div class="previous">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
<div class="next">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div><!-- end panel-footer -->
And here's the CSS for the classes 'previous' and 'next'.
.previous {
text-align: left;
}
.next {
text-align: right;
}
Thanks. I'm using bootstrap if that helps.
Wrap them in two separate columns like this:
<div class="panel-footer row"><!-- panel-footer -->
<div class="col-xs-6 text-left">
<div class="previous">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
</div>
<div class="col-xs-6 text-right">
<div class="next">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
</div><!-- end panel-footer -->
By the way, you can use the built in helper classes text-left / text-right like I've done on the column divs so you don't need to add the extra css. In that case you can remove the extra divs you've added.
I thought Bootstrap automatically does this floating for you if you wrap it in the div .row since it's based on a grid?
<div class="row">
<div class="pull-left">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
Bootstrap 4 Answer
The above answers are all Boostrap 3 specific, so I'm updating the accepted answer.
Glyphicons don't exist in Bootstrap 4, so you'll have to use something like Font Awesome
<div class="row">
<!-- panel-footer -->
<div class="col-6 text-left">
<div class="previous">
<button type="button" class="btn btn-default btn-lg">
<!--No glyphicons in Bootstrap 4. Insert icon of choice here-->
<span class=""></span>
</button>
</div>
</div>
<div class="col-6 text-right">
<div class="next">
<button type="button" class="btn btn-default btn-lg">
<span class=""></span>
</button>
</div>
</div>
</div>
You can try what HaukurHaf said, it will work. Simple floating method.
Or you can also put those two .previous and .next divs in .col- classes and then wrap them in a row div. So it would read:
<div class="panel-footer">
<div class="row">
<div class="col-xs-6 previous">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
<div class="col-xs-6 next">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
This way your are following Bootstrap's column layout.
Another way is to use flexbox:
<div class="flexbuttons">
<button></button>
<button></button>
</div>
<style>
.flexbuttons{
display:flex;
justify-content: space-between;
}
</style>
I would use float in your css
.previous {
float: left;
}
.next {
float: right;
}
You can test this option here jsfiddle.
You need to float the divs containing the buttons to the left and right. Since you are using Bootstrap, I recommend that you use the built in .pull-right and .pull-left classes.
Give the previous div the .pull-left class and the next div the pull-right class.
You might have to make the next button come first in your html source.
You could also just add float:left; to your existing .previous class and float:right; to the .next class.
Better yet, just get rid of those previous/next divs and apply the pull-left/pull-right classes directly to the buttons.
2020+ Updated answer:
Bootstrap classes flex-box and justify-content
Font-awesome icons instead of glyphicons (Not in Bootstrap 4)
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-sm">
<i class="fas fa-arrow-left" aria-hidden="true"></i>
</button>
<button class="btn btn-primary btn-sm">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</button>
</div>
I am learning Bootstrap. The structure is a container within some context. At the bottom of the container, I put a button next to an description.
Now, I want to set the button align to the right without break the bootstrap structure.
What should I do? I had set the "float:right" to the button style, but it appeared bad.
The button is outside the "alert-info" background and not vertical align. Any better method?
<div class="alert alert-info">
Summary:Its some description.......testtesttest
<button type="button" class="btn btn-primary btn-lg" style="float:right;">Large button</button>
</div>
Bootstrap 5 implementation:
The class name is now "float-end" instead of "pull-right"
<div class="alert alert-info clearfix">
<a href="#" class="alert-link">
Summary:Its some description.......testtesttest
</a>
<button type="button" class="btn btn-primary btn-lg float-end">
Large button
</button>
</div>
Bootstrap 4 (and under) implementation:
Just add a simple pull-right class to the button, and make sure the container div is clearfixed:
<div class="alert alert-info clearfix">
<a href="#" class="alert-link">
Summary:Its some description.......testtesttest
</a>
<button type="button" class="btn btn-primary btn-lg pull-right">
Large button
</button>
</div>
This worked for me:
<div class="text-right">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
Try this:
<div class="row">
<div class="alert alert-info" style="min-height:100px;">
<div class="col-xs-9">
<a href="#" class="alert-link">Summary:Its some
description.......testtesttest</a>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
</div>
</div>
</div>
Demo:
http://jsfiddle.net/Hx6Sx/1/
This work for me in bootstrap 4:
<div class="alert alert-info">
Summary:Its some description.......testtesttest
<button type="button" class="btn btn-primary btn-lg float-right">Large button</button>
</div>
On bootstrap 4, you can do this add pull-right to your classname:
<div class="container">
<div class="btn-block pull-right">
Search
Apple
Sony
</div>
</div>
You can use the class name float-right:
function Continue({show, onContinue}) {
return(<div className="row continue">
{ show ? <div className="col-11">
<button class="btn btn-primary btn-lg float-right" onClick= {onContinue}>Continue</button>
</div>
: null }
</div>);
}