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