You are on page 1of 2

Layout classes

.container: Creates a responsive fixed-width container.


.container-fluid: Creates a full-width container that spans the entire width of the
viewport.
.row: Creates a horizontal row of columns.
.col-{breakpoint}-*: Creates a responsive column based on the screen size.

Typography classes

.h1 to .h6: Creates heading elements with different sizes.


.lead: Increases the font size and weight of a paragraph for emphasis.
.display-{1-4}: Increases the font size and weight of an element for emphasis.
.text-{left|center|right|justify}: Aligns text within a block-level element.
.text-{primary|secondary|success|danger|warning|info|light|dark}: Sets the color of
text.

Button classes

.btn: Creates a button element.


.btn-{outline}-{color}: Creates an outline button with a specific color.
.btn-lg, .btn-sm, .btn-block: Modifies the size and layout of a button.
Form classes
.form-group: Wraps form controls like inputs, selects, and textareas.
.form-control: Creates a form control element like an input or textarea.
.form-check: Wraps checkboxes and radio buttons.
.form-check-input: Creates a checkbox or radio button.
.form-check-label: Labels a checkbox or radio button.
.form-text: Provides help text for a form control.
.input-group, .input-group-addon: Creates a group of form controls with an optional
addon.

Navigation classes

.nav: Creates a navigation element.


.nav-link: Creates a navigation link.
.nav-item: Wraps a navigation link.
.navbar: Creates a navigation bar.
.navbar-brand: Creates a branding link within a navigation bar.
.navbar-toggler: Creates a button to toggle a collapsed navigation menu.

Alert classes

.alert: Creates an alert box.


.alert-{success|info|warning|danger}: Sets the color of an alert box.

Badge classes

.badge: Creates a badge element.


.badge-{primary|secondary|success|danger|warning|info|light|dark}: Sets the color
of a badge.

Card classes
.card: Creates a card element.
.card-header: Creates a header section for a card.
.card-body: Creates a body section for a card.
.card-footer: Creates a footer section for a card.
.card-title: Creates a title section for a card.

Carousel classes

.carousel: Creates a carousel element.


.carousel-item: Wraps a carousel item.
.carousel-indicators: Creates indicators for a carousel.

Utility classes

.d-{none|inline|inline-block|block|table|table-row|table-cell}: Sets the display


property of an element.
.m-{1-5}: Sets the margin of an element.
.p-{1-5}: Sets the padding of an element.
.text-{nowrap|truncate}: Sets the text overflow property of an element.
.text-{lowercase|uppercase|capitalize}: Sets the text transformation property of an
element.
.text-{left|center|right}: Sets the text alignment of an element.
.float-{left|right|none}: Sets the float property of

You might also like