Tutorials References Exercises VideosMenu
Free WebsiteGet CertifiedPro

Bootstrap Classes Reference


Complete List of All Bootstrap Classes

Complete list of all Bootstrap classes with description and examples:

Class DescriptionExampleCategory
.activeAdds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover)Try itTables
.activeAdds a gray background color to the active link in a default navbar. Adds a black background and a white color to the current link inside an inverted navbar.Try itNavbar
.activeAdds a blue background color to the active list item in a list groupTry itList Groups
.activeAdds a blue background color to simulate a "pressed" buttonTry itButtons
.activeAnimates a striped progress barTry itProgress Bars
.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
.affixThe Affix plugin allows an element to become affixed (locked/sticky) to an area on the page. It toggles position:fixed on and offTry itAffix
.alertCreates an alert message boxTry itAlerts
.alert-dangerRed alert box. Indicates a dangerous or potentially negative actionTry itAlerts
.alert-dismissibleTogether with the .close class, this class is used to close the alertTry itAlerts
.alert-infoLight-blue alert box. Indicates some informationTry itAlerts
.alert-linkUsed on links inside alerts to add matching colored linksTry itAlerts
.alert-successGreen alert box. Indicates a successful or positive actionTry itAlerts
.alert-warningYellow alert box. Indicates caution should be taken with this actionTry itAlerts
.badgeCreates a circular badge (grey circle - often used as a numerical indicator)Try itBadges
.bg-dangerAdds a red background color to an element. Represents danger or a negative actionTry itHelpers
.bg-infoAdds a light-blue background color to an element. Represents some informationTry itHelpers
.bg-primaryAdds a blue background color to an element. Represents something importantTry itHelpers
.bg-successAdds a green background color to an element. Indicates success or a positive actionTry itHelpers
.bg-warningAdds a yellow background color to an element. Represents a warning or a negative actionTry itHelpers
.breadcrumbA pagination. Indicates the current page's location within a navigational hierarchyTry 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-dangerRed button. Indicates danger or a negative actionTry itButtons
.btn-defaultDefault button. White background and grey borderTry itButtons
.btn-groupGroups buttons together on a single lineTry itButton Groups
.btn-group-justifiedMakes a group of buttons span the entire width of the screenTry 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-xsExtra small button group (makes all buttons in a button group extra small)Try itButton Groups
.btn-group-verticalMakes a button group appear vertically stackedTry itButton Groups
.btn-infoLight-blue button. Represents informationTry itButtons
.btn-linkMakes a button look like a link (get button behavior)Try itButtons
.btn-lgLarge buttonTry itButtons
.btn-primaryBlue button.Try itButtons
.btn-smSmall buttonTry itButtons
.btn-successGreen button. Indicates success or a positive actionTry itButtons
.btn-warningYellow button. Represents warning or a negative actionTry itButtons
.btn-xsExtra small buttonTry itButtons
.captionAdds a caption text inside a .thumbnailTry itImages
.caretCreates a caret arrow icon , which indicates that the button is a dropdownTry itDropdowns
.carouselCreates a carousel (slideshow)Try itCarousel
.carousel-captionCreates a caption text for each slide in the carouselTry itCarousel
.carousel-controlContainer for next and previous linksTry 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
.center-blockCenters any element (Sets an element to display:block with margin-right:auto and margin-left:auto)Try itHelpers
.checkboxContainer for checkboxesTry itInputs
.checkbox-inlineMakes multiple checkboxes appear on the same lineTry itInputs
.clearfixClears floatsTry itHelpers
.closeIndicates a close iconTry itHelpers
.col-*-*Responsive grid (span 1-12 column). Extra small devices Phones (< 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column values can be 1-12.Try itGrid
.col-*-offset-*Move columns to the right. These classes increase the left margin of a column by * columnsTry itGrid
.col-*-pull-*Changes the order of the grid columnsTry itGrid
.col-*-push-*Changes the order of the grid columnsTry itGrid
.collapseIndicates collapsible content - which can be hidden or shown on demandTry itCollapse
.collapse inShow 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
.control-labelAllows a label to be used for form validationTry itForms
.dangerAdds a red background to the table row (<tr> or table cell (<td>). Indicates a dangerous or potentially negative actionTry itTables
.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 grey background color and a "no-parking-sign" icon on hover)Try itList Groups
.dividerUsed to separate links in the dropdown menu with a thin horizontal borderTry itDropdowns
.dl-horizontalLines up the terms <dt> and descriptions <dd> in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-sideTry itTypography
.dropdownCreates a toggleable menu that allows the user to choose one value from a predefined listTry itDropdowns
.dropdown-headerUsed to add headers inside the dropdown menuTry 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
.dropupIndicates a dropup menu (upwards instead of downwards)Try itDropdowns
.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-4by3Container for embedded content. Creates an 4:3 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
.form-controlUsed on input, textarea, and select elements to span the entire width of the page and make them responsiveTry itForms
.form-control-feedbackForm validation classTry itInputs 2
.form-control-staticAdds plain text next to a form label within a horizontal formTry itInputs 2
.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-horizontalAligns labels and groups of form controls in a horizontal layoutTry itForms
.glyphiconCreates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings setTry itGlyphicons
.has-dangerAdds a red color to the label and a red border to the input, as well as an error icon inside the input (used together with .has-feedback)Try itForms
.has-feedbackAdds feedback icons for inputs (checkmark, warning and error signs)Try itForms
.has-successAdds a green color to the label and a green border to the input, as well as a checkmark icon inside the input (used together with .has-feedback)Try itForms
.has-warningAdds a yellow/orange color to the label and a yellow/orange border to the input, as well as a checkmark icon inside the input (used together with .has-feedback)Try itForms
.help-blockA block of help text that breaks onto a new line and may extend beyond one line.Try itInput Sizing
.hiddenForces an element to be hidden (display:none)Try itHelpers
.hidden-*Hides content depending on screen sizeTry itHelpers
.hideDeprecated. Use .hidden insteadTry itHelpers
.h1 - .h6Makes an element look like a heading of the chosen class (h1-h6)Try itTypography
.icon-barUsed in the navbar to create a hamburger menu (three horizontal bars)Try itNavbar
.icon-nextUnicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphiconTry itCarousel
.icon-prevUnicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphiconTry itCarousel
.img-circleShapes an image to a circle (not supported in IE8 and earlier)Try itImages
.img-responsiveMakes an image responsiveTry itImages
.img-roundedAdds rounded corners to an imageTry itImages
.img-thumbnailShapes an image to a thumbnail (borders)Try itImages
.inFades in tabsTry itTabs
.infoAdds a light-blue background to the table row (<tr> or table cell (<td>). Indicates a neutral informative change or actionTry itTables
.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 it as a "help text"Try itInputs
.input-group-lgLarge input groupTry itInputs
.input-group-smSmall input groupTry itInputs
.input-group-addonTogether with the .input-group class, this class makes it possible to add an icon or help text next to the input fieldTry itInputs
.input-group-btnTogether with the .input-group class, this class attaches a button next to an input. Often used as a search barTry itInputs
.input-lgLarge input fieldTry itInput Sizing
.input-smSmall input fieldTry itInput Sizing
.invisibleMakes an element invisible (visibility:hidden). Note: Even though the element is invisible, it will take up space on the pageTry itHelpers
.itemClass added to each carousel item. May be text or imagesTry itCarousel
.jumbotronCreates a padded grey box with rounded corners that enlarges the font sizes of the text inside it. Creates a big box for calling extra attention to some special content or informationTry itJumbotron
.labelAdds a grey rounded box to an element. Provides additional information about something (e.g. "New")Try itLabels
.label-dangerRed labelTry itLabels
.label-infoLight-blue labelTry itLabels
.label-successGreen labelTry itLabels
.label-warningYellow labelTry itLabels
.leadIncrease the font size and line height of a paragraphTry itTypography
.leftUsed to identify the left carousel controlTry itCarousel
.list-groupCreates a bordered list group for <li> elementsTry itList Group
.list-group-itemAdded to each <li> element in the list groupTry itList Group
.list-group-item-headingCreates a list group heading (used on other elements besides <li>)Try itList Group
.list-group-item-textUsed for item text inside the list group (used on other elements besides <li>)Try itList Group
.list-group-item-dangerRed 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-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 (horizontal menu)Try itTabs
.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 (like images or videos - often used for comments in a blog post etc)Try itMedia Objects
.media-bodyText that should appear next to a media objectTry itMedia Objects
.media-headingCreates a heading inside the media objectTry itMedia Objects
.media-listNested media listsTry itMedia Objects
.media-objectIndicates a media object (image or video)Try 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-dialogSets the proper width and margin of 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-openUsed on the <body> element to prevent page scrolling (overflow:hidden)Try itModals
.modal-smSmall modal (less width)Try itModals
.modal-titleThe title of the modalTry itModals
.nav nav-tabsIndicates a tabbed menuTry itTabs
.nav nav-pillsIndicates a pill menuTry itTabs
.nav .navbar-navUsed on a <ul> container that contains the list items with links inside a navigation barTry itNavbar
.nav-justifiedCenters tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered)Try itTabs
.nav-stackedVertically stack tabs or pillsTry itTabs
.nav-tabsCreates a tabbed menuTry itTabs
.navbarCreates a navigation barTry itNavbar
.navbar-brandAdded to a link or a header element inside the navbar to represent a logo or a headerTry itNavbar
.navbar-btnVertically aligns a button inside a navbarTry itNavbar
.navbar-collapseCollapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets)Try itNavbar
.navbar-defaultCreates a default navigation bar (light-grey background color)Try itNavbar
.navbar-fixed-bottomMakes the navbar stay at the bottom of the screen (sticky/fixed)Try itNavbar
.navbar-fixed-topMakes the navbar stay at the top of the screen (sticky/fixed)Try itNavbar
.navbar-formAdded to form elements inside the navbar to vertically center them (proper padding)Try itNavbar
.navbar-headerAdded to a container element that contains the link/element that represent a logo or a headerTry itNavbar
.navbar-inverseCreates a black navigation bar (instead of light-grey)Try itNavbar
.navbar-leftAligns nav links, forms, buttons, or text, in the navbar to the leftTry itNavbar
.navbar-linkStyles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect - white color in an inversed navbar and a black color in a default navbar)Try itNavbar
.navbar-navUsed on a <ul> container that contains the list items with links inside a navigation barTry itNavbar
.navbar-rightAligns nav links, forms, buttons, or text in the navbar to the right.Try itNavbar
.navbar-static-topRemoves left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default)Try itNavbar
.navbar-textVertical align any elements inside the navbar that are not links (ensures proper padding)Try itNavbar
.navbar-toggleStyles the button that should open the navbar on small screens. Often used together with three .icon-bar classes to indicate a toggleable menu icon (hamburger/bars)Try itNavbar
.nextUsed in the carousel control to identity the next controlTry itCarousel
.nextUsed to align pager buttons to the right side of the page (next button)Try itPager
.page-headerAdds a horizontal line under the heading (+ adds some extra space around the element)Try itPage Header
.pagerCreates previous/next buttons (used on <ul> elements)Try itPager
.paginationCreates a pagination (Useful when you have a web site with lots of pages. Used on <ul> elements)Try itPagination
.pagination-lgLarge pagination (each pagination link gets a font-size of 18px. Default is 14px)Try itPagination
.pagination-smSmall pagination (each pagination link gets a font-size of 12px. Default is 14px)Try itPagination
.panelCreates a bordered box with some padding around its contentTry itPanels
.panel-bodyContainer for content inside the panelTry itPanels
.panel-collapseCollapsible panel (toggle between hiding and showing panel(s))Try itCollapse
.panel-dangerRed panel. Indicates dangerTry itPanels
.panel-infoLight-blue panel. Indicates informationTry itPanels
.panel-successGreen panel. Indicates successTry itPanels
.panel-warningYellow panel. Indicates warningTry itPanels
.panel-footerCreates a panel footer (light background color)Try itPanels
.panel-group Used to group many panels together. This removes the bottom margin below each panelTry itPanels
.panel-headingCreates a panel header (light background color)Try itPanels
.panel-titleUsed inside a .panel-heading to adjust the styling of the text (removes margins and adds a font-size of 16px)Try itPanels
.popoverPopup-box that appears when the user clicks on an elementTry itPopover
.pre-scrollableMakes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar)Try itHelpers
.prevUsed in carousels to indicate a "previous" linkTry itCarousel
.previousUsed to align pager buttons to the left side of the page (previous button)Try itPager
.progressContainer for progress barsTry itProgress Bars
.progress-barCreates a progress barTry itProgress Bars
.progress-bar-dangerRed progress bar. Indicates dangerTry itProgress Bars
.progress-bar-infoLight-blue progress bar. Indicates informationTry itProgress Bars
.progress-bar-stripedCreates a striped progress barTry itProgress Bars
.progress-bar-successGreen progress bar. Indicates successTry itProgress Bars
.progress-bar-warningYellow progress bar. Indicates warningTry itProgress Bars
.pull-leftFloat an element to the leftTry itHelpers
.pull-rightFloat an element to the rightTry itHelpers
.rightUsed to identify the right carousel controlTry itCarousel
.rowContainer for responsive columnsTry itGrid
.row-no-guttersRemoves the gutters from a row and its columnsTry itGrid
.showShows an element (display:block)Try itHelpers
.smallCreates a lighter, secondary text in any headingTry itTypography
.sr-onlyHides an element on all devices except for screen readersTry itHelpers
.sr-only-focusableHides an element on all devices except for screen readersTry itHelpers
.successAdds a green background color to a table row (<tr> or table cell (<td>). Indicates success or a positive actionTry itTables
.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-borderedAdds borders on all sides of the table and cellsTry itTables
.table-condensedMakes a table more compact by cutting cell padding in halfTry itTables
.table-hoverCreates a hoverable table (adds a grey background color on table rows on hover)Try itTables
.table-responsiveMakes a table responsive (adds a horizontal scrollbar when needed)Try itTables
.text-capitalizeIndicates capitalized textTry itTypography
.text-centerCenter-aligns textTry itTypography
.text-dangerRed text color. Indicates dangerTry itTypography
.text-hideHides text (helps replace an element's text content with a background image)Try itTypography
.text-infoLight-blue text color. Indicates informationTry itTypography
.text-justifyIndicates justified textTry itTypography
.text-leftAligns the text to the leftTry itTypography
.text-lowercaseChanges text to lowercaseTry itTypography
.text-mutedGrey text colorTry itTypography
.text-nowrapPrevents the text from wrappingTry itTypography
.text-primaryBlue text colorTry itTypography
.text-rightAligns text to the rightTry itTypography
.text-successGreen text color. Indicates successTry itTypography
.text-uppercaseMakes text uppercaseTry itTypography
.text-warningYellow/orange text color. Indicates warningTry itTypography
.thumbnailAdds a border around an element (often images or videos) to make it look like a thumbnailTry itImages
.tooltipPopup-box that appears when the user moves the mouse pointer over an elementTry itTooltip
.visible-*Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use .hidden-* insteadTry itHelpers
.visible-print-blockDisplays the element (display:block) in print (pre)view   Helpers
.visible-print-inlineDisplays the element (display:inline) in print (pre)view   Helpers
.visible-print-inline-blockDisplays the element (display:inline-block) in print (pre)view   Helpers
.hidden-printHides the element (display:none) in print (pre)view   Helpers
.warningAdds a yellow background color to the table row (<tr> or table cell (<td>). Indicates a warningTry itTables
.wellAdds a rounded border around an element with a gray background color and some paddingTry itWells
.well-lgLarge well (more padding)Try itWells
.well-smSmall well (less padding)Try itWells

The table above shows all available Bootstrap 3 classes.

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