Tutorials References Exercises Videos Menu
Free Website Get Certified Pro
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JAVA JQUERY C C++ C# R React

Bootstrap 4 Class Reference

❮ Previous Next ❯

Complete List of All Bootstrap 4 Classes

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

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

The table above shows all available Bootstrap 4 classes.

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


❮ Previous Next ❯