In following bootstrap-3 html the three buttons are aligned to the top edge of textarea. How can we align in the middle instead so they are about half way down?
Note: It probably is not relevant but just in case, I'm using default bootstrap settings in a Visual Studio 2017 project.
<tr class="row">
<td class="col-md-8">
<textarea class="txtInput form-control" rows="3" asp-for="#Model.lstOrders" style="min-width:630px;overflow:auto;"></textarea>
</td>
<td class="col-md-4 text-right">
<button type="button" class="btnEdit btn-info btn-xs">Edit</button> |
<button type="button" class="Savebtn btn-info btn-xs" value="#Model.lstOrders">Save</button> |
<button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button>
<tr>
As commented earlier :Within table-cells, td {vertical-align:middle;} should do .
td {vertical-align:middle;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tr class="row">
<td class="col-md-8">
<textarea class="txtInput form-control" rows="3" asp-for="#Model.lstOrders" style="min-width:300px;overflow:auto;"></textarea>
</td>
<td class="col-md-4 text-right">
<button type="button" class="btnEdit btn-info btn-xs">Edit</button> |
<button type="button" class="Savebtn btn-info btn-xs" value="#Model.lstOrders">Save</button> |
<button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button>
</tr>
</table>
As pointed out in the comments, setting your tds to vertical-align: middle (which is the initial property value anyway) should do the trick.
.specialTable td {
vertical-align: middle;
}
<table class="specialTable">
<tr class="row">
<td class="col-md-8">
<textarea class="txtInput form-control" rows="3" asp-for="#Model.lstOrders" style="overflow:auto;"></textarea>
</td>
<td class="col-md-4 text-right">
<button type="button" class="btnEdit btn-info btn-xs">Edit</button> |
<button type="button" class="Savebtn btn-info btn-xs" value="#Model.lstOrders">Save</button> |
<button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button>
</tr>
</table>
Related
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 do have this HTML, but I am not able to do this:
The width of the first column Links available should be same like the length of Links available, and the text shouldn't split this two words. It should be one line Links available
On the column Links available only header is important, the cells below will not be used, so it could be hidden
The buttons should have a little bit space between next button, and it should be like inline...
What I want to, in visual:
My HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th class="col-xl">Links available:</th>
<th class="col-xl-auto">Category 1</th>
<th class="col-xl-auto">Category 2</th>
<th class="col-xl-auto">Category 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
</tbody>
</table>
if you would like to test my code, please use: codeply - Bootstrap snippets
If you want to remove responsiveness column
change
col-md-3
to
col-3
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<table class="table">
<thead>
<tr class="">
<th class="">Links available:</th>
<th class="">Category 1</th>
<th class="">Category 2</th>
<th class="">Category 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
</tbody>
</table>
Second code using DIV
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
<div class="row m-0">
<div class="col-3 p-0">
<p class="font-weight-bold">Links available:</p>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 1</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 2</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 3</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</div>
</div>
I think you are searching for a nested Grid Layout. I recommend to read about this, so you can see examples of how to work with the Bootstrap Grid System. Even more, on XS (EXTRA SMALL) screens sizes I recommend to stack the categories vertically because of the little width you have available. You can check this all on next example:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 text-center">
<p class="my-1">Links available:</p>
</div>
<div class="col-sm-3 text-center bg-warning">
<div class="row">
<div class="col-12 my-1">Category 1:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
<div class="col-sm-3 text-center">
<div class="row">
<div class="col-12 my-1">Category 2:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
<div class="col-sm-3 text-center bg-warning">
<div class="row">
<div class="col-12 my-1">Category 3:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
</div>
</div>
Here I am providing a screenshot and I outlined the area I wanted to collapse all the way to just right after the last blue buttom, touching it. I outlined the area I wanted to collapse in red. Is there a specific class that will let me do that?
Ty
code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="panel panel-primary col-md-6">
<div class="row">
<!-- Label -->
<button type="button" class="btn btn-info btn-xs btn-block" id='invoicelabel'><strong>Invoice CP</strong>
</button>
<!-- Invoice CP -->
<div class="btn-group btn-group-vertical col-md-3 test2">
<button class="btn btn-primary btn-sm" type="submit">Total Amount</button>
<button class="btn btn-primary btn-sm" type="submit">Duplicate</button>
<button class="btn btn-primary btn-sm" type="submit">Clear</button>
<button class="btn btn-primary btn-sm" type="submit">Currency</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
</div>
<table class="table table-condensed">
<tbody class="col-md-10 test pull-right">
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Try checking the CSS height property of the .test or .test2. Probably it is set to a specific value. If you leave it blank, the area will fit to the content.
I have a table using Bootstrap, where the content of each table cell is a button. I want the width of each cell to be the width of the button plus margin. I tried resizing using <td class="col-md-1"> but this makes no difference.
Is there a way of resizing the width with Bootstrap?
This is the HTML:
<table class="table table-bordered">
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">1</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">2<br>ABC</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">3<br>DEF</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">4<br>GHI</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">5<br>JKL</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">6<br>MNO</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">7<br>PQRS</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">8<br>TUV</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">9<br>WXYZ</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs"><<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">0<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">Clr<br></button></td>
</tr>
Thanks
You can add a width to the table like this (assuming you add id="phone-table" to your <table>):
#media (min-width:767px) {
#phone-table{
width:20%;
}
}
#media (max-width:768px) {
#phone-table{
width:40%;
}
}
I used media queries so that the table maintains responsiveness and won't be too large or small on any screen.
Bootply Demo
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