Bootstrap 3 is a powerful front-end framework that offers a vast collection of predefined CSS and JavaScript classes. These classes simplify the process of creating responsive, mobile-first web designs.
In this guide, we’ll cover all the key Bootstrap classes organized by category, making it easier for you to quickly find what you need.
For more tutorials, check out TheCodingCollege.com, your go-to resource for learning Bootstrap.
1. Layout Classes
These classes are used to structure the layout of your webpage using Bootstrap’s grid system.
| Class | Description |
|---|---|
.container | Creates a fixed-width container with responsive breakpoints. |
.container-fluid | Creates a full-width container that spans the entire width. |
.row | Defines a row in the grid system. |
.col-xs-* | Grid columns for extra small devices. |
.col-sm-* | Grid columns for small devices. |
.col-md-* | Grid columns for medium devices. |
.col-lg-* | Grid columns for large devices. |
.visible-* | Makes an element visible on specific screen sizes. |
.hidden-* | Hides an element on specific screen sizes. |
2. Typography Classes
Bootstrap offers several typography-related classes for styling text elements.
| Class | Description |
|---|---|
.text-left | Aligns text to the left. |
.text-right | Aligns text to the right. |
.text-center | Centers text horizontally. |
.text-justify | Justifies text. |
.text-muted | Styles text with a muted (gray) color. |
.text-primary | Styles text with the primary color. |
.text-success | Styles text with the success color (green). |
.text-info | Styles text with the info color (blue). |
.text-warning | Styles text with the warning color (yellow). |
.text-danger | Styles text with the danger color (red). |
.lead | Styles text as a lead paragraph. |
.small | Reduces font size for smaller text. |
3. Table Classes
These classes help style tables in your Bootstrap projects.
| Class | Description |
|---|---|
.table | Applies basic Bootstrap table styling. |
.table-striped | Adds zebra-striping to rows. |
.table-bordered | Adds borders to the table and its cells. |
.table-hover | Adds a hover effect to table rows. |
.table-condensed | Makes the table more compact by reducing cell padding. |
.active | Highlights a table row or cell. |
.success | Styles a row or cell with a green background. |
.info | Styles a row or cell with a blue background. |
.warning | Styles a row or cell with a yellow background. |
.danger | Styles a row or cell with a red background. |
4. Button Classes
Bootstrap buttons are styled using these classes.
| Class | Description |
|---|---|
.btn | Base class for buttons. |
.btn-primary | Styles the button with the primary theme color. |
.btn-success | Styles the button with the success theme color. |
.btn-info | Styles the button with the info theme color. |
.btn-warning | Styles the button with the warning theme color. |
.btn-danger | Styles the button with the danger theme color. |
.btn-link | Styles the button to look like a hyperlink. |
.btn-lg | Makes the button large. |
.btn-sm | Makes the button small. |
.btn-xs | Makes the button extra small. |
.btn-block | Makes the button span the full width of its parent. |
5. Alert Classes
Alert classes help display contextual messages.
| Class | Description |
|---|---|
.alert | Base class for alerts. |
.alert-success | Displays a green success alert. |
.alert-info | Displays a blue info alert. |
.alert-warning | Displays a yellow warning alert. |
.alert-danger | Displays a red danger alert. |
.alert-dismissable | Adds a close button to dismiss the alert. |
6. Form Classes
These classes help style forms and inputs.
| Class | Description |
|---|---|
.form-group | Groups form elements together. |
.form-control | Styles input elements (text, email, password, etc.). |
.form-inline | Displays form elements inline. |
.form-horizontal | Styles forms with horizontal labels and inputs. |
.control-label | Styles labels in horizontal forms. |
.input-lg | Makes input elements large. |
.input-sm | Makes input elements small. |
.help-block | Adds a block of help text below an input. |
7. Utility Classes
Utility classes provide quick styling options for spacing, colors, and visibility.
| Class | Description |
|---|---|
.pull-left | Floats an element to the left. |
.pull-right | Floats an element to the right. |
.clearfix | Clears floats. |
.center-block | Centers a block element horizontally. |
.hidden | Hides an element. |
.show | Forces an element to be displayed. |
.text-hide | Hides text visually but keeps it accessible to screen readers. |
8. Image Classes
| Class | Description |
|---|---|
.img-responsive | Makes images responsive. |
.img-rounded | Styles images with rounded corners. |
.img-circle | Styles images as circles. |
.img-thumbnail | Adds a border and padding to images. |
Conclusion
Understanding and utilizing Bootstrap 3 classes effectively can save you significant development time while maintaining a clean and professional design. Bookmark this reference on TheCodingCollege.com for quick access during your projects.