Tutorials References Exercises VideosMenu
Free WebsiteGet CertifiedPro

Bootstrap 4 Class Reference


Complete List of All Bootstrap 4 Classes

Complete list of all Bootstrap 4 CSS classes with description and examples:

Class DescriptionExampleCategory
.activeAdds a white text color to the active link in a navbar.Try itNavbar
.activeAdds a blue background color to the active list item in a list groupTry itList Groups
.activeAdds a dark-blue background color to simulate a "pressed" buttonTry itButtons
.activeAdds a blue background color to the active dropdown item in a dropdownTry itDropdowns
.activeAdds a blue background color to the active pagination link (to highlight the current page)Try itPagination
.activeDisplays/shows the current carousel itemTry itCarousel
.alertCreates an alert message boxTry itAlerts
.alert-dangerRed alert. Indicates a dangerous or potentially negative actionTry itAlerts
.alert-darkDark alert. Dark grey alert boxTry itAlerts
.alert-dismissibleIndicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding)Try itAlerts
.alert-headingAdds color:inherit to the specified elementTry itAlerts
.alert-infoTeal alert. Indicates a neutral informative change or actionTry itAlerts
.alert-lightLight alert. Light grey alert boxTry itAlerts
.alert-linkUsed on links inside alerts to provide matching colored linksTry itAlerts
.alert-primaryBlue alert. Indicates an important actionTry itAlerts
.alert-secondaryGrey alert. Indicates a "less" important actionTry itAlerts
.alert-successGreen alert. Indicates a successful or positive actionTry itAlerts
.alert-warningYellow alert. Indicates caution should be taken with this actionTry itAlerts
.align-baselineThe element is aligned with the baseline of the parent. This is defaultTry itUtilities
.align-bottomThe element is aligned with the lowest element on the lineTry itUtilities
.align-middle The element is placed in the middle of the parent elementTry itUtilities
.align-topThe element is aligned with the top of the tallest element on the lineTry itUtilities
.align-text-topThe element is aligned with the top of the parent element's fontTry itUtilities
.align-text-bottomThe element is aligned with the bottom of the parent element's fontTry itUtilities
.align-content-aroundAlign gathered items "around"Try itFlex
.align-content-*-aroundAlign gathered items "around" on different screensTry itFlex
.align-content-centerAlign gathered items in the centerTry itFlex
.align-content-*-centerAlign gathered items in the center on different screensTry itFlex
.align-content-endAlign gathered items at the endTry itFlex
.align-content-*-endAlign gathered items at the end on different screensTry itFlex
.align-content-startAlign gathered items from the startTry itFlex
.align-content-*-startAlign gathered items from the start on different screensTry itFlex
.align-content-stretchStretch gathered itemsTry itFlex
.align-content-*-stretchStretch gathered items on different screensTry itFlex
.align-items-startAlign single rows of items from the startTry itFlex
.align-items-*-startAlign single rows of items from the start on different screensTry itFlex
.align-items-endAlign single rows of items at the endTry itFlex
.align-items-*-endAlign single rows of items at the end on different screensTry itFlex
.align-items-centerAlign single rows of items in the centerTry itFlex
.align-items-*-centerAlign single rows of items in the center on different screensTry itFlex
.align-items-baselineAlign single rows of items at the baselineTry itFlex
.align-items-*-baselineAlign single rows of items at the baseline on different screensTry itFlex
.align-items-stretchStretch single rows of itemsTry itFlex
.align-items-*-stretchStretch single rows of items on different screensTry itFlex
.align-self-startAlign a flex item from the startTry itFlex
.align-self-*-startAlign a flex item from the start on different screensTry itFlex
.align-self-endAlign a flex item at the endTry itFlex
.align-self-*-endAlign a flex item at the end on different screensTry itFlex
.align-self-centerAlign a flex item in the centerTry itFlex
.align-self-*-centerAlign a flex item in the center on different screensTry itFlex
.align-self-baselineAlign a flex item at the baselineTry itFlex
.align-self-*-baselineAlign a flex item at the baseline on different screensTry itFlex
.align-self-stretchStretch a flex itemTry itFlex
.align-self-*-stretchStretch a flex item on different screensTry itFlex
.badgeCreates a circular badge (grey circle - often used as a numerical indicator)Try itBadges
.badge-dangerRed badge. Indicates a dangerous or potentially negative actionTry itBadges
.badge-darkDark badge. Dark grey alert boxTry itBadges
.badge-infoTeal badge. Indicates a neutral informative change or actionTry itBadges
.badge-lightLight badge. Light grey alert boxTry itBadges
.badge-pillMakes a badge more roundTry itBadges
.badge-primaryBlue badge. Indicates an important actionTry itBadges
.badge-secondaryGrey badge. Indicates a "less" important actionTry itBadges
.badge-successGreen badge. Indicates a successful or positive actionTry itBadges
.badge-warningYellow badge. Indicates caution should be taken with this actionTry itBadges
.bg-dangerAdds a red background color to an element. Represents danger or a negative actionTry itColors
.bg-darkAdds a dark grey background color to an elementTry itColors
.bg-infoAdds a teal background color to an element. Represents some informationTry itColors
.bg-lightAdds a light grey background color to an elementTry itColors
.bg-primaryAdds a blue background color to an element. Represents something importantTry itColors
.bg-secondaryAdds a grey background color to an element. Indicates a "less" important actionTry itColors
.bg-successAdds a green background color to an element. Indicates success or a positive actionTry itColors
.bg-warningAdds a yellow/orange background color to an element. Represents a warning or a negative actionTry itColors
.blockquoteStyles quoted blocks of content from another source (adds a larger font-size (1.25rem))Try itTypography
.blockquote-footerStyles the source title inside the blockquote (light grey text with indentation)Try itTypography
.borderAdds a border to an elementTry itUtilities
.border-bottom-0Removes the bottom border from an elementTry itUtilities
.border-dangerAdds a red border to an element (indicates danger)Try itUtilities
.border-darkAdds a dark border to an elementTry itUtilities
.border-infoAdds a teal border to an element (indicates information)Try itUtilities
.border-left-0Removes the left border from an elementTry itUtilities
.border-lightAdds a light grey border to an elementTry itUtilities
.border-primaryAdds a blue border to an elementTry itUtilities
.border-right-0Removes the right border from an elementTry itUtilities
.border-top-0Removes the top border from an elementTry itUtilities
.border-secondaryAdds a grey border to an elementTry itUtilities
.border-successAdds a green border to an element (indicates success)Try itUtilities
.border-warningAdds a orange border to an element (indicates warning)Try itUtilities
.border-whiteAdds a white border to an elementTry itUtilities
.border-0Removes all borders from an elementTry itUtilities
.breadcrumbA pagination. Indicates the current page's location within a navigational hierarchyTry itPagination
.breadcrumb-itemStyles list items or links inside the breadcrumbTry itPagination
.btnCreates a basic button (gray background and rounded corners)Try itButtons
.btn-blockCreates a block level button that spans the entire width of the parent elementTry itButtons
.btn-darkDark grey buttonTry itButtons
.btn-dangerRed button. Indicates danger or a negative actionTry itButtons
.btn-groupGroups buttons together on a single lineTry itButton Groups
.btn-group-lgLarge button group (makes all buttons in a button group larger - increased font-size and padding)Try itButton Groups
.btn-group-smSmall button group (makes all buttons in a button group smaller)Try itButton Groups
.btn-group-verticalMakes a button group appear vertically stackedTry itButton Groups
.btn-infoTeal button. Represents a neutral informative change or actionTry itButtons
.btn-lightLight grey buttonTry itButtons
.btn-linkMakes a button look like a link (get button behavior)Try itButtons
.btn-lgLarge buttonTry itButtons
.btn-outline-darkDark grey bordered/outlined buttonTry itButtons
.btn-outline-dangerRed bordered/outlined button. Indicates danger or a negative actionTry itButtons
.btn-outline-infoTeal bordered/outlined button. Represents a neutral informative change or actionTry itButtons
.btn-outline-lightLight grey bordered/outlined buttonTry itButtons
.btn-outline-primaryBlue bordered/outlined button.Try itButtons
.btn-outline-secondaryGrey bordered/outlined button. Indicates a "less" important actionTry itButtons
.btn-outline-successGreen bordered/outlined button. Indicates success or a positive actionTry itButtons
.btn-outline-warningOrange bordered/outlined button. Represents warning or a negative actionTry itButtons
.btn-primaryBlue button. Indicates a something importantTry itButtons
.btn-smSmall buttonTry itButtons
.btn-secondaryGrey button. Indicates a "less" important actionTry itButtons
.btn-successGreen button. Indicates success or a positive actionTry itButtons
.btn-toolbarCombine sets of button groups into button toolbars for more complex componentsTry itButton Groups
.btn-warningOrange button. Represents warning or a negative actionTry itButtons
.cardCreates a cardTry itCards
.card-bodyContainer for card contentTry itCards
.card-columnsContainer to create a masonry-like grid of cardsTry itCards
.card-dangerAdds a red background color to the card. Represents danger or a negative actionTry itCards
.card-darkAdds a grey background color to the cardTry itCards
.card-deckContainer to create a grid of cards that are of equal height and widthTry itCards
.card-footerCard footerTry itCards
.card-groupContainer to create a grid of cards that are of equal height and width, without side marginsTry itCards
.card-headerCard headerTry itCards
.card-header-tabsStyles navigation tabs inside the card headerTry itCards
.card-header-pillsStyles navigation pills inside the card headerTry itCards
.card-img-bottomPlace the image at the bottom inside a cardTry itCards
.card-img-overlayTurns an image into a card background. Often used to add text on top of the imageTry itCards
.card-img-topPlace the image at the top inside a cardTry itCards
.card-infoAdds a teal background color to the card. Represents some informationTry itCards
.card-lightAdds a light grey background color to the cardTry itCards
.card-linkAdds a blue color to any link and a hover effect inside the cardTry itCards
.card-primaryAdds a blue background color to the card. Represents something importantTry itCards
.card-secondaryAdds a grey background color to the card. Represents something "less" importantTry itCards
.card-subtitleThe .card-subtitle is used after a .card-title, and adds the following to an element: margin-top: -.375rem; margin-bottom: 0;Try itCards
.card-successAdds a green background color to the card. Indicates success or a positive actionTry itCards
.card-textUsed to remove bottom margins for a p element if it is the last child (or the only one), inside .card-bodyTry itCards
.card-titleAdds a title to any heading element inside the cardTry itCards
.card-warningAdds a yellow/orange background color to the card. Represents a warning or a negative actionTry itCards
.carouselCreates a carousel (slideshow)Try itCarousel
.carousel-captionCreates a caption text for each slide in the carouselTry itCarousel
.carousel-control-nextContainer for "next" carousel/item linkTry itCarousel
.carousel-control-next-iconUsed together with .carousel-control-next to create a "next" icon/button (right-pointed arrow)Try itCarousel
.carousel-control-prevContainer for "previous" carousel/item linkTry itCarousel
.carousel-control-prev-iconUsed together with .carousel-control-prev to create a "previous" icon/button (left-pointed arrow)Try itCarousel
.carousel-indicatorsAdds 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 itCarousel
.carousel-innerContainer for slide itemsTry itCarousel
.carousel-itemSpecifies the content of each slideTry itCarousel
.clearfixClears floatsTry itUtilities
.closeStyles 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 defaultTry itUtilities
.col-autoMake form columns automatically size themselves based on their contentTry itForms
.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 12Try itGrid 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 12Try itGrid 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 12Try itGrid 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 12Try itGrid System
.col-xl-*Creates a column layout for extra large devices. The * can be a number between 1 and 12Try itGrid System
.collapseIndicates collapsible content - which can be hidden or shown on demandTry itCollapse
.collapse showShow the collapsible content by defaultTry itCollapse
.containerFixed width container with widths determined by screen sites. Equal margin on the left and right.Try itContainers
.container-fluidA container that spans the full width of the screenTry itContainers
.container-*Responsive containersTry itContainers
.custom-checkboxA wrapper/container for custom checkboxesTry itCustom Forms
.custom-controlA wrapper/container for custom formsTry itCustom Forms
.custom-control-inputCustomized form controlTry itCustom Forms
.custom-control-inlineInline (horizontally - side by side) customized form controlsTry itCustom Forms
.custom-control-labelCustomized label, when used together with a custom form controlTry itCustom Forms
.custom-fileCustomized file uploadTry itCustom Forms
.custom-file-inputCustomized file uploadTry itCustom Forms
.custom-file-labelCustomized file labelTry itCustom Forms
.custom-radioA wrapper/container for custom radio buttonsTry itCustom Forms
.custom-rangeCustomized range controlTry itCustom Forms
.custom-selectCustomized select menuTry itCustom Forms
.custom-select-lgLarge customized select menuTry itCustom Forms
.custom-select-smSmall customized select menuTry itCustom Forms
.custom-switchCustomized toggle switchTry itCustom Forms
.disabledDisables a button (adds opacity and a "no-parking-sign" icon on hover)Try itButtons
.disabledDisables a dropdown item (adds a grey text color and a "no-parking-sign" icon on hover)Try itDropdowns
.disabledDisables a pagination link (cannot be clicked - adds a grey text color and a "no-parking-sign" icon on hover)Try itPagination
.disabledDisables 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 itList Groups
.dropdownCreates a toggleable menu that allows the user to choose one value from a predefined listTry itDropdowns
.dropdown-dividerUsed to separate links in the dropdown menu with a thin horizontal borderTry itDropdowns
.dropdown-headerUsed to add headers inside the dropdown menuTry itDropdowns
.dropdown-itemCreates a dropdown item (added to links or buttons inside .dropdown-menu)Try itDropdowns
.dropdown-item-textUsed to add plain text to a dropdown item, or used on links for default link stylingTry itDropdowns
.dropdown-menuAdds the default styles for the dropdown menu containerTry itDropdowns
.dropdown-menu-rightRight-aligns a dropdown menuTry itDropdowns
.dropdown-toggleUsed on the button that should hide and show (toggle) the dropdown menuTry itDropdowns
.dropleftLeft-aligns the dropdownTry itDropdowns
.droprightRight-aligns the dropdownTry itDropdowns
.dropupIndicates a dropup menu (upwards instead of downwards)Try itDropdowns
.d-blockCreates a block element (adds display:block)Try itUtilities
.d-*-blockCreates a block element on a specific screen widthTry itUtilities
.d-inlineMakes an element inlineTry itUtilities
.d-*-inlineMakes an element inline on a specific screen sizeTry itUtilities
.d-inline-blockMakes an element inline blockTry itUtilities
.d-*-inline-blockMakes an element inline block on a specific screen sizeTry itUtilities
.d-flexCreates a flexbox container and transforms direct children into flex itemsTry itFlex
.d-*-flexCreates a flexbox container on a specific screen sizeTry itFlex
.d-inline-flexCreates an inline flexbox containerTry itFlex
.d-*-inline-flexCreates an inline flexbox container on a specific screen sizeTry itFlex
.d-noneHides an elementTry itUtilities
.d-*-noneHides an element on a specific screen sizeTry itUtilities
.d-tableMakes an element display as a tableTry itUtilities
.d-*-tableMakes an element display as a table on a specific screen sizeTry itUtilities
.d-table-cellMakes an element display as a table cellTry itUtilities
.d-*-table-cellMakes an element display as a table cell on a specific screen sizeTry itUtilities
.d-table-rowMakes an element display as a table rowTry itUtilities
.d-*-table-rowMakes an element display as a table row on a specific screen sizeTry itUtilities
.embed-responsiveContainer for embedded content. Makes videos or slideshows scale properly on any deviceTry itImages
.embed-responsive-16by9Container for embedded content. Creates an 16:9 aspect ratio embedded contentTry itImages
.embed-responsive-3by4Container for embedded content. Creates an 3:4 aspect ratio embedded contentTry itImages
.embed-responsive-itemUsed inside .embed-responsive. Scales the video nicely to the parent elementTry itImages
.fadeAdds a fading effect when closing an alert boxTry itAlerts
.fadeAdds a fading effect when showing tab/pill contentTry itNavs
.fadeAdds a fading effect when opening a modalTry itModal
.fixed-bottomMakes an element stay at the bottom of the screen (sticky/fixed)Try itUtilities
.fixed-topMakes an element stay at the top of the screen (sticky/fixed)Try itUtilities
.flex-columnDisplay flex items verticallyTry itFlex
.flex-*-columnDisplay flex items vertically on different screen sizes:Try itFlex
.flex-column-reverseDisplay flex items vertically, reversedTry itFlex
.flex-*-column-reverseDisplay flex items vertically, reversed, on different screen sizesTry itFlex
.flex-fillUsed on flex items to force it/them into equal width columnsTry itFlex
.flex-*-fillForce flex items into equal widths on different screensTry itFlex
.flex-grow-0|1Used on a single flex item to take up the rest of the available spaceTry itFlex
.flex-nowrapDon't wrap flex itemsTry itFlex
.flex-*-nowrapDon't wrap items on different screensTry itFlex
.flex-shrink-0|1Used on a single flex item to shrink it if necessary   Flex
.flex-rowDisplay flex items horizontally (side by side)Try itFlex
.flex-*-rowDisplay flex items horizontally on a specific screen sizeTry itFlex
.flex-row-reverseDisplay flex items right-aligned and horizontallyTry itFlex
.flex-*-row-reverseDisplay flex items right-aligned and horizontally on a specific screen sizeTry itFlex
.flex-wrapWrap flex itemsTry itFlex
.flex-*-wrapWrap items on different screensTry itFlex
.flex-wrap-reverseWrap flex items, in reversed orderTry itFlex
.flex-*-wrap-reverseWrap flex items, in reversed order on different screensTry itFlex
.float-leftFloats an element to the leftTry itUtilities
.float-*-leftFloats an element to the left on different screensTry itUtilities
.float-noneRemove floats from an elementTry itUtilities
.float-rightFloats an element to the rightTry itUtilities
.float-*-rightFloats an element to the left on different screensTry itUtilities
.font-italicItalic textTry itTypography
.font-weight-boldBold textTry itTypography
.font-weight-bolderBolder text (font-weight:bolder)Try itTypography
.font-weight-lightLight weight text (font-weight:300) Try itTypography
.font-weight-lighterLighter weight text (font-weight:lighter) Try itTypography
.font-weight-normalNormal text (font-weight:400)Try itTypography
.form-checkContainer for checkboxes. Adds proper paddingTry itForms
.form-check-inlineMakes checkboxes appear on the same line (horizontally)Try itForms
.form-check-inputStyles checkboxes with proper marginsTry itForms
.form-check-labelEnsures proper margins for labels used together with checkboxesTry itForms
.form-controlUsed on input, textarea, and select elements to span the entire width of the page and make them responsiveTry itForms
.form-control-fileAdds display:block and width:100% to input filed with type="file"Try itForms
.form-control-lgLarge form controlTry itForms
.form-control-plaintextStyles a form control as plain textTry itForms
.form-control-rangeAdds display:block and width:100% to input filed with type="range"Try itForms
.form-control-smSmall form controlTry itForms
.form-groupContainer for form input and labelTry itForms
.form-inlineMakes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide)Try itForms
.form-rowContainer for responsive columns (less left and right margins than .row/overrides default column gutters)Try itForms
.h1 - .h6Makes an element look like a heading of the chosen class (h1-h6)Try itTypography
.h-25Sets the height of an element to 25%Try itUtilities
.h-50Sets the height of an element to 50%Try itUtilities
.h-75Sets the height of an element to 75%Try itUtilities
.h-100Sets the height of an element to 100%Try itUtilities
.img-fluidResponsive image (adds max-width:100% and height:auto)Try itImages
.img-thumbnailShapes an image to a thumbnail (thin light grey borders)Try itImages
.initialismDisplays the text inside an <abbr> element in a slightly smaller font sizeTry itTypography
.input-groupContainer to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text"Try itInput Group
.input-group-appendInput group container for adding help text behind an input fieldTry itInput Group
.input-group-lgLarge input groupTry itInput Group
.input-group-prependInput group container for adding help text in front of an input fieldTry itInput Group
.input-group-smSmall input groupTry itInput Group
.input-group-textStyles the specified help text in an input groupTry itInput Group
.input-lgLarge input fieldTry itInput Sizing
.input-smSmall input fieldTry itInput Sizing
.invalid-feedbackCreates a custom validation message used in validated forms (red text color)Try itForms
.invalid-tooltipCreates a custom validation message used in validated forms (red tooltip)Try itForms
.invisibleMake an element invisibleTry itUtilities
.is-invalidValidates a form element (adds a red border to input fields). Note: for server sideTry itForms
.is-validValidates a form element (adds a green border to input fields). Note: for server sideTry itForms
.jumbotronCreates 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 informationTry itJumbotron
.jumbotron-fluidCreates a full-width jumbotron (grey padded heading) without rounded bordersTry itJumbotron
.justify-content-*Aligns flex items from the start, at the end, centered, in between and "around"Try itFlex
.justify-content-*-aroundAligns flex items "around" on different screen sizesTry itFlex
.justify-content-*-betweenAligns flex items in "between" on different screen sizesTry itFlex
.justify-content-*-centerAligns flex items in the center on different screen sizesTry itFlex
.justify-content-*-endAligns flex items at the end on different screen sizesTry itFlex
.justify-content-*-startAligns flex items from the start on different screen sizesTry itFlex
.leadIncrease the font size and line height of a paragraphTry itTypography
.list-groupCreates a bordered list group for <li> elementsTry itList Group
.list-group-flushRemoves some borders and rounded corners from list items in a list groupTry itList Group
.list-group-horizontalDisplay list items horizontally instead of vertically (side-by-side instead of on top of each other)Try itList Group
.list-group-horizontal-*Display list items horizontally instead of vertically on different screen sizesTry itList Group
.list-group-itemAdded to each <li> element in the list groupTry itList Group
.list-group-item-actionAdded to links inside the list group to make them stand out on hover (darker background)Try itList Group
.list-group-item-dangerRed background color for a list item in a list groupTry itList Group
.list-group-item-darkDark grey background color for a list item in a list groupTry itList Group
.list-group-item-infoLight-blue background color for a list item in a list groupTry itList Group
.list-group-item-lightLight grey background color for a list item in a list groupTry itList Group
.list-group-item-primaryBlue background color for a list item in a list groupTry itList Group
.list-group-item-successGreen background color for a list item in a list groupTry itList Group
.list-group-item-warningYellow background color for a list item in a list groupTry itList Group
.list-inlinePlaces all list items on a single line (used together with .list-inline-item on each <li> elements)Try itTypography
.list-inline-itemPlaces all list items on a single line (used together with .list-inline on the parent <ul> element)Try itTypography
.list-unstyledRemoves all default list-style (bullets, left margin, etc.) styling from a <ul> or <ol> listTry itTypography
.markHighlights text: Highlighted textTry itTypography
.mediaAligns media objects together with content (like images or videos - often used for comments in a blog post etc)Try itMedia Objects
.media-bodyContainer for media contentTry itMedia Objects
.modalIdentifies the content as a modal and brings focus to itTry itModals
.modal-bodyDefines the style for the body of the modal. Add any HTML markup here (p, img, etc)Try itModals
.modal-contentStyles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if neededTry itModals
.modal-dialog-centeredCenters the modal vertically and horizontally within the pageTry itModals
.modal-dialog-scrollableAdds a scrollbar inside the modalTry itModals
.modal-footerThe footer of the modal (often contains an action button and a close button)Try itModals
.modal-headerThe header of the modal (often contains a title and a close button)Try itModals
.modal-lgLarge modal (wider than default)Try itModals
.modal-smSmall modal (less width)Try itModals
.modal-xlExtra large modalTry itModals
.m-# / m-*-#Responsive margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.mt-# / mt-*-#Responsive top margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.mb-# / mb-*-#Responsive bottom margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.ml-# / ml-*-#Responsive left margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.mr-# / mr-*-#Responsive right margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.mx-# / mx-*-#Responsive left and right margin auto (horizontal) classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.my-# / my-*-#Responsive top and bottom margin auto (vertical) classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.mx-autoCenters an element horizontallyTry itUtilities
.nav nav-tabsCreates a tabbed menuTry itTabs
.nav nav-pillsCreates a pill menuTry itTabs
.nav-justifiedJustifies tab/pill links with an equal widthTry itTabs
.navbarCreates a navigation barTry itNavbar
.navbar-navContainer for navigation links inside the .navbar containerTry itNavbar
.navbar-brandAdded to a link or a header element inside the navbar to represent a logo or a headerTry itNavbar
.navbar-collapseCollapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets)Try itNavbar
.navbar-expand-*Responsive collapsible class - stacks the navbar vertically on small (sm), medium (md), large (lg) or extra large (xl) screensTry itNavbar
.navbar-darkAdds a white text color to all links in the navbarTry itNavbar
.navbar-lightAdds a black text color to all links in the navbarTry itNavbar
.navbar-textVertically align any elements inside the navbar that are not links (ensures proper padding)Try itNavbar
.navbar-togglerStyles the button that should open the navbar on small screens. Automatically styled as a hamburger/three barsTry itNavbar
.nav-linkUsed to style links/anchors inside the navbarTry itNavbar
.nav-itemUsed to style list items inside the navbarTry itNavbar
.needs-validationAdds validation styles to a submitted formTry itForms
.no-guttersRemove gutters/extra space from columnsTry itGrid System
.page-itemStyles list items inside a paginationTry itPagination
.page-linkStyles links inside a paginationTry itPagination
.paginationCreates a pagination (Useful when you have a web site with lots of pagesTry itPagination
.pagination-lgLarge pagination (each pagination link gets a bigger font-size and more padding)Try itPagination
.pagination-smSmall pagination (each pagination link gets a smaller font size and less padding)Try itPagination
.pre-scrollableMakes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar)Try itHelpers
.progressContainer for progress barsTry itProgress Bars
.progress-barCreates a progress barTry itProgress Bars
.progress-bar-animatedAnimates the progress bar (used together with stripes)Try itProgress Bars
.progress-bar-stripedAdds stripes to the progress barTry itProgress Bars
.p-# / p-*-#Responsive padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.pt-# / pt-*-#Responsive top padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.pb-# / pb-*-#Responsive bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.pl-# / pl-*-#Responsive left padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.pr-# / pr-*-#Responsive right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.py-# / py-*-#Responsive top and bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.px-# / px-*-#Responsive left and right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5Try itUtilities
.roundedAdds rounded corners to an elementTry itUtilities
.rounded-bottomAdds bottom rounded corners to an elementTry itUtilities
.rounded-circleShapes an element to a circle (not supported in IE8 and earlier)Try itUtilities
.rounded-leftAdds left rounded corners of an elementTry itUtilities
.rounded-rightAdds right rounded corners to an elementTry itUtilities
.rounded-topAdds top rounded corners to an elementTry itUtilities
.rounded-0Removes rounded corners from an elementTry itUtilities
.rowContainer for responsive columnsTry itGrid System
.row-cols-*Set the number of columns that should appear next to each otherTry itGrid System
.shadowAdds a shadow to an elementTry itUtilities
.shadow-lgAdds a large shadow to an elementTry itUtilities
.shadow-noneRemoves shadows from an elementTry itUtilities
.shadow-smAdds a small shadow to an elementTry itUtilities
.smallCreates a lighter, secondary text in any headingTry itTypography
.spinner-borderCreates a spinner/loaderTry itSpinners
.spinner-border-smCreates a smaller spinner/loaderTry itSpinners
.spinner-growCreates a spinner/loader that "grows"Try itSpinners
.spinner-grow-smCreates a smaller spinner/loader that "grows"Try itSpinners
.sr-onlyHides an element on all devices except for screen readersTry itUtilities
.sr-only-focusableHides an element on all devices except for screen readersTry itUtilities
.sticky-topMakes an element stay sticky/fixed at the top of the page when you scroll past itTry itUtilities
.stretched-linkAdded to a link to make its containing block (parent) clickable (works only for parent elements with position:relative)Try itUtilities
.tab-contentUsed together with .tab-pane to creates toggleable/dynamic tabs/pillsTry itTabs
.tab-paneUsed together with .tab-content to creates toggleable/dynamic tabs/pillsTry itTabs
.tableAdds basic styling to a table (padding, bottom borders, etc)Try itTables
.table-activeAdds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover)Try itTables
.table-borderedAdds borders on all sides of the table and cellsTry itTables
.table-borderlessRemove borders from a tableTry itTables
.table-condensedMakes a table more compact by cutting cell padding in halfTry itTables
.table-darkAdds a black background with white text to the tableTry itTables
.table-hoverCreates a hoverable table (adds a grey background color on table rows on hover)Try itTables
.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 widthTry itTables
.table-stripedAdds zebra-stripes to a tableTry itTables
.text-breakPrevents long text from breaking layoutTry itTypography
.text-capitalizeIndicates capitalized textTry itTypography
.text-centerCenter-aligns textTry itTypography
.text-*-centerCenter-aligns text on different screensTry itTypography
.text-dangerRed text color. Indicates dangerTry itColors
.text-darkDark grey text colorTry itTypography
.text-decoration-noneRemoves the underline from a linkTry itTypography
.text-hideHides text (helps replace an element's text content with a background image)Try itTypography
.text-infoLight-blue text color. Indicates informationTry itColors
.text-lightLight grey text colorTry itColors
.text-justifyIndicates justified textTry itTypography
.text-leftAligns the text to the leftTry itTypography
.text-*-leftLeft-aligns text on different screensTry itTypography
.text-lowercaseChanges text to lowercaseTry itTypography
.text-mutedGrey text colorTry itColors
.text-nowrapPrevents the text from wrappingTry itTypography
.text-primaryBlue text color. Indicates something importantTry itColors
.text-secondaryGrey text color. Indicates something "less" importantTry itColors
.text-resetResets the color of a text or a link (inherits the color from its parent)Try itTypography
.text-rightAligns text to the rightTry itTypography
.text-*-rightRight-aligns text on different screensTry itTypography
.text-successGreen text color. Indicates successTry itColors
.text-uppercaseMakes text uppercaseTry itTypography
.text-warningYellow/orange text color. Indicates warningTry itColors
.text-whiteWhite text colorTry itColors
.thead-darkAdds a black background color to table headersTry itTables
.thead-lightAdds a grey background color to table headersTry itTables
.toastCreates a toast (alert box that disappears after a few seconds)Try itToast
.toast-bodyToast bodyTry itToast
.toast-headerToast headerTry itToast
.valid-feedbackCreates a custom validation message used in validated forms (green text color)Try itForms
.valid-tooltipCreates a custom validation message used in validated forms (green tooltip)Try itForms
.visibleMake an element visibleTry itUtilities
.was-validatedAdds validation styles to a form elementTry itForms
.w-25Sets the width of an element to 25%Try itUtilities
.w-50Sets the width of an element to 50%Try itUtilities
.w-75Sets the width of an element to 75%Try itUtilities
.w-100Sets the width of an element to 100%Try itUtilities

The table above shows all available Bootstrap 4 classes.

Tip: To see the full list of all Bootstrap 3 classes, go to our All Bootstrap 3 CSS Classes Reference.