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 | 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 | Similar to a well it is a box with a border and padding. The .alert class adds the padding and margin. | Alerts | |
.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 | 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 | 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 | When you add links inside alert this class matches the font color to the parent alert class. | Alerts | |
.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 | 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 | Tables contextual class to change row color | Tables | |
.arrow | popover option - .arrow will become the popover's arrow. | Popover | |
.dl-horizontal | Makes terms and definitions line up with a center gutter | Lists | |
.badge | Used to show new or unread messages or items like the iOS red icon showing new messages or email. | Badges | |
.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 | 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 | 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 | 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 | 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 | Indicate the current page's location within a navigational hierarchy. | Breadcrumbs | |
.btn | This class sets the spacing and size of the button. | Buttons | |
.btn-block | By default buttons are inline this class makes it block to span the full width of its parent. | Buttons | |
.btn-danger | Defaults to a red background button | Buttons | |
.btn-default | Defaults to a white background button with dark border. | Buttons | |
.btn-group | Smushes multiple buttons together to make a pill shape. Each button is separated by a vertical line. | Button groups | |
.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 | Make a set of buttons appear vertically stacked rather than horizontally. | Button groups | |
.btn-info | Button for information on a topic like terms and conditions. Default is light blue. | Buttons | |
.btn-link | Keeps the spacing set with the .btn class but removes the outer border. | Buttons | |
.btn-lg | Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. | Buttons | |
.btn-primary | Use for the primary action in a set. | Buttons | |
.btn-sm | Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. | Buttons | |
.btn-success | Defaults to a green background button with dark border. | Buttons | |
.btn-toolbar | Used to create a row of buttons similar pagination row | Button groups | |
.btn-warning | Defaults to a yellow background button with dark border. | Buttons | |
.btn-xs | Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. | Buttons | |
.caption | thumbnail caption but could be used elsewhere | Thumbnails | |
.caret | Used in dropdown menus to show open and closed states | Dropdowns | |
.carousel | parent carousel class making it position relative | Carousel | |
.carousel-caption | Caption for each slide item | Carousel | |
.carousel-control | Added to each next and previous anchors | Carousel | |
.carousel-indicators | parent classed added to an ordered list for the little circles showing what slide you are on | Carousel | |
.carousel-inner | The div wrapper that contains the carousel slide items | Carousel | |
.center-block | add width and height to center a block level element | Helper Classes | |
.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 | 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 | Use the generic close icon for dismissing content like modals and alerts. | Helper Classes | |
.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-* | 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-* | 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-* | 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 | hides content on hide and show component | Collapse | |
.collapsing | applied during transitions on hide and show component | Collapse | |
.container | Fixed width container with widths determined by screen sites. Equal margin on the left and right. | Grid system | |
.container-fluid | Spans the full width of the screen | Grid system | |
.control-label | In forms this classes is added to form labels to allow the label to be used for form validation | Forms | |
.danger | Tables contextual class to change row color | Tables | |
.divider | Used to separate links in dropdown menus a | Dropdowns | |
.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 | 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 | Used to add headers inside the dropdown menu | Dropdown | |
.dropdown-menu | Adds the default styles for the dropdown menu container | Dropdown | |
.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 | Add this class to change the orientation of the dropdown menu to pop up instead of down | Dropdown | |
.embed-responsive | The default responsive iframe embed styles | Responsive embed | |
.embed-responsive-16by9 | Div wrapper class to make child iframe responsive | Responsive embed | |
.embed-responsive-4by3 | Div wrapper class to make child iframe responsive | Responsive embed | |
.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 | Class added input, textarea, and select to make them 100% and responsive | Forms | |
.form-control-feedback | A form validation class | Forms | |
.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 | A div wrapper class that goes around a form input and label | Forms | |
.glyphicon | Base icon font styling for icon font | Glyphicons | |
.glyphicon-chevron-left | Class to add chevron icon to the right | Glyphicons | |
.glyphicon-chevron-right | Class to add chevron icon to the right | Glyphicons | |
.h1 - .h6 | Apply heading styles to other elements. Make a paragraph look like an h1 | Typography | |
.has-feedback | You can also add optional feedback icons with the addition of .has-feedback and the right icon. | Forms | |
.help-block | A block of help text that breaks onto a new line and may extend beyond one line. | Forms | |
.hidden | hides an element everywhere | Helper Classes | |
.hidden-* | 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 | Similar to the regular responsive classes, use these for toggling content for print. | Responsive Utilities | |
.hide | this class is the same as hidden but is deprecated so use .hidden instead | Helper Classes | |
.icon-bar | Used in the navbar to make the cheeseburger mobile menu | Navbar | |
.icon-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 | 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 | Crops an image to be a circle | Images | |
.img-rounded | Adds rounded corners to an image | Images | |
.img-thumbnail | Adds rounded corners and an inset border to an image | Images | |
.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 | Tables contextual class to change row color" target="_blank" rel="nofollow" href="http://getbootstrap.com/css/#tables-contextual-classes | Tables | |
.initialism | Add .initialism to an abbreviation for a slightly smaller font-size. | Typography | |
.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 | The class added to an icon or help text in an form .input-group | Input groups | |
.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 | Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*. | Forms | |
.input-sm | Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*. | Forms | |
.invisible | Make something invisible | Helper Classes | |
.item | Class added to each carousel item | Carousel | |
.jumbotron | A content section that is used to showcase important content. Commonly used on home pages and category pages. | Jumbotron | |
.label | Applies default styling to labels "New" | Labels | |
.label-* | Change color of the label by adding one of the following: default, warning, info, danger, primary | Labels | |
.lead | 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 | Used to identify the left carousel control | Carousel | |
.list-group | Wrapper ul class that contains li with borders | List group | |
.list-group-item | Class added to each li in a list-group | List group | |
.list-group-item-heading | Class added to an anchor or p for a .list-group-item heading | List group | |
.list-group-item-text | Class added to an anchor or p for a .list-group-item text under a heading | List group | |
.list-group-item-* | Change color of list group item by adding one of the following: default, warning, info, danger, primary | List group | |
.list-inline | Overrides a lists default style to be inline and block | Typography | |
.list-unstyled | Removes all bullet styling from a ul or ol list | Typography | |
.mark | For highlighting a run of text due to its relevance in another context, use the mark tag. | Typography | |
.media | Media components are image heading and description text items. Blog comments, portfolio projects, album covers, etc. | Media object | |
.media-body | The class added for the media description copy block | Media object | |
.media-heading | The class applied to a heading in a media component | Media object | |
.media-list | Nested media lists would be good used as comments | Media object | |
.media-object | Class added to a media component image | Media object | |
.modal | The parent wrapper class of modal content | Modal | |
.modal-backdrop | Added by the modal javascript to make the area around the modal clickable to hide the modal | Modal | |
.modal-body | The modal body content class : Header - Body - Footer | Modal | |
.modal-content | modal-content contains modal-body, modal-header, and modal-footer | Modal | |
.modal-dialog | The secondary wrapper class of the entire modal content | Modal | |
.modal-footer | The footer of the modal that contains action buttons or help text | Modal | |
.modal-header | The header section of the modal that contains the title and close button | Modal | |
.modal-lg | Makes a modal wider | Modal | |
.modal-open | Javascript adds this class to the body tag to prevent scrolling with the modal is open | Modal | |
.modal-sm | Makes the modal not as wide | Modal | |
.modal-title | The title of the modal | Modal | |
.nav | nav base class added all types of navigation: tabs, pills, justified, disabled links | Navs | |
.nav-justified | Makes a tab navigation equal width and span the full width of its parent container | Navs | |
.nav-tabs | Class added to enable Bootstrap tabs | Tab | |
.navbar | Navigation header class | Navbar | |
.navbar-brand | Most navbars contain a logo or brand. This class is added to the anchor | Navbar | |
.navbar-btn | Vertically aligns a button inside a navbar | Navbar | |
.navbar-collapse | The content inside the navbar that will be hidden with the mobile nav toggle is enabled | Navbar | |
.navbar-default | The default navbar configuration styles | Navbar | |
.navbar-fixed-bottom | Fixes the footer to the bottom of the window | Navbar | |
.navbar-fixed-top | Affixes the navbar to the top of the window | Navbar | |
.navbar-form | Wrap form elements with this class so that they are vertically center | Navbar | |
.navbar-header | This class contains the brand image or text and the mobile toggle icons | Navbar | |
.navbar-inverse | Modify the look of the navbar by inverting the colors | Navbar | |
.navbar-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 | Use the .navbar-link class to add the proper colors for the default and inverse navbar options. | Navbar | |
.navbar-nav | The wrapper class of the navigation elements excluding the brand | Navbar | |
.navbar-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 | 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 | Wrap strings of text in an element with .navbar-text, usually on atag for proper leading and color. | Navbar | |
.navbar-toggle | The class the wraps the mobile toggle icon (cheeseburger icon) | Navbar | |
.next | Used in the carousel control to identity the next control | Carousel | |
.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 | class added to a ul which contains li's with anchors. Good for previous and next buttons | Pagination | |
.pagination | The wrapper class that contains all of the page navigation | Pagination | |
.panel | By default, all the .panel does is apply some basic border and padding to contain some content. | Panels | |
.panel-body | Class added to the panel body because there is also a panel heading | Panels | |
.panel-* | Change the color of the panel by adding the following: default, primary, info, warning, danger | Panels | |
.panel-footer | Class added to a panel footer | Panels | |
.panel-group | Used to group many panels together. This removes the bottom margin below each panel | Panels | |
.panel-heading | Class added to a panel heading area | Panels | |
.panel-title | Inside a .panel-heading you can add a .panel-title to adjust the styling of the text | Panels | |
.popover | A popover is similar to a tooltip but activated on click | Popover | |
.popover-content | A popover is similar to a tooltip but activated on click | Popover | |
.popover-title | A popover is similar to a tooltip but activated on click | Popover | |
.pre-scrollable | You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar. | Code | |
.prev | used in the carousel component for previous link | Carousel | |
.progress | The parent class wrapper of a progress bar | Progress bars | |
.progress-bar | The class applied to the progress bar graphic that moves | Progress bars | |
.progress-bar-danger | Changes color of progress bar to danger color | Progress bars | |
.progress-bar-info | Changes color of progress bar to info color | Progress bars | |
.progress-bar-striped | Changes progress to a striped version | Progress bars | |
.progress-bar-success | Changes color of progress bar to success color | Progress bars | |
.progress-bar-warning | Changes color of progress bar to warning color | Progress bars | |
.pull-left | Float element to the left | Helper Classes | |
.pull-right | Float element to the right | Helper Classes | |
.right | Used in the carousel | Carousel | |
.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 | show hidden element | Helper Classes | |
.small | Create lighter, secondary text in any heading with a generic tag or the .small class. | Typography | |
.sr-only | Hide an element to all devices except screen readers with .sr-only. | Helper Classes | |
.success | Tables contextual class to change row color | Tables | |
.tab-pane | Class added to the div that will act as a tab content area | Tab | |
.table | Adding this class to a HTML table applies the Bootstrap styles | Tables | |
.table-condensed | Removes some padding from the table cells | Tables | |
.table-bordered | Adds borders to a table and its cells | Tables | |
.table-responsive | Makes a table responsive by cropping a wide table and makes it scrollable horizontally | Tables | |
.table-striped | Zebra stripes the odd table rows. All odd rows are given a background color of #f9f9f9. | Tables | |
.text-capitalize | Capitalize the text or title case | Typography | |
.text-center | Aligns the text to the center | Typography | |
.text-danger | Changes text color to danger variable color | Typography | |
.text-hide | hides the text - useful for replacing text with a background image | Typography | |
.text-info | Changes text color to info variable color | Typography | |
.text-justify | Full justifys the text | Typography | |
.text-left | Aligns the text to the left | Typography | |
.text-lowercase | Changes text to lowercase | Typography | |
.text-muted | Changes text color to gray | Typography | |
.text-nowrap | Prevents the text from wrapping | Typography | |
.text-primary | Changes text color to your primary color | Typography | |
.text-right | Applies text-align:right | Typography | |
.text-success | Changes text color to green or your "success" variable color | Typography | |
.text-uppercase | Makes text uppercase | Typography | |
.text-warning | Changes a text color to your default "warning" color | Typography | |
.thumbnail | display grids of images, videos, text, and more. | Thumbnails | |
.tooltip | This class is used by the tooltip javascript as the wrapper of the toolitp | Tooltip | |
.tooltip-arrow | This is the arrow pointer on tooltips that can be positioned | Tooltip | |
.tooltip-inner | The wrapper class of tooltip text. This is generated by the Bootstrap javascript
Some tooltip text!
|
Tooltip | |
.top | Used on popovers and tooltips to show position of arrow | Tooltip | |
.visible-*-* | Use a single or combination of the available classes for toggling content across viewport breakpoints. | Responsive Utilities | |
.visible-print-block | Use a single or combination of the available classes for toggling content across viewport breakpoints. | Responsive Utilities | |
.visible-print-inline | Use a single or combination of the available classes for toggling content across viewport breakpoints. | Responsive Utilities | |
.visible-print-inline-block | Use a single or combination of the available classes for toggling content across viewport breakpoints. | Responsive Utilities | |
.warning | Tables contextual class to change row color | Tables | |
.well | Wells are good for insetting some content. The default styling adds a border box and inner padding. | Wells | |
.well-lg | 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 | 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
- Bootstrap Unordered List
- Bootstrap Ordered List
- Bootstrap Unstyled List
- Bootstrap Inline List
- Bootstrap Description List
- Bootstrap Horizontal Description List