Bootstrap button group make them always in one line, always align horizontally.
When I resize window button comes down vertically.
I am looking for a solution where button comes always in one line no matter what.
I have applied style="white-space:nowrap;" on parent div but it doesn't work.
If possible try to use only bootstrap's inbuilt css classes.
Please answer by keeping current HTML structure as it is. Because that's how it is implemented in mine project.
This is simplest implementation of bootstrap button group. See PLUNKER
CODE
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal">
<div class="form-group" style="white-space:nowrap;">
<div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
11111
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
</div>
</div>
</div>
</div>
You need to override the float: left; as well as add white-space: nowrap; to the parent. So in your css:
.btn-group {
white-space: nowrap;
}
.btn.btn-primary,
.btn.btn-success {
float: none;
}
plunker: https://plnkr.co/edit/lRWyHeeN78d2sSNaXGSZ?p=preview
Although, I would recommend adding a specific class to the btn-group/btn-primary/btn-success because overriding bootstraps styling instead of just adding a custom class is a bad practice.
For example:
HTML:
<div class="btn-group custom-class">
<button type="button" class="btn btn-primary custom-class">
<button type="button" class="btn btn-success custom-class">
CSS:
.btn-group.custom-class{...}
.btn.btn-primary.custom-class,
.btn.btn-success.custom-class {...}
https://plnkr.co/edit/nAZD6Hssgnep37fXU9vb?p=preview
Try display:inline-flex on parent instead on display:inline-block on btn-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal" style="">
<div class="form-group" style="white-space:nowrap;">
<div>
<div class="btn-group" style="display:inline-flex;">
<button type="button" class="btn btn-primary">
11111
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
</div>
</div>
</div>
</div>
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>
I found some come to make a button that is also an input file with a label :
<label>
Import
<input type="file" hidden>
</label>
So I put in on the toolbar on my project where I'm using a button group :
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary" (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
The thing the label is actually a bit shorter than other buttons.
I tried to fix it's height :
<label style="height: 101%" class="btn btn-primary">
It works but now the text isn't vertically centered !
Is there a way to make it look like a normal button ?
You can remove the margin of that label like this:
(I would not recommend inline css).
.export {
margin: 0px;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary export">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary " (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
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.
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