Bootstrap 4 CSS Class List

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