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
Related
Have a grid with 4 columns and 4 rows. What I want to happen is on a small display the 4th column becomes a 5th row on a small display vs the column that it is on a medium+ display. It's a pet project to try and understand the bootstrap grid layout better. I'm essentially making a responsive calculator for the practice. I feel like I could do this with just raw CSS but figured bootstrap had to have some utilities that would make this easier. Images for example.
Large format:
Small format:
I have a start for the markup. There is some more associated CSS but I don't think it's important in the example. I've had a few versions but this is where I'm at in the moment.
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">1</button>
<button type="button" class="btn-lg btn-outline-dark">2</button>
<button type="button" class="btn-lg btn-outline-dark">3</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">4</button>
<button type="button" class="btn-lg btn-outline-dark">5</button>
<button type="button" class="btn-lg btn-outline-dark">6</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">7</button>
<button type="button" class="btn-lg btn-outline-dark">8</button>
<button type="button" class="btn-lg btn-outline-dark">9</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-light">±</button>
<button type="button" class="btn-lg btn-outline-dark">0</button>
<button type="button" class="btn-lg btn-outline-light">.</button>
</div>
</div>
<div class="col-md-4">
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">X</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">-</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">+</button>
</div>
<div class="row">
<button type="button" class="btn-lg btn-outline-dark">=</button>
</div>
</div>
</div>
</div>
EDIT:
I can only pick one solution as an answer but kiranvj, WebDevBooster, and dferenc all provided Bootstrap 4 release version working solutions. I can only mark one as an answer. No slight to the rest of you guys. My hands are tied.
I would do something like this. Check in full screen mode and resize to small
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
<div class="col-12 col-sm-8">
<div class="row">
<div class="col-4">black</div>
<div class="col-4">black</div>
<div class="col-4">black</div>
</div>
<div class="row">
<div class="col-4">black</div>
<div class="col-4">black</div>
<div class="col-4">black</div>
</div>
<div class="row">
<div class="col-4">black</div>
<div class="col-4">black</div>
<div class="col-4">black</div>
</div>
</div>
<div class="col-12 col-sm-4 text-danger">
<div class="row">
<div class="col-4 col-sm-12">pink</div>
<div class="col-4 col-sm-12">pink</div>
<div class="col-4 col-sm-12">pink</div>
</div>
</div>
</div>
I think, the simplest possible markup is the one below. It also uses the Order classes, but instead of setting the order of every button explicitly, this one touches just the "extra" buttons in the last column with .order-last .order-sm-0.
<div class="container">
<div class="row justify-content-center">
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">1</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">2</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">3</button>
<button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">X</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">4</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">5</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">6</button>
<button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">-</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">7</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">8</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">9</button>
<button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">+</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">±</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">0</button>
<button type="button" class="col-4 col-sm-3 btn-lg btn-dark">.</button>
<!--
Use `col-12 col-sm-3` in case you want a full-width `=` button
In that case you could omit `.justify-content-center` at the wrapper
-->
<button type="button" class="col-12 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">=</button>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
What I would do is create 3 additional pink div elements that render below the black divs, and then hide them using the hidden-*-up and hidden-*-down classes. When the screen is small, hide the pink divs on the right and show the pink divs on the bottom, and vice versa when the screen is small.
Since you wanted to build a calculator, I took a slightly different approach than my esteemed colleagues and created a grid that looks, feels and quacks like an actual calculator. I hope you aren't too mad about that. :-)
The main job is done by using the re-ordering classes. Those allow moving things around based on your breakpoint needs.
For example, the class combo order-3 order-md-1 says:
"Normally i.e. from the smallest screen size onwards you're gonna go to position #3 but from the medium (md) screen size and up you're gonna go to position #1."
And since the neighboring HTML elements also have order-1 as their default position, that element is gonna appear in the same order on medium sized screens as the neighbors. But on smaller than md screens that element is gonna become a "third-class citizen" and will, therefore, be positioned after the element with the order-2 class.
The <div class="w-100"></div> elements are just handy dividers. w-100 means "width:100%".
Speaking of dividers: I've noticed that your calculator has no division button, but I hope you'll figure out what to do about that.
Finally, you hadn't specified what to do with the equal sign button. So, I took the liberty to change its appearance on smaller screens. That is accomplished by first hiding the default button using the d-none d-md-block classes and then having a wider version of it appear using the d-md-none class. That last class basically says: Hide it (display:none) from md screens and up.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<style>
body {
font-family: 'Roboto Mono', monospace;
}
</style>
<div class="container">
<div class="row mt-2">
<div class="col-md-8">
<div class="row">
<button type="button" class="btn-lg btn-outline-dark order-1">1</button>
<button type="button" class="btn-lg btn-outline-dark order-1">2</button>
<button type="button" class="btn-lg btn-outline-dark order-1">3</button>
<button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">×</button>
<div class="w-100 order-1"></div>
<button type="button" class="btn-lg btn-outline-dark order-1">4</button>
<button type="button" class="btn-lg btn-outline-dark order-1">5</button>
<button type="button" class="btn-lg btn-outline-dark order-1">6</button>
<button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">−</button>
<div class="w-100 order-1"></div>
<button type="button" class="btn-lg btn-outline-dark order-1">7</button>
<button type="button" class="btn-lg btn-outline-dark order-1">8</button>
<button type="button" class="btn-lg btn-outline-dark order-1">9</button>
<button type="button" class="btn-lg btn-outline-dark order-3 order-md-1">+</button>
<div class="w-100 order-1"></div>
<button type="button" class="btn-lg btn-outline-light text-dark order-1">±</button>
<button type="button" class="btn-lg btn-outline-dark order-1">0</button>
<button type="button" class="btn-lg btn-outline-light text-dark order-1">.</button>
<button type="button" class="btn-lg btn-outline-dark order-1 d-none d-md-block">=</button>
<div class="w-100 order-2"></div>
<div class="w-100 order-4"></div>
</div>
<div class="row">
<div class="col-3 col-sm-4 pl-0 pr-0 pr-sm-4">
<button type="button" class="btn-lg btn-block btn-outline-dark order-4 d-md-none">=</button>
</div>
</div>
</div>
</div>
</div>
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>
i'm creating a simple menu at the top of my web page using bootstrap 3, with btn and btn-info classes in four divs (col-md-3). the space between the buttons is too high. how can i reduce the space between them ? for example 5 pixels margin. it's my code :
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
پشتیبانی
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
آموزش نصب آی او اس ۹
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
آموزش به دست آوردن یودید
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
خانه
</button>
</div>
</div>
</div>
you can see the web site at : ios9.siblearn.ir
A tip for the future, bootply.com is better for mocking up Bootstrap issues since it has the Bootstrap framework included by default. Here is how I would set it up:
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-info">
پشتیبانی
</button>
<button class="btn btn-info">
آموزش نصب آی او اس ۹
</button>
<button class="btn btn-info">
آموزش به دست آوردن یودید
</button>
<button class="btn btn-info">
خانه
</button>
</div>
</div>
</div>
Bootply Example
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
I am trying to horizontally center two radio buttons (in a group) on my page. This is what I have so far. It is not exactly center. It is a bit to the left. Pull right makes it go too far to the right. I added center-block and text-center but they did not help at all.
Can anyone help?
<div class="row">
<div class="col-sm-5"> </div>
<div class="col-sm-2">
<div class="btn-group center-block text-center" data-toggle="buttons">
<label class="btn btn-default center-block"><input type="radio">All</label>
<label class="btn btn-default active center-block"><input type="radio">Filtered</label>
</div>
</div>
<div class="col-sm-5"> </div>
</div>
You need to have text-center in the parent div, not the div being centered.
<div class="row">
<div class="col-sm-offset-5 col-sm-2 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default center-block"><input type="radio">All</label>
<label class="btn btn-default active center-block"><input type="radio">Filtered</label>
</div>
</div>
</div>
Also, you should use col-sm-offset-5 instead of <div class="col-sm-5"> </div>.
Bootply Demo