Get the lowdown on the key pieces of Bootstrap's infrastructure, including the best approach to better, faster, stronger web development.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
All HTML headings and classes available in Bootstrap, <p>, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
Wrap inline snippets of code with <code>.
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
For basic styling—light padding and only horizontal dividers — add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, Bootstrap opted to isolate the custom table styles.
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
Use any of the available button classes to quickly create a styled button.
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
You can also create block level buttons — those that span the full width of a parent — by adding .btn-block.
Add classes to an <img> element to easily style images in any project.
You can also style the shape of yopur images using the following classes:
Helper Classes can be used for things like generic close icon's for dismissing content like modals and alerts.
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media queries. Also included are utility classes for toggling content when printed.
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.