For example, see below code, when I resize the browser to very small width, the gird will collapse, so two button groups and text align in vertical, and there is no space between them, how can I add some space?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<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 class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<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 class="col-md-8">
asdf
</div>
</div>
You can set the margin-bottom initially or in the media where it changes like this:
#media (max-width: 991px){
.col-margin{
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<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 class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<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 class="col-md-8 col-margin">
asdf
</div>
</div>
Check this out for more info about bootstrap grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
And this for better understanding of media: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can use .classname >[class*='col-'] in conjunction with your row to add space or whatever rule to your columns inside that row.
#media (max-width: 991px) {
.col-space >[class*='col-'] {
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row col-space">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<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 class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<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 class="col-md-8">asdf</div>
</div>
</div>
Related
I am trying to build a uniform button group.
The group has 2 rows with 8 buttons each and the alphabets inside the buttons change from time to time.
Code snippet: One row of the button group
<div class="btn-toolbar" >
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="0" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="1" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="2" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="3" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="4" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="5" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="6" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="7" >Q</button>
</div>
</div>
This is how it looks
How should I go about aligning them?
Thanks in advance!
Try this.
.btn-group button{width:50px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="btn-toolbar" >
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="0" >A</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="1" >B</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="2" >C</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="3" >D</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="4" >E</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="5" >F</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="6" >G</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="7" >H</button>
</div>
</div>
<div class="btn-toolbar mt-3">
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="0" >I</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="1" >J</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="2" >K</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="3" >L</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="4" >M</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="5" >N</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="6" >O</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="7" >P</button>
</div>
</div>
Using a specified width makes uniform.
Good day,
I have a little issue with bootstrap button groups. Probably I am doing something wrong or I am overlooking something. But I am running a bit at a dead end here. So I hope that someone could shed a bit of light on this topic.
I have a couple of buttons set inside of a bootstrap group.
The buttons are nicely aligned and appear as they should.
Except for mobile.
When I resize the window however I notice that the buttons stay horizontally aligned. They do not automatically form a row such as bootstrap columns.
Now this is exactly what I would like. Since I want those buttons to form a toolbar that is usable on a mobile phone as well.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group mr-2" role="group" aria-label="button group">
<button type="button" class="btn btn-default">button one</button>
<button type="button" class="btn btn-default">button two</button>
<button type="button" class="btn btn-default">button three</button>
<button type="button" class="btn btn-default">button four</button>
<button type="button" class="btn btn-default">button five</button>
<button type="button" class="btn btn-default">button six</button>
</div>
</div>
</div>
</div>
Take the code above.
That generates the following :
But when resizing the thing I get :
Whilst I would like the buttons to resize or order in a way they are suitable as a toolbar functioning for mobile phones.
You need to actually size the buttons inside your container grid.
https://getbootstrap.com/docs/4.3/layout/grid/
<div class="container">
<div class="col-md-12">
<div class="btn-group row" role="group" aria-label="button group">
<button type="button" class="btn btn-default col-md-2">button one</button>
<button type="button" class="btn btn-default col-md-2">button two</button>
<button type="button" class="btn btn-default col-md-2">button three</button>
<button type="button" class="btn btn-default col-md-2">button four</button>
<button type="button" class="btn btn-default col-md-2">button five</button>
<button type="button" class="btn btn-default col-md-2">button six</button>
</div>
</div>
</div>
What you see is the default behavior of the button-group class... so we can define our own rule for the width breakpoint where the scroll starts to emerge by adding the following CSS:
#media screen and (max-width:576px){
.btn-group{display:flex; flex-direction: column;}
}
Complete snippet below:
#media screen and (max-width:576px) {
.btn-group {
display: flex;
flex-direction: column;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group mr-2 " role="group" aria-label="button group">
<button type="button" class="btn btn-default">button one</button>
<button type="button" class="btn btn-default">button two</button>
<button type="button" class="btn btn-default">button three</button>
<button type="button" class="btn btn-default">button four</button>
<button type="button" class="btn btn-default">button five</button>
<button type="button" class="btn btn-default">button six</button>
</div>
</div>
</div>
</div>
Coming from: Twitter Bootstrap Button Text Word Wrap
How can I set the word wrap of a text inside a button in bootstrap 4, without change the height or with all buttons with the same height? For example:
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
returns this:
with the answer from that question (that is duplicated everywhere but the answer is the same everywhere)
.btn{
white-space:normal !important;
word-wrap: break-word;
}
but the expected result is that "Cambio de Nacionalidad" being aligned.
Since you are using BS 4 the col-* are flex items stretched by default so simply use height:100% on the button
.btn {
height:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
In Bootstrap, how can I get a button group like the following that span the full width of a parent element? (like with the ".btn-block" class, but applied to a group http://getbootstrap.com/css/#buttons-sizes )
<div class="btn-group" role="group" aria-label="...">
<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>
Correct solution for Bootstrap 4 and Bootstrap 5 (from Bootstrap 4 migration documentation):
Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
Example:
<div class="btn-group d-flex" role="group" aria-label="...">
<button type="button" class="btn btn-default w-100">Left</button>
<button type="button" class="btn btn-default w-100">Middle</button>
<button type="button" class="btn btn-default w-100">Right</button>
</div>
Source: https://getbootstrap.com/docs/4.0/migration/#button-group
Edit: verified solution with Bootstrap 5
Flexbox can do that.
.btn-group.special {
display: flex;
}
.special .btn {
flex: 1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group special" role="group" aria-label="...">
<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>
You can also use bootstraps btn-block will span across parent.
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
https://getbootstrap.com/docs/4.0/components/buttons/
In Bootstrap 4, make use of .d-flex on your .btn-group and .w-100 on individual buttons:
.btn-group.d-flex(role='group')
button.w-100.btn.btn-lg.btn-success(type='button') 👍
button.w-100.btn.btn-lg.btn-danger(type='button') 👎
.btn-group(role='group')
button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown')
| •••
.dropdown-menu
a.dropdown-item(href='#') An option
a.dropdown-item(href='#') Another option
You can also use .btn-group-justified.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="btn-group btn-group-justified">
Left
Middle
Right
</div>
</div>
<div class="col-sm-12">
<div class="btn-group btn-block" role="group">
<button class="btn btn-success col-sm-10" type="submit">Button 1</button>
<button class="btn btn-danger col-sm-2" type="submit">Button 2</button>
</div>
I'm having trouble trying to align Boostrap buttons and input on one line, having the input stretching horizontally while snuggling against the buttons.
Here are different attempts:
In case #1: button group and input group are in the same column. The input stretches horizontally but it is thrown on the next line.
<h2>#1</h2>
<div class="row">
<div class="col-lg-12">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
In case #2: button group and input group are in two equal columns, but there's a gap between the two.
<h2>#2</h2>
<div class="row">
<div class="col-lg-6">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
In case #3: more column is given to the input group (ratio 3:9), but then half of the button group gets thrown to the next line.
<h2>#3</h2>
<div class="row">
<div class="col-lg-3">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
</div><!-- /.col-lg-3 -->
<div class="col-lg-9">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-9 -->
</div><!-- /.row -->
In case #4: button group and input group are in the same column, wrapped in an in-line form. Cozy setting, but the input doesn't stretch its feet any more.
<h2>#4</h2>
<div class="row">
<div class="col-lg-12">
<form class="form-inline" role="form">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
Ideal case: button group and input group share the same line as in #2 and are close together as in #4. In case the screen would be re-sized, I would expect the input to stretch first, before the line gets broken with divs thrown to the next line.
But how can I achieve that? Am I using the wrong forms / layout? Or does the CSS have to be modified to create a new kind of layout?
HTML (case-4)
<div class="row">
<div class="col-lg-12">
<form class="form-inline" role="form">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</form>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
With bootstrap 3.0.2
Additional CSS
.btn-group {
display: inline !important;
}
Fiddle Example
With Bootstrap 3.3.5
.btn-group {
display: inline !important;
}
.form-inline .input-group {
display: flex;
}
.form-inline .input-group .input-group-btn {
display: flex;
}
Fiddle Example
Use flex to let the input grow to take up the rest of the available space:
.flex {
display: flex;
}
input {
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 flex">
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
<button>button 4</button>
<input type="text">
<button>button 5</button>
</div>
You might want to consider something like this or it may get you to where you need to be esp since it takes mobile viewports into account.
Open it up the page to full-width and reduce it.
#myForm .group-change .form-control {
border-radius: 0;
}
#media (max-width: 767px) {
#myForm .group-change {
text-align: center;
display: inline;
}
#myForm .group-change .input-group-btn .btn {
border-radius: 0;
}
#myForm .group-change .input-group-btn .btn-last {
border-radius: 0;
width: 100%;
}
#myForm .group-change .input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: 0px;
}
#myForm .group-change .dropdown-menu {
width: 100%
}
}
#media (max-width: 480px) {
#myForm .group-change .input-group-btn>.btn+.btn {
margin-left: 0px;
}
#myForm .group-change .btn {
width: 100%;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container-fluid">
<form id="myForm"> <span class="input-group group-change">
<span class="input-group-btn" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn btn-primary">Sample</button>
</span>
<input type="text" class="form-control" id="myInput" placeholder="Text"> <span class="input-group-btn" role="group" aria-label="...">
<button class="btn btn-default btn-last dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Drop <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action
</li>
</ul>
</span>
</span>
</form>
</div>
<hr>