I have a problem with three buttons on my site.
I would like to have some space between those buttons.
Is it possible to do this, without using inline styling?
Perhaps bootstrap has some classes for this?
I know I can simply do it with:
style='margin-right:5px;'
or write custom class with this property.
I am just wondering if bootstrap has some classes for this?
Here is example.
Problem is with this three buttons:
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
Try to put them inside btn-toolbar or some other container.
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
Yes you have to wrap them
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
EDITED CODEPEN
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>
d-flex justify-content-between
<div class="col-md-3 mt-4 d-flex justify-content-betweend-flex justify-content-between">
<button type="submit" class="btn btn-info text-light" id="atndanceFilter"> <i class="fa fa-search"></i> Filter Report</button>
Reset
</div>
Will work like magic.
Related
First of all I am a noob of CSS. Also I am using bootstrap framework. I have a question. Recently I created a set of buttons and they are viewable on mobile devices too.
Desktop view:
https://i.stack.imgur.com/C8JCp.png
Mobile view:
https://i.stack.imgur.com/IBPP0.png
So what I want to do is I need to give some small space between rows on mobile device view.
Like this: https://i.stack.imgur.com/fU55k.png
My Code:
<?php
include "header.php";
include "navbar.php";
?>
<div style="text-align: center;">
<button type="button" class="btn btn-info">January</button>
<button type="button" class="btn btn-info">February</button>
<button type="button" class="btn btn-info">March</button>
<button type="button" class="btn btn-info">April</button>
<button type="button" class="btn btn-info">May</button>
<button type="button" class="btn btn-info">June</button>
<button type="button" class="btn btn-info">July</button>
<button type="button" class="btn btn-info">August</button>
<button type="button" class="btn btn-info">September</button>
<button type="button" class="btn btn-info">October</button>
<button type="button" class="btn btn-info">November</button>
<button type="button" class="btn btn-info">December</button>
</div>
<?php
include "footer.php"
?>
Anyone help for this? Thanks in Advance. Also sorry for my bad English.
So for that you have to set bottom margin of 5px for all buttons like below
.btn-Margin{
margin-bottom : 5px
}
<div style="text-align: center;">
<button type="button" class="btn btn-info btn-Margin">January</button>
<button type="button" class="btn btn-info btn-Margin">February</button>
<button type="button" class="btn btn-info btn-Margin">March</button>
<button type="button" class="btn btn-info btn-Margin">April</button>
<button type="button" class="btn btn-info btn-Margin">May</button>
<button type="button" class="btn btn-info btn-Margin">June</button>
<button type="button" class="btn btn-info btn-Margin">July</button>
<button type="button" class="btn btn-info btn-Margin">August</button>
<button type="button" class="btn btn-info btn-Margin">September</button>
<button type="button" class="btn btn-info btn-Margin">October</button>
<button type="button" class="btn btn-info btn-Margin">November</button>
<button type="button" class="btn btn-info btn-Margin">December</button>
</div>
Here is my sample form HTML code. In further, I need when click the button in each section the button stays active and it shows red color background. on the other hand, inactive buttons change the grey background color. For example when we click the "print foil thickness" label button 3 then it will active
button 3 and remains 4,5,6,7,8, Best Fit buttons are disabled.
<form id="msform">
<fieldset>
<div class="form-card">
<label class="label-order">Order Set Required:</label>
<div class="btn-group" role="group" aria-label="Kit">
<button type="button" class="btn btn-secondary">Replacement Set</button>
<button type="button" class="btn btn-secondary">Complete Set</button>
</div>
<label class="label-order">Print Foil Thickness:</label>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary">Best Fit</button>
</div>
</div>
<label class="label-order">Print Foil Opening (in mils):</label>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary">Best Fit</button>
</div>
</div>
<label class="label-order">Sphere Diameter To Be Used (in mils):</label>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary">Best Fit</button>
</div>
</div>
</div>
</fieldset>
</form>
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>
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 have a table with a table header and a table row. The header is a btn-group, with 12 buttons to resemble months of a calendar, the row is of 31 columns. I want the btn-group to distribute evenly & stretch the full width of the table row. I can add style="width:100px;" to each button, but that's not responsive, and I don't necessarily know the width of the full table.
Can anyone see what I need to add to my code?
<thead>
<tr>
<th colspan="31">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Jan</button>
<button type="button" class="btn btn-default">Feb</button>
<button type="button" class="btn btn-default">Mar</button>
<button type="button" class="btn btn-default active">Apr</button>
<button type="button" class="btn btn-default">May</button>
<button type="button" class="btn btn-default">Jun</button>
<button type="button" class="btn btn-default">Jul</button>
<button type="button" class="btn btn-default">Aug</button>
<button type="button" class="btn btn-default">Sep</button>
<button type="button" class="btn btn-default">Oct</button>
<button type="button" class="btn btn-default">Nov</button>
<button type="button" class="btn btn-default">Dec</button>
</div>
</div>
</th>
</tr>
</thead>
Here is the css tag I changed from the Bootstrap 3 defaults:
.btn-group {
width:100%;
}
.btn-toolbar {
width:100%;
}
If I use btn-group-justified, it looks like this:
Add the following class to the parent container: .btn-group-justified
<thead>
<tr>
<th colspan="31">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-default">Jan</button>
<button type="button" class="btn btn-default">Feb</button>
<button type="button" class="btn btn-default">Mar</button>
<button type="button" class="btn btn-default active">Apr</button>
<button type="button" class="btn btn-default">May</button>
<button type="button" class="btn btn-default">Jun</button>
<button type="button" class="btn btn-default">Jul</button>
<button type="button" class="btn btn-default">Aug</button>
<button type="button" class="btn btn-default">Sep</button>
<button type="button" class="btn btn-default">Oct</button>
<button type="button" class="btn btn-default">Nov</button>
<button type="button" class="btn btn-default">Dec</button>
</div>
</div>
</th>
</tr>
and for even more reference, read the following part of the documentation:
http://getbootstrap.com/components/#btn-groups-justified