Bootstrap 4 Class Reference
Complete List of All Bootstrap 4 Classes
Complete list of all Bootstrap 4 CSS classes with description and examples:
| Class | Description | Example | Category |
|---|---|---|---|
.active |
Adds a white text color to the active link in a navbar. | Try it | Navbar |
.active |
Adds a blue background color to the active list item in a list group | Try it | List Groups |
.active |
Adds a dark-blue background color to simulate a "pressed" button | Try it | Buttons |
.active |
Adds a blue background color to the active dropdown item in a dropdown | Try it | Dropdowns |
.active |
Adds a blue background color to the active pagination link (to highlight the current page) | Try it | Pagination |
.active |
Displays/shows the current carousel item | Try it | Carousel |
.alert |
Creates an alert message box | Try it | Alerts |
.alert-danger |
Red alert. Indicates a dangerous or potentially negative action | Try it | Alerts |
.alert-dark |
Dark alert. Dark grey alert box | Try it | Alerts |
.alert-dismissible |
Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding) |
Try it | Alerts |
.alert-heading |
Adds color:inherit to the specified element |
Try it | Alerts |
.alert-info |
Teal alert. Indicates a neutral informative change or action | Try it | Alerts |
.alert-light |
Light alert. Light grey alert box | Try it | Alerts |
.alert-link |
Used on links inside alerts to provide matching colored links | Try it | Alerts |
.alert-primary |
Blue alert. Indicates an important action | Try it | Alerts |
.alert-secondary |
Grey alert. Indicates a "less" important action | Try it | Alerts |
.alert-success |
Green alert. Indicates a successful or positive action | Try it | Alerts |
.alert-warning |
Yellow alert. Indicates caution should be taken with this action | Try it | Alerts |
.align-baseline |
The element is aligned with the baseline of the parent. This is default | Try it | Utilities |
.align-bottom |
The element is aligned with the lowest element on the line | Try it | Utilities |
.align-middle |
The element is placed in the middle of the parent element | Try it | Utilities |
.align-top |
The element is aligned with the top of the tallest element on the line | Try it | Utilities |
.align-text-top |
The element is aligned with the top of the parent element's font | Try it | Utilities |
.align-text-bottom |
The element is aligned with the bottom of the parent element's font | Try it | Utilities |
.align-content-around |
Align gathered items "around" | Try it | Flex |
.align-content-*-around |
Align gathered items "around" on different screens | Try it | Flex |
.align-content-center |
Align gathered items in the center | Try it | Flex |
.align-content-*-center |
Align gathered items in the center on different screens | Try it | Flex |
.align-content-end |
Align gathered items at the end | Try it | Flex |
.align-content-*-end |
Align gathered items at the end on different screens | Try it | Flex |
.align-content-start |
Align gathered items from the start | Try it | Flex |
.align-content-*-start |
Align gathered items from the start on different screens | Try it | Flex |
.align-content-stretch |
Stretch gathered items | Try it | Flex |
.align-content-*-stretch |
Stretch gathered items on different screens | Try it | Flex |
.align-items-start |
Align single rows of items from the start | Try it | Flex |
.align-items-*-start |
Align single rows of items from the start on different screens | Try it | Flex |
.align-items-end |
Align single rows of items at the end | Try it | Flex |
.align-items-*-end |
Align single rows of items at the end on different screens | Try it | Flex |
.align-items-center |
Align single rows of items in the center | Try it | Flex |
.align-items-*-center |
Align single rows of items in the center on different screens | Try it | Flex |
.align-items-baseline |
Align single rows of items at the baseline | Try it | Flex |
.align-items-*-baseline |
Align single rows of items at the baseline on different screens | Try it | Flex |
.align-items-stretch |
Stretch single rows of items | Try it | Flex |
.align-items-*-stretch |
Stretch single rows of items on different screens | Try it | Flex |
.align-self-start |
Align a flex item from the start | Try it | Flex |
.align-self-*-start |
Align a flex item from the start on different screens | Try it | Flex |
.align-self-end |
Align a flex item at the end | Try it | Flex |
.align-self-*-end |
Align a flex item at the end on different screens | Try it | Flex |
.align-self-center |
Align a flex item in the center | Try it | Flex |
.align-self-*-center |
Align a flex item in the center on different screens | Try it | Flex |
.align-self-baseline |
Align a flex item at the baseline | Try it | Flex |
.align-self-*-baseline |
Align a flex item at the baseline on different screens | Try it | Flex |
.align-self-stretch |
Stretch a flex item | Try it | Flex |
.align-self-*-stretch |
Stretch a flex item on different screens | Try it | Flex |
.badge |
Creates a circular badge (grey circle - often used as a numerical indicator) | Try it | Badges |
.badge-danger |
Red badge. Indicates a dangerous or potentially negative action | Try it | Badges |
.badge-dark |
Dark badge. Dark grey alert box | Try it | Badges |
.badge-info |
Teal badge. Indicates a neutral informative change or action | Try it | Badges |
.badge-light |
Light badge. Light grey alert box | Try it | Badges |
.badge-pill |
Makes a badge more round | Try it | Badges |
.badge-primary |
Blue badge. Indicates an important action | Try it | Badges |
.badge-secondary |
Grey badge. Indicates a "less" important action | Try it | Badges |
.badge-success |
Green badge. Indicates a successful or positive action | Try it | Badges |
.badge-warning |
Yellow badge. Indicates caution should be taken with this action | Try it | Badges |
.bg-danger |
Adds a red background color to an element. Represents danger or a negative action | Try it | Colors |
.bg-dark |
Adds a dark grey background color to an element | Try it | Colors |
.bg-info |
Adds a teal background color to an element. Represents some information | Try it | Colors |
.bg-light |
Adds a light grey background color to an element | Try it | Colors |
.bg-primary |
Adds a blue background color to an element. Represents something important | Try it | Colors |
.bg-secondary |
Adds a grey background color to an element. Indicates a "less" important action | Try it | Colors |
.bg-success |
Adds a green background color to an element. Indicates success or a positive action | Try it | Colors |
.bg-warning |
Adds a yellow/orange background color to an element. Represents a warning or a negative action | Try it | Colors |
.blockquote |
Styles quoted blocks of content from another source (adds a larger font-size (1.25rem)) | Try it | Typography |
.blockquote-footer |
Styles the source title inside the blockquote (light grey text with indentation) | Try it | Typography |
.border |
Adds a border to an element | Try it | Utilities |
.border-bottom-0 |
Removes the bottom border from an element | Try it | Utilities |
.border-danger |
Adds a red border to an element (indicates danger) | Try it | Utilities |
.border-dark |
Adds a dark border to an element | Try it | Utilities |
.border-info |
Adds a teal border to an element (indicates information) | Try it | Utilities |
.border-left-0 |
Removes the left border from an element | Try it | Utilities |
.border-light |
Adds a light grey border to an element | Try it | Utilities |
.border-primary |
Adds a blue border to an element | Try it | Utilities |
.border-right-0 |
Removes the right border from an element | Try it | Utilities |
.border-top-0 |
Removes the top border from an element | Try it | Utilities |
.border-secondary |
Adds a grey border to an element | Try it | Utilities |
.border-success |
Adds a green border to an element (indicates success) | Try it | Utilities |
.border-warning |
Adds a orange border to an element (indicates warning) | Try it | Utilities |
.border-white |
Adds a white border to an element | Try it | Utilities |
.border-0 |
Removes all borders from an element | Try it | Utilities |
.breadcrumb |
A pagination. Indicates the current page's location within a navigational hierarchy | Try it | Pagination |
.breadcrumb-item |
Styles list items or links inside the breadcrumb | Try it | Pagination |
.btn |
Creates a basic button (gray background and rounded corners) | Try it | Buttons |
.btn-block |
Creates a block level button that spans the entire width of the parent element | Try it | Buttons |
.btn-dark |
Dark grey button | Try it | Buttons |
.btn-danger |
Red button. Indicates danger or a negative action | Try it | Buttons |
.btn-group |
Groups buttons together on a single line | Try it | Button Groups |
.btn-group-lg |
Large button group (makes all buttons in a button group larger - increased font-size and padding) | Try it | Button Groups |
.btn-group-sm |
Small button group (makes all buttons in a button group smaller) | Try it | Button Groups |
.btn-group-vertical |
Makes a button group appear vertically stacked | Try it | Button Groups |
.btn-info |
Teal button. Represents a neutral informative change or action | Try it | Buttons |
.btn-light |
Light grey button | Try it | Buttons |
.btn-link |
Makes a button look like a link (get button behavior) | Try it | Buttons |
.btn-lg |
Large button | Try it | Buttons |
.btn-outline-dark |
Dark grey bordered/outlined button | Try it | Buttons |
.btn-outline-danger |
Red bordered/outlined button. Indicates danger or a negative action | Try it | Buttons |
.btn-outline-info |
Teal bordered/outlined button. Represents a neutral informative change or action | Try it | Buttons |
.btn-outline-light |
Light grey bordered/outlined button | Try it | Buttons |
.btn-outline-primary |
Blue bordered/outlined button. | Try it | Buttons |
.btn-outline-secondary |
Grey bordered/outlined button. Indicates a "less" important action | Try it | Buttons |
.btn-outline-success |
Green bordered/outlined button. Indicates success or a positive action | Try it | Buttons |
.btn-outline-warning |
Orange bordered/outlined button. Represents warning or a negative action | Try it | Buttons |
.btn-primary |
Blue button. Indicates a something important | Try it | Buttons |
.btn-sm |
Small button | Try it | Buttons |
.btn-secondary |
Grey button. Indicates a "less" important action | Try it | Buttons |
.btn-success |
Green button. Indicates success or a positive action | Try it | Buttons |
.btn-toolbar |
Combine sets of button groups into button toolbars for more complex components | Try it | Button Groups |
.btn-warning |
Orange button. Represents warning or a negative action | Try it | Buttons |
.card |
Creates a card | Try it | Cards |
.card-body |
Container for card content | Try it | Cards |
.card-columns |
Container to create a masonry-like grid of cards | Try it | Cards |
.card-danger |
Adds a red background color to the card. Represents danger or a negative action | Try it | Cards |
.card-dark |
Adds a grey background color to the card | Try it | Cards |
.card-deck |
Container to create a grid of cards that are of equal height and width | Try it | Cards |
.card-footer |
Card footer | Try it | Cards |
.card-group |
Container to create a grid of cards that are of equal height and width, without side margins | Try it | Cards |
.card-header |
Card header | Try it | Cards |
.card-header-tabs |
Styles navigation tabs inside the card header | Try it | Cards |
.card-header-pills |
Styles navigation pills inside the card header | Try it | Cards |
.card-img-bottom |
Place the image at the bottom inside a card | Try it | Cards |
.card-img-overlay |
Turns an image into a card background. Often used to add text on top of the image | Try it | Cards |
.card-img-top |
Place the image at the top inside a card | Try it | Cards |
.card-info |
Adds a teal background color to the card. Represents some information | Try it | Cards |
.card-light |
Adds a light grey background color to the card | Try it | Cards |
.card-link |
Adds a blue color to any link and a hover effect inside the card | Try it | Cards |
.card-primary |
Adds a blue background color to the card. Represents something important | Try it | Cards |
.card-secondary |
Adds a grey background color to the card. Represents something "less" important | Try it | Cards |
.card-subtitle |
The .card-subtitle is used after a .card-title, and adds the following to an element: margin-top: -.375rem; margin-bottom: 0; |
Try it | Cards |
.card-success |
Adds a green background color to the card. Indicates success or a positive action | Try it | Cards |
.card-text |
Used to remove bottom margins for a p element if it is the last child (or the only one), inside .card-body |
Try it | Cards |
.card-title |
Adds a title to any heading element inside the card | Try it | Cards |
.card-warning |
Adds a yellow/orange background color to the card. Represents a warning or a negative action | Try it | Cards |
.carousel |
Creates a carousel (slideshow) | Try it | Carousel |
.carousel-caption |
Creates a caption text for each slide in the carousel | Try it | Carousel |
.carousel-control-next |
Container for "next" carousel/item link | Try it | Carousel |
.carousel-control-next-icon |
Used together with .carousel-control-next to create a "next" icon/button (right-pointed arrow) |
Try it | Carousel |
.carousel-control-prev |
Container for "previous" carousel/item link | Try it | Carousel |
.carousel-control-prev-icon |
Used together with .carousel-control-prev to create a "previous" icon/button (left-pointed arrow) |
Try it | Carousel |
.carousel-indicators |
Adds little dots/indicators at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing) | Try it | Carousel |
.carousel-inner |
Container for slide items | Try it | Carousel |
.carousel-item |
Specifies the content of each slide | Try it | Carousel |
.clearfix |
Clears floats | Try it | Utilities |
.close |
Styles a close icon. This is often used for alerts and modals. Often used together with the × symbol to create the actual icon (a better looking "x"). It floats right by default | Try it | Utilities |
.col-auto |
Make form columns automatically size themselves based on their content | Try it | Forms |
.col-* |
Creates a column layout for extra small devices (and up/all devices, if not combined with other column classes). The * can be a number between 1 and 12 |
Try it | Grid System |
.col-sm-* |
Creates a column layout for small devices (and up, if not combined with other column classes). The * can be a number between 1 and 12 |
Try it | Grid System |
.col-md-* |
Creates a column layout for medium devices (and up, if not combined with other column classes). The * can be a number between 1 and 12 |
Try it | Grid System |
.col-lg-* |
Creates a column layout for large devices (and up, if not combined with other column classes). The * can be a number between 1 and 12 |
Try it | Grid System |
.col-xl-* |
Creates a column layout for extra large devices. The * can be a number between 1 and 12 |
Try it | Grid System |
.collapse |
Indicates collapsible content - which can be hidden or shown on demand | Try it | Collapse |
.collapse show |
Show the collapsible content by default | Try it | Collapse |
.container |
Fixed width container with widths determined by screen sites. Equal margin on the left and right. | Try it | Containers |
.container-fluid |
A container that spans the full width of the screen | Try it | Containers |
.container-* |
Responsive containers | Try it | Containers |
.custom-checkbox |
A wrapper/container for custom checkboxes | Try it | Custom Forms |
.custom-control |
A wrapper/container for custom forms | Try it | Custom Forms |
.custom-control-input |
Customized form control | Try it | Custom Forms |
.custom-control-inline |
Inline (horizontally - side by side) customized form controls | Try it | Custom Forms |
.custom-control-label |
Customized label, when used together with a custom form control | Try it | Custom Forms |
.custom-file |
Customized file upload | Try it | Custom Forms |
.custom-file-input |
Customized file upload | Try it | Custom Forms |
.custom-file-label |
Customized file label | Try it | Custom Forms |
.custom-radio |
A wrapper/container for custom radio buttons | Try it | Custom Forms |
.custom-range |
Customized range control | Try it | Custom Forms |
.custom-select |
Customized select menu | Try it | Custom Forms |
.custom-select-lg |
Large customized select menu | Try it | Custom Forms |
.custom-select-sm |
Small customized select menu | Try it | Custom Forms |
.custom-switch |
Customized toggle switch | Try it | Custom Forms |
.disabled |
Disables a button (adds opacity and a "no-parking-sign" icon on hover) | Try it | Buttons |
.disabled |
Disables a dropdown item (adds a grey text color and a "no-parking-sign" icon on hover) | Try it | Dropdowns |
.disabled |
Disables a pagination link (cannot be clicked - adds a grey text color and a "no-parking-sign" icon on hover) | Try it | Pagination |
.disabled |
Disables a list item in a list group (cannot be clicked - adds a light grey color and removes the hover effect on list item links) | Try it | List Groups |
.dropdown |
Creates a toggleable menu that allows the user to choose one value from a predefined list | Try it | Dropdowns |
.dropdown-divider |
Used to separate links in the dropdown menu with a thin horizontal border | Try it | Dropdowns |
.dropdown-header |
Used to add headers inside the dropdown menu | Try it | Dropdowns |
.dropdown-item |
Creates a dropdown item (added to links or buttons inside .dropdown-menu) | Try it | Dropdowns |
.dropdown-item-text |
Used to add plain text to a dropdown item, or used on links for default link styling | Try it | Dropdowns |
.dropdown-menu |
Adds the default styles for the dropdown menu container | Try it | Dropdowns |
.dropdown-menu-right |
Right-aligns a dropdown menu | Try it | Dropdowns |
.dropdown-toggle |
Used on the button that should hide and show (toggle) the dropdown menu | Try it | Dropdowns |
.dropleft |
Left-aligns the dropdown | Try it | Dropdowns |
.dropright |
Right-aligns the dropdown | Try it | Dropdowns |
.dropup |
Indicates a dropup menu (upwards instead of downwards) | Try it | Dropdowns |
.d-block |
Creates a block element (adds display:block) |
Try it | Utilities |
.d-*-block |
Creates a block element on a specific screen width | Try it | Utilities |
.d-inline |
Makes an element inline | Try it | Utilities |
.d-*-inline |
Makes an element inline on a specific screen size | Try it | Utilities |
.d-inline-block |
Makes an element inline block | Try it | Utilities |
.d-*-inline-block |
Makes an element inline block on a specific screen size | Try it | Utilities |
.d-flex |
Creates a flexbox container and transforms direct children into flex items | Try it | Flex |
.d-*-flex |
Creates a flexbox container on a specific screen size | Try it | Flex |
.d-inline-flex |
Creates an inline flexbox container | Try it | Flex |
.d-*-inline-flex |
Creates an inline flexbox container on a specific screen size | Try it | Flex |
.d-none |
Hides an element | Try it | Utilities |
.d-*-none |
Hides an element on a specific screen size | Try it | Utilities |
.d-table |
Makes an element display as a table | Try it | Utilities |
.d-*-table |
Makes an element display as a table on a specific screen size | Try it | Utilities |
.d-table-cell |
Makes an element display as a table cell | Try it | Utilities |
.d-*-table-cell |
Makes an element display as a table cell on a specific screen size | Try it | Utilities |
.d-table-row |
Makes an element display as a table row | Try it | Utilities |
.d-*-table-row |
Makes an element display as a table row on a specific screen size | Try it | Utilities |
.embed-responsive |
Container for embedded content. Makes videos or slideshows scale properly on any device | Try it | Images |
.embed-responsive-16by9 |
Container for embedded content. Creates an 16:9 aspect ratio embedded content | Try it | Images |
.embed-responsive-3by4 |
Container for embedded content. Creates an 3:4 aspect ratio embedded content | Try it | Images |
.embed-responsive-item |
Used inside .embed-responsive. Scales the video nicely to the parent element |
Try it | Images |
.fade |
Adds a fading effect when closing an alert box | Try it | Alerts |
.fade |
Adds a fading effect when showing tab/pill content | Try it | Navs |
.fade |
Adds a fading effect when opening a modal | Try it | Modal |
.fixed-bottom |
Makes an element stay at the bottom of the screen (sticky/fixed) | Try it | Utilities |
.fixed-top |
Makes an element stay at the top of the screen (sticky/fixed) | Try it | Utilities |
.flex-column |
Display flex items vertically | Try it | Flex |
.flex-*-column |
Display flex items vertically on different screen sizes: | Try it | Flex |
.flex-column-reverse |
Display flex items vertically, reversed | Try it | Flex |
.flex-*-column-reverse |
Display flex items vertically, reversed, on different screen sizes | Try it | Flex |
.flex-fill |
Used on flex items to force it/them into equal width columns | Try it | Flex |
.flex-*-fill |
Force flex items into equal widths on different screens | Try it | Flex |
.flex-grow-0|1 |
Used on a single flex item to take up the rest of the available space | Try it | Flex |
.flex-nowrap |
Don't wrap flex items | Try it | Flex |
.flex-*-nowrap |
Don't wrap items on different screens | Try it | Flex |
.flex-shrink-0|1 |
Used on a single flex item to shrink it if necessary | Flex | |
.flex-row |
Display flex items horizontally (side by side) | Try it | Flex |
.flex-*-row |
Display flex items horizontally on a specific screen size | Try it | Flex |
.flex-row-reverse |
Display flex items right-aligned and horizontally | Try it | Flex |
.flex-*-row-reverse |
Display flex items right-aligned and horizontally on a specific screen size | Try it | Flex |
.flex-wrap |
Wrap flex items | Try it | Flex |
.flex-*-wrap |
Wrap items on different screens | Try it | Flex |
.flex-wrap-reverse |
Wrap flex items, in reversed order | Try it | Flex |
.flex-*-wrap-reverse |
Wrap flex items, in reversed order on different screens | Try it | Flex |
.float-left |
Floats an element to the left | Try it | Utilities |
.float-*-left |
Floats an element to the left on different screens | Try it | Utilities |
.float-none |
Remove floats from an element | Try it | Utilities |
.float-right |
Floats an element to the right | Try it | Utilities |
.float-*-right |
Floats an element to the left on different screens | Try it | Utilities |
.font-italic |
Italic text | Try it | Typography |
.font-weight-bold |
Bold text | Try it | Typography |
.font-weight-bolder |
Bolder text (font-weight:bolder) | Try it | Typography |
.font-weight-light |
Light weight text (font-weight:300) | Try it | Typography |
.font-weight-lighter |
Lighter weight text (font-weight:lighter) | Try it | Typography |
.font-weight-normal |
Normal text (font-weight:400) | Try it | Typography |
.form-check |
Container for checkboxes. Adds proper padding | Try it | Forms |
.form-check-inline |
Makes checkboxes appear on the same line (horizontally) | Try it | Forms |
.form-check-input |
Styles checkboxes with proper margins | Try it | Forms |
.form-check-label |
Ensures proper margins for labels used together with checkboxes | Try it | Forms |
.form-control |
Used on input, textarea, and select elements to span the entire width of the page and make them responsive | Try it | Forms |
.form-control-file |
Adds display:block and width:100% to input filed with type="file" |
Try it | Forms |
.form-control-lg |
Large form control | Try it | Forms |
.form-control-plaintext |
Styles a form control as plain text | Try it | Forms |
.form-control-range |
Adds display:block and width:100% to input filed with type="range" |
Try it | Forms |
.form-control-sm |
Small form control | Try it | Forms |
.form-group |
Container for form input and label | Try it | Forms |
.form-inline |
Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide) | Try it | Forms |
.form-row |
Container for responsive columns (less left and right margins than .row/overrides default column gutters) |
Try it | Forms |
.h1 - .h6 |
Makes an element look like a heading of the chosen class (h1-h6) | Try it | Typography |
.h-25 |
Sets the height of an element to 25% | Try it | Utilities |
.h-50 |
Sets the height of an element to 50% | Try it | Utilities |
.h-75 |
Sets the height of an element to 75% | Try it | Utilities |
.h-100 |
Sets the height of an element to 100% | Try it | Utilities |
.img-fluid |
Responsive image (adds max-width:100% and height:auto) | Try it | Images |
.img-thumbnail |
Shapes an image to a thumbnail (thin light grey borders) | Try it | Images |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
Try it | Typography |
.input-group |
Container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text" | Try it | Input Group |
.input-group-append |
Input group container for adding help text behind an input field | Try it | Input Group |
.input-group-lg |
Large input group | Try it | Input Group |
.input-group-prepend |
Input group container for adding help text in front of an input field | Try it | Input Group |
.input-group-sm |
Small input group | Try it | Input Group |
.input-group-text |
Styles the specified help text in an input group | Try it | Input Group |
.input-lg |
Large input field | Try it | Input Sizing |
.input-sm |
Small input field | Try it | Input Sizing |
.invalid-feedback |
Creates a custom validation message used in validated forms (red text color) | Try it | Forms |
.invalid-tooltip |
Creates a custom validation message used in validated forms (red tooltip) | Try it | Forms |
.invisible |
Make an element invisible | Try it | Utilities |
.is-invalid |
Validates a form element (adds a red border to input fields). Note: for server side | Try it | Forms |
.is-valid |
Validates a form element (adds a green border to input fields). Note: for server side | Try it | Forms |
.jumbotron |
Creates a padded grey heading/box with rounded corners that enlarges the font sizes of the text inside it. Used for calling extra attention to some special content or information | Try it | Jumbotron |
.jumbotron-fluid |
Creates a full-width jumbotron (grey padded heading) without rounded borders | Try it | Jumbotron |
.justify-content-* |
Aligns flex items from the start, at the end, centered, in between and "around" | Try it | Flex |
.justify-content-*-around |
Aligns flex items "around" on different screen sizes | Try it | Flex |
.justify-content-*-between |
Aligns flex items in "between" on different screen sizes | Try it | Flex |
.justify-content-*-center |
Aligns flex items in the center on different screen sizes | Try it | Flex |
.justify-content-*-end |
Aligns flex items at the end on different screen sizes | Try it | Flex |
.justify-content-*-start |
Aligns flex items from the start on different screen sizes | Try it | Flex |
.lead |
Increase the font size and line height of a paragraph | Try it | Typography |
.list-group |
Creates a bordered list group for <li> elements |
Try it | List Group |
.list-group-flush |
Removes some borders and rounded corners from list items in a list group | Try it | List Group |
.list-group-horizontal |
Display list items horizontally instead of vertically (side-by-side instead of on top of each other) | Try it | List Group |
.list-group-horizontal-* |
Display list items horizontally instead of vertically on different screen sizes | Try it | List Group |
.list-group-item |
Added to each <li> element in the list group |
Try it | List Group |
.list-group-item-action |
Added to links inside the list group to make them stand out on hover (darker background) | Try it | List Group |
.list-group-item-danger |
Red background color for a list item in a list group | Try it | List Group |
.list-group-item-dark |
Dark grey background color for a list item in a list group | Try it | List Group |
.list-group-item-info |
Light-blue background color for a list item in a list group | Try it | List Group |
.list-group-item-light |
Light grey background color for a list item in a list group | Try it | List Group |
.list-group-item-primary |
Blue background color for a list item in a list group | Try it | List Group |
.list-group-item-success |
Green background color for a list item in a list group | Try it | List Group |
.list-group-item-warning |
Yellow background color for a list item in a list group | Try it | List Group |
.list-inline |
Places all list items on a single line (used together with
.list-inline-item on each <li> elements) |
Try it | Typography |
.list-inline-item |
Places all list items on a single line (used together with
.list-inline on the parent <ul> element) |
Try it | Typography |
.list-unstyled |
Removes all default list-style (bullets, left margin, etc.) styling from a
<ul> or <ol> list |
Try it | Typography |
.mark |
Highlights text: Highlighted text | Try it | Typography |
.media |
Aligns media objects together with content (like images or videos - often used for comments in a blog post etc) | Try it | Media Objects |
.media-body |
Container for media content | Try it | Media Objects |
.modal |
Identifies the content as a modal and brings focus to it | Try it | Modals |
.modal-body |
Defines the style for the body of the modal. Add any HTML markup here (p, img, etc) | Try it | Modals |
.modal-content |
Styles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if needed | Try it | Modals |
.modal-dialog-centered |
Centers the modal vertically and horizontally within the page | Try it | Modals |
.modal-dialog-scrollable |
Adds a scrollbar inside the modal | Try it | Modals |
.modal-footer |
The footer of the modal (often contains an action button and a close button) | Try it | Modals |
.modal-header |
The header of the modal (often contains a title and a close button) | Try it | Modals |
.modal-lg |
Large modal (wider than default) | Try it | Modals |
.modal-sm |
Small modal (less width) | Try it | Modals |
.modal-xl |
Extra large modal | Try it | Modals |
.m-# / m-*-# |
Responsive margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.mt-# / mt-*-# |
Responsive top margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.mb-# / mb-*-# |
Responsive bottom margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.ml-# / ml-*-# |
Responsive left margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.mr-# / mr-*-# |
Responsive right margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.mx-# / mx-*-# |
Responsive left and right margin auto (horizontal) classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.my-# / my-*-# |
Responsive top and bottom margin auto (vertical) classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.mx-auto |
Centers an element horizontally | Try it | Utilities |
.nav nav-tabs |
Creates a tabbed menu | Try it | Tabs |
.nav nav-pills |
Creates a pill menu | Try it | Tabs |
.nav-justified |
Justifies tab/pill links with an equal width | Try it | Tabs |
.navbar |
Creates a navigation bar | Try it | Navbar |
.navbar-nav |
Container for navigation links inside the .navbar container | Try it | Navbar |
.navbar-brand |
Added to a link or a header element inside the navbar to represent a logo or a header | Try it | Navbar |
.navbar-collapse |
Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) | Try it | Navbar |
.navbar-expand-* |
Responsive collapsible class - stacks the navbar vertically on small (sm), medium (md), large (lg) or extra large (xl) screens | Try it | Navbar |
.navbar-dark |
Adds a white text color to all links in the navbar | Try it | Navbar |
.navbar-light |
Adds a black text color to all links in the navbar | Try it | Navbar |
.navbar-text |
Vertically align any elements inside the navbar that are not links (ensures proper padding) | Try it | Navbar |
.navbar-toggler |
Styles the button that should open the navbar on small screens. Automatically styled as a hamburger/three bars | Try it | Navbar |
.nav-link |
Used to style links/anchors inside the navbar | Try it | Navbar |
.nav-item |
Used to style list items inside the navbar | Try it | Navbar |
.needs-validation |
Adds validation styles to a submitted form | Try it | Forms |
.no-gutters |
Remove gutters/extra space from columns | Try it | Grid System |
.page-item |
Styles list items inside a pagination | Try it | Pagination |
.page-link |
Styles links inside a pagination | Try it | Pagination |
.pagination |
Creates a pagination (Useful when you have a web site with lots of pages | Try it | Pagination |
.pagination-lg |
Large pagination (each pagination link gets a bigger font-size and more padding) | Try it | Pagination |
.pagination-sm |
Small pagination (each pagination link gets a smaller font size and less padding) | Try it | Pagination |
.pre-scrollable |
Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar) |
Try it | Helpers |
.progress |
Container for progress bars | Try it | Progress Bars |
.progress-bar |
Creates a progress bar | Try it | Progress Bars |
.progress-bar-animated |
Animates the progress bar (used together with stripes) | Try it | Progress Bars |
.progress-bar-striped |
Adds stripes to the progress bar | Try it | Progress Bars |
.p-# / p-*-# |
Responsive padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.pt-# / pt-*-# |
Responsive top padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.pb-# / pb-*-# |
Responsive bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.pl-# / pl-*-# |
Responsive left padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.pr-# / pr-*-# |
Responsive right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.py-# / py-*-# |
Responsive top and bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.px-# / px-*-# |
Responsive left and right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 | Try it | Utilities |
.rounded |
Adds rounded corners to an element | Try it | Utilities |
.rounded-bottom |
Adds bottom rounded corners to an element | Try it | Utilities |
.rounded-circle |
Shapes an element to a circle (not supported in IE8 and earlier) | Try it | Utilities |
.rounded-left |
Adds left rounded corners of an element | Try it | Utilities |
.rounded-right |
Adds right rounded corners to an element | Try it | Utilities |
.rounded-top |
Adds top rounded corners to an element | Try it | Utilities |
.rounded-0 |
Removes rounded corners from an element | Try it | Utilities |
.row |
Container for responsive columns | Try it | Grid System |
.row-cols-* |
Set the number of columns that should appear next to each other | Try it | Grid System |
.shadow |
Adds a shadow to an element | Try it | Utilities |
.shadow-lg |
Adds a large shadow to an element | Try it | Utilities |
.shadow-none |
Removes shadows from an element | Try it | Utilities |
.shadow-sm |
Adds a small shadow to an element | Try it | Utilities |
.small |
Creates a lighter, secondary text in any heading | Try it | Typography |
.spinner-border |
Creates a spinner/loader | Try it | Spinners |
.spinner-border-sm |
Creates a smaller spinner/loader | Try it | Spinners |
.spinner-grow |
Creates a spinner/loader that "grows" | Try it | Spinners |
.spinner-grow-sm |
Creates a smaller spinner/loader that "grows" | Try it | Spinners |
.sr-only |
Hides an element on all devices except for screen readers | Try it | Utilities |
.sr-only-focusable |
Hides an element on all devices except for screen readers | Try it | Utilities |
.sticky-top |
Makes an element stay sticky/fixed at the top of the page when you scroll past it | Try it | Utilities |
.stretched-link |
Added to a link to make its containing block (parent) clickable (works only for parent elements with position:relative) | Try it | Utilities |
.tab-content |
Used together with .tab-pane to creates toggleable/dynamic tabs/pills |
Try it | Tabs |
.tab-pane |
Used together with .tab-content to creates toggleable/dynamic tabs/pills |
Try it | Tabs |
.table |
Adds basic styling to a table (padding, bottom borders, etc) | Try it | Tables |
.table-active |
Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover) |
Try it | Tables |
.table-bordered |
Adds borders on all sides of the table and cells | Try it | Tables |
.table-borderless |
Remove borders from a table | Try it | Tables |
.table-condensed |
Makes a table more compact by cutting cell padding in half | Try it | Tables |
.table-dark |
Adds a black background with white text to the table | Try it | Tables |
.table-hover |
Creates a hoverable table (adds a grey background color on table rows on hover) | Try it | Tables |
.table-responsive-* |
Makes a table responsive (adds a horizontal scrollbar when needed). By default, the scrollbar is added to the table on screens that are less than 992px wide (if needed). There's no difference when viewing anything lager than 992px wide. However, you can use sm|md|lg|xl to decide WHEN the table should get a scrollbar, depending on the screen width | Try it | Tables |
.table-striped |
Adds zebra-stripes to a table | Try it | Tables |
.text-break |
Prevents long text from breaking layout | Try it | Typography |
.text-capitalize |
Indicates capitalized text | Try it | Typography |
.text-center |
Center-aligns text | Try it | Typography |
.text-*-center |
Center-aligns text on different screens | Try it | Typography |
.text-danger |
Red text color. Indicates danger | Try it | Colors |
.text-dark |
Dark grey text color | Try it | Typography |
.text-decoration-none |
Removes the underline from a link | Try it | Typography |
.text-hide |
Hides text (helps replace an element's text content with a background image) | Try it | Typography |
.text-info |
Light-blue text color. Indicates information | Try it | Colors |
.text-light |
Light grey text color | Try it | Colors |
.text-justify |
Indicates justified text | Try it | Typography |
.text-left |
Aligns the text to the left | Try it | Typography |
.text-*-left |
Left-aligns text on different screens | Try it | Typography |
.text-lowercase |
Changes text to lowercase | Try it | Typography |
.text-muted |
Grey text color | Try it | Colors |
.text-nowrap |
Prevents the text from wrapping | Try it | Typography |
.text-primary |
Blue text color. Indicates something important | Try it | Colors |
.text-secondary |
Grey text color. Indicates something "less" important | Try it | Colors |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | Try it | Typography |
.text-right |
Aligns text to the right | Try it | Typography |
.text-*-right |
Right-aligns text on different screens | Try it | Typography |
.text-success |
Green text color. Indicates success | Try it | Colors |
.text-uppercase |
Makes text uppercase | Try it | Typography |
.text-warning |
Yellow/orange text color. Indicates warning | Try it | Colors |
.text-white |
White text color | Try it | Colors |
.thead-dark |
Adds a black background color to table headers | Try it | Tables |
.thead-light |
Adds a grey background color to table headers | Try it | Tables |
.toast |
Creates a toast (alert box that disappears after a few seconds) | Try it | Toast |
.toast-body |
Toast body | Try it | Toast |
.toast-header |
Toast header | Try it | Toast |
.valid-feedback |
Creates a custom validation message used in validated forms (green text color) | Try it | Forms |
.valid-tooltip |
Creates a custom validation message used in validated forms (green tooltip) | Try it | Forms |
.visible |
Make an element visible | Try it | Utilities |
.was-validated |
Adds validation styles to a form element | Try it | Forms |
.w-25 |
Sets the width of an element to 25% | Try it | Utilities |
.w-50 |
Sets the width of an element to 50% | Try it | Utilities |
.w-75 |
Sets the width of an element to 75% | Try it | Utilities |
.w-100 |
Sets the width of an element to 100% | Try it | Utilities |
The table above shows all available Bootstrap 4 classes.
Tip: To see the full list of all Bootstrap 3 classes, go to our All Bootstrap 3 CSS Classes Reference.
