Shortcodes
BMI is a measure of body fat based on height and weight that applies to adult men and women.
Tabs
Collapse
Modals bootstrap
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
Modals bootstrap optional size
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog
.
Buttons standard
Tables
Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the class="table"
class is required.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Get a little fancy with your tables by adding zebra-striping—just add the class="table table-striped"
class.
Note: Striped tables use the :nth-child
CSS selector and is not available in IE7-IE8.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Add borders around the entire table and rounded corners for aesthetic purposes class="table table-bordered"
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Make your tables more compact by adding the class="table table-condensed"
class to cut table cell padding in half.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Create responsive tables by wrapping any .table
in .table-responsive
to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes .
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |