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 paginationlink (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 .closeclass, 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-lg	Adds a large border to 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-sm	Adds a small 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-*	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
.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-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-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
.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
.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
.shadow	Adds a shadow to an element	Try it	Utilities
.shadow-lg	Adds a large shadow to an element	Try it	Utilities
.shadow-md	Adds a medium 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

Credit: www.w3schools.com