Bootstrap 3 All Classes List Reference Guide

Complete list of all Bootstrap classes with description, examples, and links to documentation. Looking for a Bootstrap 4 Cheat Sheet?

Click each column header to sort alphabetically.

Class Name Preview Description Category
.affix Bootstrap classes list with description The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The sub navigation on the right is a live demo of the affix plugin. Affix
.alert bootstrap alert Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Alerts
.alert-danger bootstrap alert danger Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as red background color. Alerts
.alert-dismissible bootstrap alert dismissable Similar to a well it is a box with a border and padding. This class and a child element with a .close class lets the user close the alert. Alerts
.alert-info bootstrap alert Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as blue background color. Alerts
.alert-link bootstrap alert link When you add links inside alert this class matches the font color to the parent alert class. Alerts
.alert-success bootstrap alert success Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as green background color. Alerts
.alert-warning bootstrap alert warning Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as yellow background color. Alerts
.active bootstrap active Tables contextual class to change row color Tables
.arrow bootstrap arrow popover option - .arrow will become the popover's arrow. Popover
.dl-horizontal bootstrap horizontal definition list Makes terms and definitions line up with a center gutter Lists
.badge bootstrap badges Used to show new or unread messages or items like the iOS red icon showing new messages or email. Badges
.bg-danger bootstrap bg-danger Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-info bootstrap bg-info Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-primary bootstrap bg-primary Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-success bootstrap bg-success Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-warning bootstrap bg-warning Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.breadcrumb bootstrap breadcrumbs Indicate the current page's location within a navigational hierarchy. Breadcrumbs
.btn bootstrap btn This class sets the spacing and size of the button. Buttons
.btn-block bootstrap btn block By default buttons are inline this class makes it block to span the full width of its parent. Buttons
.btn-danger bootstrap btn danger Defaults to a red background button Buttons
.btn-default bootstrap btn default Defaults to a white background button with dark border. Buttons
.btn-group bootstrap btn group Smushes multiple buttons together to make a pill shape. Each button is separated by a vertical line. Button groups
.btn-group-justified bootstrap btn group justified Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group. Button groups
.btn-group-vertical bootstrap btn group vertical Make a set of buttons appear vertically stacked rather than horizontally. Button groups
.btn-info bootstrap btn info Button for information on a topic like terms and conditions. Default is light blue. Buttons
.btn-link bootstrap btn link Keeps the spacing set with the .btn class but removes the outer border. Buttons
.btn-lg bootstrap btn lg Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons
.btn-primary bootstrap btn primary Use for the primary action in a set. Buttons
.btn-sm bootstrap btn sm Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons
.btn-success bootstrap btn success Defaults to a green background button with dark border. Buttons
.btn-toolbar bootstrap btn toolbar Used to create a row of buttons similar pagination row Button groups
.btn-warning bootstrap btn warning Defaults to a yellow background button with dark border. Buttons
.btn-xs bootstrap btn xs Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons
.caption bootstrap caption thumbnail caption but could be used elsewhere Thumbnails
.caret bootstrap btn caret Used in dropdown menus to show open and closed states Dropdowns
.carousel bootstrap carousel parent carousel class making it position relative Carousel
.carousel-caption bootstrap carousel caption Caption for each slide item Carousel
.carousel-control bootstrap control Added to each next and previous anchors Carousel
.carousel-indicators bootstrap carousel indicators parent classed added to an ordered list for the little circles showing what slide you are on Carousel
.carousel-inner bootstrap carousel inner The div wrapper that contains the carousel slide items Carousel
.center-block bootstrap center block add width and height to center a block level element Helper Classes
.checkbox bootstrap checkbox form checkbox wrapper - Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. Forms
.checkbox-inline bootstrap checkbox inline Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. Forms
.clearfix   Used to clear floats by adding .cleafix to the parent element. It adds a pseudo element with clear:both property. Helper Classes
.close bootstrap btn close Use the generic close icon for dismissing content like modals and alerts. Helper Classes
.col-*-* bootstrap col span 1-12 column. Extra small devices Phones ( < 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column device Column numeric values can be 1-12. Grid system
.col-*-offset-* bootstrap col offset Move columns to the right using .col-lg-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-lg-offset-4 moves .col-lg-4 over four columns. Offset numeric values can be 0-12 Grid system
.col-*-pull-* bootstrap pull Easily change the order of our built-in grid columns with .col-*-push-* and .col-*-pull-* modifier classes. Pull numeric values can be 0-12. Grid system
.col-*-push-* bootstrap push Easily change the order of our built-in grid columns with .col-*-push-* and .col-*-pull-* modifier classes. Push numeric values can be 0-12. Grid system
.collapse bootstrap collapse hides content on hide and show component Collapse
.collapsing bootstrap collapsing applied during transitions on hide and show component Collapse
.container bootstrap container Fixed width container with widths determined by screen sites. Equal margin on the left and right. Grid system
.container-fluid bootstrap container fluid Spans the full width of the screen Grid system
.control-label bootstrap control label In forms this classes is added to form labels to allow the label to be used for form validation Forms
.danger bootstrap danger Tables contextual class to change row color Tables
.divider bootstrap divider Used to separate links in dropdown menus a Dropdowns
.dropdown bootstrap dropdown This class gives you the ability to add a dropdown to navbar, tabs, and pills so you can display a dropdown of additional navigation. Dropdowns
.dropdown-backdrop Bootstrap classes list with description On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile. Dropdown
.dropdown-header bootstrap dropdown header Used to add headers inside the dropdown menu Dropdown
.dropdown-menu bootstrap dropdown menu Adds the default styles for the dropdown menu container Dropdown
.dropdown-toggle bootstrap dropdown toggle This class is added to the button that will have the toggle action applied that will hide and show the dropdown menu Dropdown
.dropup bootstrap dropdown toggle Add this class to change the orientation of the dropdown menu to pop up instead of down Dropdown
.embed-responsive bootstrap responsive embed The default responsive iframe embed styles Responsive embed
.embed-responsive-16by9 bootstrap responsive embed Div wrapper class to make child iframe responsive Responsive embed
.embed-responsive-4by3 bootstrap responsive embed Div wrapper class to make child iframe responsive Responsive embed
.fade bootstrap fade To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them. Alert
.form-control bootstrap form control Class added input, textarea, and select to make them 100% and responsive Forms
.form-control-feedback bootstrap form control feedback A form validation class Forms
.form-control-static bootstrap form control static Lets you add plain text to the right of a label. For example, Email label could have help text Forms
.form-group bootstrap form group A div wrapper class that goes around a form input and label Forms
.glyphicon bootstrap glyphicon Base icon font styling for icon font Glyphicons
.glyphicon-chevron-left bootstrap chevron left Class to add chevron icon to the right Glyphicons
.glyphicon-chevron-right bootstrap chevron right Class to add chevron icon to the right Glyphicons
.h1 - .h6 bootstrap h1-h6 Apply heading styles to other elements. Make a paragraph look like an h1 Typography
.has-feedback bootstrap has feedback You can also add optional feedback icons with the addition of .has-feedback and the right icon. Forms
.help-block bootstrap help-block A block of help text that breaks onto a new line and may extend beyond one line. Forms
.hidden bootstrap hidden hides an element everywhere Helper Classes
.hidden-* bootstrap hidden visible Use a single or combination of the available classes for toggling content across viewport breakpoints. Can us lg, md, sm. xs Responsive Utilities
.hidden-print bootstrap hidden print Similar to the regular responsive classes, use these for toggling content for print. Responsive Utilities
.hide bootstrap hidden this class is the same as hidden but is deprecated so use .hidden instead Helper Classes
.icon-bar bootstrap icon bar Used in the navbar to make the cheeseburger mobile menu Navbar
.icon-next bootstrap next Glyphicon icons not necessary - The .glyphicon .glyphicon-chevron-left and .glyphicon .glyphicon-chevron-right classes are not necessarily needed for the controls. Bootstrap provides .icon-prev and .icon-next as plain unicode alternatives. Carousel
.icon-prev bootstrap next Glyphicon icons not necessary - The .glyphicon .glyphicon-chevron-left and .glyphicon .glyphicon-chevron-right classes are not necessarily needed for the controls. Bootstrap provides .icon-prev and .icon-next as plain unicode alternatives. Carousel
.img-circle bootstrap image circle Crops an image to be a circle Images
.img-rounded bootstrap image rounded Adds rounded corners to an image Images
.img-thumbnail bootstrap image thumbnail Adds rounded corners and an inset border to an image Images
.in bootstrap in To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to make the initial content visible. Tab
.info bootstrap info Tables contextual class to change row color" target="_blank" rel="nofollow" href="http://getbootstrap.com/css/#tables-contextual-classes Tables
.initialism bootstrap innitialism Add .initialism to an abbreviation for a slightly smaller font-size. Typography
.input-group bootstrap input group Wrapper class used to enhance an input and label group by adding a button in front or behind as help text Input groups
.input-group-addon bootstrap input group addon The class added to an icon or help text in an form .input-group Input groups
.input-group-btn bootstrap input group btn Attaches a button next to a text input. Would work for a search bar or email optin form. Input groups
.input-lg bootstrap Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*. Forms
.input-sm bootstrap Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*. Forms
.invisible bootstrap Make something invisible Helper Classes
.item bootstrap Class added to each carousel item Carousel
.jumbotron bootstrap jumbotron A content section that is used to showcase important content. Commonly used on home pages and category pages. Jumbotron
.label bootstrap alert Applies default styling to labels "New" Labels
.label-* bootstrap labels Change color of the label by adding one of the following: default, warning, info, danger, primary Labels
.lead bootstrap Increase the font size and line height of a paragraph. Good to use on the first paragraph of an article to improve readability. Typography
.left bootstrap Used to identify the left carousel control Carousel
.list-group bootstrap list group Wrapper ul class that contains li with borders List group
.list-group-item bootstrap list group item Class added to each li in a list-group List group
.list-group-item-heading bootstrap list group heading Class added to an anchor or p for a .list-group-item heading List group
.list-group-item-text bootstrap list group text Class added to an anchor or p for a .list-group-item text under a heading List group
.list-group-item-* bootstrap list group color Change color of list group item by adding one of the following: default, warning, info, danger, primary List group
.list-inline bootstrap list inline Overrides a lists default style to be inline and block Typography
.list-unstyled bootstrap list unstyled Removes all bullet styling from a ul or ol list Typography
.mark bootstrap For highlighting a run of text due to its relevance in another context, use the mark tag. Typography
.media bootstrap media list Media components are image heading and description text items. Blog comments, portfolio projects, album covers, etc. Media object
.media-body bootstrap media body The class added for the media description copy block Media object
.media-heading bootstrap media heading The class applied to a heading in a media component Media object
.media-list bootstrap media object Nested media lists would be good used as comments Media object
.media-object bootstrap Class added to a media component image Media object
.modal bootstrap The parent wrapper class of modal content Modal
.modal-backdrop Bootstrap classes list with description Added by the modal javascript to make the area around the modal clickable to hide the modal Modal
.modal-body bootstrap The modal body content class : Header - Body - Footer Modal
.modal-content bootstrap modal-content contains modal-body, modal-header, and modal-footer Modal
.modal-dialog bootstrap dialog The secondary wrapper class of the entire modal content Modal
.modal-footer bootstrap The footer of the modal that contains action buttons or help text Modal
.modal-header bootstrap The header section of the modal that contains the title and close button Modal
.modal-lg bootstrap modal large Makes a modal wider Modal
.modal-open Bootstrap classes list with description Javascript adds this class to the body tag to prevent scrolling with the modal is open Modal
.modal-sm bootstrap modal small Makes the modal not as wide Modal
.modal-title bootstrap The title of the modal Modal
.nav bootstrap nav nav base class added all types of navigation: tabs, pills, justified, disabled links Navs
.nav-justified bootstrap Makes a tab navigation equal width and span the full width of its parent container Navs
.nav-tabs bootstrap tabs Class added to enable Bootstrap tabs Tab
.navbar bootstrap navbar Navigation header class Navbar
.navbar-brand bootstrap navbar brand Most navbars contain a logo or brand. This class is added to the anchor Navbar
.navbar-btn bootstrap navbar buttons Vertically aligns a button inside a navbar Navbar
.navbar-collapse bootstrap The content inside the navbar that will be hidden with the mobile nav toggle is enabled Navbar
.navbar-default bootstrap The default navbar configuration styles Navbar
.navbar-fixed-bottom bootstrap navbar fixed footer Fixes the footer to the bottom of the window Navbar
.navbar-fixed-top bootstrap navbar static top Affixes the navbar to the top of the window Navbar
.navbar-form bootstrap navbar form Wrap form elements with this class so that they are vertically center Navbar
.navbar-header bootstrap This class contains the brand image or text and the mobile toggle icons Navbar
.navbar-inverse bootstrap Modify the look of the navbar by inverting the colors Navbar
.navbar-left bootstrap left Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. Navbar
.navbar-link bootstrap navbar link Use the .navbar-link class to add the proper colors for the default and inverse navbar options. Navbar
.navbar-nav bootstrap navbar nav The wrapper class of the navigation elements excluding the brand Navbar
.navbar-right bootstrap right Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. Navbar
.navbar-static-top bootstrap static top Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content. Navbar
.navbar-text bootstrap navbar text Wrap strings of text in an element with .navbar-text, usually on atag for proper leading and color. Navbar
.navbar-toggle bootstrap The class the wraps the mobile toggle icon (cheeseburger icon) Navbar
.next bootstrap Used in the carousel control to identity the next control Carousel
.page-header bootstrap page header Used as a container for a page title and horizontal border for separation from the body content of a page Page header
.pager bootstrap pager class added to a ul which contains li's with anchors. Good for previous and next buttons Pagination
.pagination bootstrap pagination The wrapper class that contains all of the page navigation Pagination
.panel bootstrap panel By default, all the .panel does is apply some basic border and padding to contain some content. Panels
.panel-body bootstrap panel Class added to the panel body because there is also a panel heading Panels
.panel-* bootstrap panel colors Change the color of the panel by adding the following: default, primary, info, warning, danger Panels
.panel-footer bootstrap panel footer Class added to a panel footer Panels
.panel-group bootstrap panel group Used to group many panels together. This removes the bottom margin below each panel Panels
.panel-heading bootstrap panel heading Class added to a panel heading area Panels
.panel-title bootstrap panel title Inside a .panel-heading you can add a .panel-title to adjust the styling of the text Panels
.popover bootstrap A popover is similar to a tooltip but activated on click Popover
.popover-content bootstrap A popover is similar to a tooltip but activated on click Popover
.popover-title bootstrap A popover is similar to a tooltip but activated on click Popover
.pre-scrollable bootstrap You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar. Code
.prev bootstrap used in the carousel component for previous link Carousel
.progress bootstrap progress bar The parent class wrapper of a progress bar Progress bars
.progress-bar bootstrap progress bar The class applied to the progress bar graphic that moves Progress bars
.progress-bar-danger bootstrap progress danger Changes color of progress bar to danger color Progress bars
.progress-bar-info bootstrap progress info Changes color of progress bar to info color Progress bars
.progress-bar-striped bootstrap progress bar striped Changes progress to a striped version Progress bars
.progress-bar-success bootstrap progress bar success Changes color of progress bar to success color Progress bars
.progress-bar-warning bootstrap progress bar warning Changes color of progress bar to warning color Progress bars
.pull-left bootstrap Float element to the left Helper Classes
.pull-right bootstrap Float element to the right Helper Classes
.right bootstrap Used in the carousel Carousel
.row bootstrap row used a parent wrapper of any vertical columns Grid system
.row-no-gutters Remove the padding or gutters from a row and it's columns Grid system
.show bootstrap show show hidden element Helper Classes
.small bootstrap small Create lighter, secondary text in any heading with a generic tag or the .small class. Typography
.sr-only Bootstrap classes list with description Hide an element to all devices except screen readers with .sr-only. Helper Classes
.success bootstrap success Tables contextual class to change row color Tables
.tab-pane bootstrap tab-pane Class added to the div that will act as a tab content area Tab
.table bootstrap table Adding this class to a HTML table applies the Bootstrap styles Tables
.table-condensed bootstrap table condensed Removes some padding from the table cells Tables
.table-bordered bootstrap Adds borders to a table and its cells Tables
.table-responsive bootstrap Makes a table responsive by cropping a wide table and makes it scrollable horizontally Tables
.table-striped table-striped Zebra stripes the odd table rows. All odd rows are given a background color of #f9f9f9. Tables
.text-capitalize bootstrap text transform Capitalize the text or title case Typography
.text-center bootstrap text alignment Aligns the text to the center Typography
.text-danger bootstrap text danger Changes text color to danger variable color Typography
.text-hide Bootstrap classes list with description hides the text - useful for replacing text with a background image Typography
.text-info bootstrap text info Changes text color to info variable color Typography
.text-justify bootstrap text alignment Full justifys the text Typography
.text-left bootstrap text alignment Aligns the text to the left Typography
.text-lowercase bootstrap text transform Changes text to lowercase Typography
.text-muted bootstrap text muted Changes text color to gray Typography
.text-nowrap bootstrap text alignment Prevents the text from wrapping Typography
.text-primary bootstrap text primary Changes text color to your primary color Typography
.text-right bootstrap text alignment Applies text-align:right Typography
.text-success bootstrap text success Changes text color to green or your "success" variable color Typography
.text-uppercase bootstrap text transform Makes text uppercase Typography
.text-warning bootstrap text warning Changes a text color to your default "warning" color Typography
.thumbnail bootstrap thumbnail display grids of images, videos, text, and more. Thumbnails
.tooltip bootstrap This class is used by the tooltip javascript as the wrapper of the toolitp Tooltip
.tooltip-arrow bootstrap This is the arrow pointer on tooltips that can be positioned Tooltip
.tooltip-inner bootstrap The wrapper class of tooltip text. This is generated by the Bootstrap javascript
Some tooltip text!
 Tooltip
.top bootstrap Used on popovers and tooltips to show position of arrow Tooltip
.visible-*-* bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints. Responsive Utilities
.visible-print-block bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints. Responsive Utilities
.visible-print-inline bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints. Responsive Utilities
.visible-print-inline-block bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints. Responsive Utilities
.warning bootstrap Tables contextual class to change row color Tables
.well bootstrap well Wells are good for insetting some content. The default styling adds a border box and inner padding. Wells
.well-lg bootstrap well large Wells are good for insetting some content. The default styling adds a border box and inner padding. This class doubles the padding. Wells
.well-sm bootstrap well small Wells are good for insetting some content. The default styling adds a border box and inner padding. This class decreases the padding. Wells

Bootstrap List

Sources: https://gist.github.com/geksilla/6543145

What is Bootstrap?

Bootstrap is a free, open-source collection of tools (HTML, CSS, and JavaScript) that provides pre-built styles and components for designing and developing responsive websites. It's particularly popular among both beginners and experienced developers due to its simplicity, speed, and flexibility.

©2024 Bootstrap Creative LLC - Created and maintained by Jake Lett