Creating a uniform button group using Bootstrap - html

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.

Related

Active button always active in each division

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>

Label smaller than button in Bootstrap button group

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>

Bootstrap 4 - word wrap text without change the height

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>

Navbar tab full text is not showing inside button and how to change navtab row?

I have used Navbar tab of bootstrap and i want to only show nine buttons on one row but all the eighteen buttons are showing in single row with text inside in button being compressed.The full text is not showing which are more in length.I want to change the row after nine button and show the full text. I am not getting the solution.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .useravatar {
position: absolute;
top: 15px;
left: 0;
right: 0;
}
.card.hovercard .useravatar img {
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info .card-title {
padding:0 5px;
font-size: 20px;
line-height: 1;
color: #262626;
background-color: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.card.hovercard .card-info {
overflow: hidden;
font-size: 12px;
line-height: 20px;
color: #737373;
text-overflow: ellipsis;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
</style>
<body>
<div class="container">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" href="#tab1" data-toggle="tab">
<div class="hidden-xs">Sample</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab2" data-toggle="tab">
<div class="hidden-xs">Plot Description</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab3" data-toggle="tab">
<div class="hidden-xs">Ntfp</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab4" data-toggle="tab">
<div class="hidden-xs">Sampling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab5" data-toggle="tab">
<div class="hidden-xs">Sapling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab6" data-toggle="tab">
<div class="hidden-xs">Seedling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab7" data-toggle="tab">
<div class="hidden-xs">Time Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab8" data-toggle="tab">
<div class="hidden-xs">TOF Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Tree Climb Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Soil Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">C# is also a programming language</div>
<div class="tab-pane" id="tab2">D# is also a programming language</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
</script>
</body>
</html>

This is your solution. Add a new div close and new <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> after ninth button.
<div class="container">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" href="#tab1" data-toggle="tab">
<div class="hidden-xs">Sample</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab2" data-toggle="tab">
<div class="hidden-xs">Plot Description</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab3" data-toggle="tab">
<div class="hidden-xs">Ntfp</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab4" data-toggle="tab">
<div class="hidden-xs">Sampling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab5" data-toggle="tab">
<div class="hidden-xs">Sapling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab6" data-toggle="tab">
<div class="hidden-xs">Seedling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab7" data-toggle="tab">
<div class="hidden-xs">Time Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab8" data-toggle="tab">
<div class="hidden-xs">TOF Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Tree Climb Form</div>
</button>
</div>
</div>
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Soil Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">C# is also a programming language</div>
<div class="tab-pane" id="tab2">D# is also a programming language</div>
</div>
</div>

This is your solution. Add a new div close and new <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> after ninth button.
<div class="container buttoncontainer">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" href="#tab1" data-toggle="tab">
<div class="hidden-xs">Sample</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab2" data-toggle="tab">
<div class="hidden-xs">Plot Description</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab3" data-toggle="tab">
<div class="hidden-xs">Ntfp</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab4" data-toggle="tab">
<div class="hidden-xs">Sampling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab5" data-toggle="tab">
<div class="hidden-xs">Sapling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab6" data-toggle="tab">
<div class="hidden-xs">Seedling Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab7" data-toggle="tab">
<div class="hidden-xs">Time Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab8" data-toggle="tab">
<div class="hidden-xs">TOF Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Tree Climb Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Soil Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
<div class="btn-group" role="group"> <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab"> <div class="hidden-xs">Disturbance Form</div> </button> </div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
<div class="hidden-xs">Stand Form</div>
</button>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">C# is also a programming language</div>
<div class="tab-pane" id="tab2">D# is also a programming language</div>
</div>
</div>
And add this rule to your css.
.buttoncontainer .btn-group {
display: flex;
width: auto !important;
}

How to put some space between elements when bootstrap grid collapse?

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>