Welcome to the Bootstrap 4 Class Reference by The Coding College! This comprehensive guide lists commonly used Bootstrap 4 classes, organized by category, to help you quickly find the right class for your project. Use this reference to streamline your workflow and build responsive, modern web designs efficiently.
1. Layout Classes
Grid System
Bootstrap’s grid system is based on a 12-column layout. Use these classes to structure layouts.
Class Name
Description
.container
Creates a fixed-width container.
.container-fluid
Creates a full-width, responsive container.
.row
Defines a row for columns.
.col-*
Defines columns (* can be numbers 1–12).
.col-sm-*
Columns for small devices (≥576px).
.col-md-*
Columns for medium devices (≥768px).
.col-lg-*
Columns for large devices (≥992px).
.col-xl-*
Columns for extra-large devices (≥1200px).
.offset-*
Adds space to the left of a column.
.order-*
Changes the order of columns.
Display Utilities
Control the visibility of elements based on screen size.
Class Name
Description
.d-none
Hides an element.
.d-block
Displays as a block element.
.d-inline
Displays as an inline element.
.d-inline-block
Displays as an inline-block element.
.d-flex
Displays as a flex container.
.d-sm-* to .d-xl-*
Responsive display utilities.
Flexbox Utilities
Simplify layout alignment with Bootstrap’s flexbox utilities.
Class Name
Description
.d-flex
Enables flexbox.
.justify-content-start
Aligns flex items to the left.
.justify-content-end
Aligns flex items to the right.
.justify-content-center
Aligns flex items to the center.
.align-items-start
Aligns items to the top.
.align-items-center
Centers items vertically.
.align-items-end
Aligns items to the bottom.
2. Typography Classes
Class Name
Description
.text-left
Aligns text to the left.
.text-center
Aligns text to the center.
.text-right
Aligns text to the right.
.text-muted
Adds muted, grey-colored text.
.text-uppercase
Transforms text to uppercase.
.text-lowercase
Transforms text to lowercase.
.font-weight-bold
Makes text bold.
.font-weight-light
Makes text lighter.
.font-italic
Applies italic styling.
3. Buttons
Class Name
Description
.btn
Base button styling.
.btn-primary
Blue button (default theme).
.btn-secondary
Grey button.
.btn-success
Green button.
.btn-danger
Red button.
.btn-warning
Yellow button.
.btn-info
Light blue button.
.btn-light
Light button with subtle styling.
.btn-dark
Dark button.
.btn-outline-*
Outline buttons for all color variants.
4. Forms and Inputs
Form Layout
Class Name
Description
.form-control
Applies default input styling.
.form-inline
Creates inline forms.
.form-group
Groups form elements.
Input Styles
Class Name
Description
.form-control-sm
Small-sized input.
.form-control-lg
Large-sized input.
.input-group
Groups inputs with addons or buttons.
5. Components
Navigation
Class Name
Description
.navbar
Creates a navigation bar.
.navbar-light
Light-colored navbar.
.navbar-dark
Dark-colored navbar.
.navbar-expand-*
Expands navbar based on screen size.
Alerts
Class Name
Description
.alert
Base class for alerts.
.alert-primary
Blue alert.
.alert-success
Green alert.
.alert-danger
Red alert.
.alert-warning
Yellow alert.
Cards
Class Name
Description
.card
Creates a card container.
.card-header
Adds a header section to the card.
.card-body
Adds content to the card body.
.card-footer
Adds a footer section to the card.
Modal
Class Name
Description
.modal
Base modal styling.
.modal-dialog
Defines the modal’s dialog box.
.modal-content
Container for modal content.
6. Spacing Utilities
Class Name
Description
.m-0 to .m-5
Margin utilities (0 to 5).
.p-0 to .p-5
Padding utilities (0 to 5).
.mt-*, .mb-*, .ml-*, .mr-*
Top, bottom, left, right margin.
.pt-*, .pb-*, .pl-*, .pr-*
Top, bottom, left, right padding.
7. Colors
Class Name
Description
.text-primary
Blue text.
.text-success
Green text.
.text-danger
Red text.
.text-warning
Yellow text.
.bg-primary
Blue background.
.bg-success
Green background.
.bg-danger
Red background.
.bg-warning
Yellow background.
8. Advanced Classes
Class Name
Description
.sticky-top
Makes an element sticky at the top of the viewport.
.rounded
Adds rounded corners to elements.
.shadow
Adds a shadow to an element.
.sr-only
Hides an element visually but keeps it accessible for screen readers.
Conclusion
This Bootstrap 4 Class Reference is designed to be a handy cheat sheet for developers using Bootstrap. For more detailed guides and tutorials, visit The Coding College. With these classes, you can build responsive, modern, and visually appealing websites quickly and efficiently!
