HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Complete list of all Bootstrap classes with description and examples
Complete list of all Bootstrap classes with description and examples:
Class | Description | Example | Category |
---|
.active |
Adds a grey background color to the table row (<tr> or table cell (<td> ) (same color used on hover) |
Try it | Tables |
.active |
Adds 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 it | Navbar |
.active |
Adds a blue background color to the active list item in a list group | Try it | List Groups |
.active |
Adds a blue background color to simulate a "pressed" button | Try it | Buttons |
.active |
Animates a striped progress bar | Try it | Progress Bars |
.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 |
.affix |
The Affix plugin allows an element to become affixed (locked/sticky) to an area on the page. It toggles position:fixed on and off |
Try it | Affix |
.alert |
Creates an alert message box | Try it | Alerts |
.alert-danger |
Red alert box. Indicates a dangerous or potentially negative action | Try it | Alerts |
.alert-dismissible |
Together with the .close class, this class is used to
close the alert |
Try it | Alerts |
.alert-info |
Light-blue alert box. Indicates some information | Try it | Alerts |
.alert-link |
Used on links inside alerts to add matching colored links | Try it | Alerts |
.alert-success |
Green alert box. Indicates a successful or positive action | Try it | Alerts |
.alert-warning |
Yellow alert box. Indicates caution should be taken with this action | Try it | Alerts |
.badge |
Creates a circular badge (grey circle - often used as a numerical indicator) | Try it | Badges |
.bg-danger |
Adds a red background color to an element. Represents danger or a negative action | Try it | Helpers |
.bg-info |
Adds a light-blue background color to an element. Represents some information | Try it | Helpers |
.bg-primary |
Adds a blue background color to an element. Represents something important | Try it | Helpers |
.bg-success |
Adds a green background color to an element. Indicates success or a positive action | Try it | Helpers |
.bg-warning |
Adds a yellow background color to an element. Represents a warning or a negative action | Try it | Helpers |
.breadcrumb |
A pagination. Indicates the current page's location within a navigational hierarchy | 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-danger |
Red button. Indicates danger or a negative action | Try it | Buttons |
.btn-default |
Default button. White background and grey border | Try it | Buttons |
.btn-group |
Groups buttons together on a single line | Try it | Button Groups |
.btn-group-justified |
Makes a group of buttons span the entire width of the screen | 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-xs |
Extra small button group (makes all buttons in a button group extra small) | Try it | Button Groups |
.btn-group-vertical |
Makes a button group appear vertically stacked | Try it | Button Groups |
.btn-info |
Light-blue button. Represents information | 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-primary |
Blue button. | Try it | Buttons |
.btn-sm |
Small button | Try it | Buttons |
.btn-success |
Green button. Indicates success or a positive action | Try it | Buttons |
.btn-warning |
Yellow button. Represents warning or a negative action | Try it | Buttons |
.btn-xs |
Extra small button | Try it | Buttons |
.caption |
Adds a caption text inside a .thumbnail |
Try it | Images |
.caret |
Creates a caret arrow icon , which indicates that the button is a dropdown | Try it | Dropdowns |
.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 |
Container for next and previous links | 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 |
.center-block |
Centers any element (Sets an element to display:block with margin-right:auto and margin-left:auto ) |
Try it | Helpers |
.checkbox |
Container for checkboxes | Try it | Inputs |
.checkbox-inline |
Makes multiple checkboxes appear on the same line | Try it | Inputs |
.clearfix |
Clears floats | Try it | Helpers |
.close |
Indicates a close icon | Try it | Helpers |
.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 it | Grid |
.col-*-offset-* |
Move columns to the right. These classes increase the left margin of a column by * columns | Try it | Grid |
.col-*-pull-* |
Changes the order of the grid columns | Try it | Grid |
.col-*-push-* |
Changes the order of the grid columns | Try it | Grid |
.collapse |
Indicates collapsible content - which can be hidden or shown on demand | Try it | Collapse |
.collapse in |
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 |
.control-label |
Allows a label to be used for form validation | Try it | Forms |
.danger |
Adds a red background to the table row (<tr> or table cell (<td> ). Indicates a dangerous or potentially negative action |
Try it | Tables |
.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 grey background color and a "no-parking-sign" icon on hover) | Try it | List Groups |
.divider |
Used to separate links in the dropdown menu with a thin horizontal border | Try it | Dropdowns |
.dl-horizontal |
Lines 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-side |
Try it | Typography |
.dropdown |
Creates a toggleable menu that allows the user to choose one value from a predefined list | Try it | Dropdowns |
.dropdown-header |
Used to add headers inside the dropdown menu | 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 |
.dropup |
Indicates a dropup menu (upwards instead of downwards) | Try it | Dropdowns |
.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-4by3 |
Container for embedded content. Creates an 4:3 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 |
.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-feedback |
Form validation class | Try it | Inputs 2 |
.form-control-static |
Adds plain text next to a form label within a horizontal form | Try it | Inputs 2 |
.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-horizontal |
Aligns labels and groups of form controls in a horizontal layout | Try it | Forms |
.glyphicon |
Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set | Try it | Glyphicons |
.has-danger |
Adds 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 it | Forms |
.has-feedback |
Adds feedback icons for inputs (checkmark, warning and error signs) | Try it | Forms |
.has-success |
Adds 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 it | Forms |
.has-warning |
Adds 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 it | Forms |
.help-block |
A block of help text that breaks onto a new line and may extend beyond one line. | Try it | Input Sizing |
.hidden |
Forces an element to be hidden (display:none ) |
Try it | Helpers |
.hidden-* |
Hides content depending on screen size | Try it | Helpers |
.hide |
Deprecated. Use .hidden instead |
Try it | Helpers |
.h1 - .h6 |
Makes an element look like a heading of the chosen class (h1-h6) | Try it | Typography |
.icon-bar |
Used in the navbar to create a hamburger menu (three horizontal bars) | Try it | Navbar |
.icon-next |
Unicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon | Try it | Carousel |
.icon-prev |
Unicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon | Try it | Carousel |
.img-circle |
Shapes an image to a circle (not supported in IE8 and earlier) | Try it | Images |
.img-responsive |
Makes an image responsive | Try it | Images |
.img-rounded |
Adds rounded corners to an image | Try it | Images |
.img-thumbnail |
Shapes an image to a thumbnail (borders) | Try it | Images |
.in |
Fades in tabs | Try it | Tabs |
.info |
Adds a light-blue background to the table row (<tr> or table cell (<td> ). Indicates a neutral informative change or action |
Try it | Tables |
.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 it as a "help text" | Try it | Inputs |
.input-group-lg |
Large input group | Try it | Inputs |
.input-group-sm |
Small input group | Try it | Inputs |
.input-group-addon |
Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field |
Try it | Inputs |
.input-group-btn |
Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar |
Try it | Inputs |
.input-lg |
Large input field | Try it | Input Sizing |
.input-sm |
Small input field | Try it | Input Sizing |
.invisible |
Makes an element invisible (visibility:hidden ). Note: Even though the element is invisible, it will take up space on the page |
Try it | Helpers |
.item |
Class added to each carousel item. May be text or images | Try it | Carousel |
.jumbotron |
Creates 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 information | Try it | Jumbotron |
.label |
Adds a grey rounded box to an element. Provides additional information about something (e.g. "New") | Try it | Labels |
.label-danger |
Red label | Try it | Labels |
.label-info |
Light-blue label | Try it | Labels |
.label-success |
Green label | Try it | Labels |
.label-warning |
Yellow label | Try it | Labels |
.lead |
Increase the font size and line height of a paragraph | Try it | Typography |
.left |
Used to identify the left carousel control | Try it | Carousel |
.list-group |
Creates a bordered list group for <li> elements |
Try it | List Group |
.list-group-item |
Added to each <li> element in the list group |
Try it | List Group |
.list-group-item-heading |
Creates a list group heading (used on other elements besides <li> ) |
Try it | List Group |
.list-group-item-text |
Used for item text inside the list group (used on other elements besides
<li> ) |
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-info |
Light-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 (horizontal menu) | Try it | Tabs |
.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 (like images or videos - often used for comments in a blog post etc) | Try it | Media Objects |
.media-body |
Text that should appear next to a media object | Try it | Media Objects |
.media-heading |
Creates a heading inside the media object | Try it | Media Objects |
.media-list |
Nested media lists | Try it | Media Objects |
.media-object |
Indicates a media object (image or video) | 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 |
Sets the proper width and margin of 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-open |
Used on the <body> element to prevent page scrolling (overflow:hidden ) |
Try it | Modals |
.modal-sm |
Small modal (less width) | Try it | Modals |
.modal-title |
The title of the modal | Try it | Modals |
.nav nav-tabs |
Indicates a tabbed menu | Try it | Tabs |
.nav nav-pills |
Indicates a pill menu | Try it | Tabs |
.nav .navbar-nav |
Used on a <ul> container that contains the list items with links inside a navigation bar |
Try it | Navbar |
.nav-justified |
Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered) | Try it | Tabs |
.nav-stacked |
Vertically stack tabs or pills | Try it | Tabs |
.nav-tabs |
Creates a tabbed menu | Try it | Tabs |
.navbar |
Creates a navigation bar | 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-btn |
Vertically aligns a button inside a navbar | 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-default |
Creates a default navigation bar (light-grey background color) | Try it | Navbar |
.navbar-fixed-bottom |
Makes the navbar stay at the bottom of the screen (sticky/fixed) | Try it | Navbar |
.navbar-fixed-top |
Makes the navbar stay at the top of the screen (sticky/fixed) | Try it | Navbar |
.navbar-form |
Added to form elements inside the navbar to vertically center them (proper padding) | Try it | Navbar |
.navbar-header |
Added to a container element that contains the link/element that represent a logo or a header | Try it | Navbar |
.navbar-inverse |
Creates a black navigation bar (instead of light-grey) | Try it | Navbar |
.navbar-left |
Aligns nav links, forms, buttons, or text, in the navbar to the left | Try it | Navbar |
.navbar-link |
Styles 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 it | Navbar |
.navbar-nav |
Used on a <ul> container that contains the list items with links inside a navigation bar |
Try it | Navbar |
.navbar-right |
Aligns nav links, forms, buttons, or text in the navbar to the right. | Try it | Navbar |
.navbar-static-top |
Removes left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default) | Try it | Navbar |
.navbar-text |
Vertical align any elements inside the navbar that are not links (ensures proper padding) | Try it | Navbar |
.navbar-toggle |
Styles 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 it | Navbar |
.next |
Used in the carousel control to identity the next control | Try it | Carousel |
.next |
Used to align pager buttons to the right side of the page (next button) | Try it | Pager |
.page-header |
Adds a horizontal line under the heading (+ adds some extra space around the element) | Try it | Page Header |
.pager |
Creates previous/next buttons (used on <ul> elements) |
Try it | Pager |
.pagination |
Creates a pagination (Useful when you have a web site with lots of pages. Used on <ul> elements) |
Try it | Pagination |
.pagination-lg |
Large pagination (each pagination link gets a font-size of 18px. Default is 14px) | Try it | Pagination |
.pagination-sm |
Small pagination (each pagination link gets a font-size of 12px. Default is 14px) | Try it | Pagination |
.panel |
Creates a bordered box with some padding around its content | Try it | Panels |
.panel-body |
Container for content inside the panel | Try it | Panels |
.panel-collapse |
Collapsible panel (toggle between hiding and showing panel(s)) | Try it | Collapse |
.panel-danger |
Red panel. Indicates danger | Try it | Panels |
.panel-info |
Light-blue panel. Indicates information | Try it | Panels |
.panel-success |
Green panel. Indicates success | Try it | Panels |
.panel-warning |
Yellow panel. Indicates warning | Try it | Panels |
.panel-footer |
Creates a panel footer (light background color) | Try it | Panels |
.panel-group |
Used to group many panels together. This removes the bottom margin below each panel | Try it | Panels |
.panel-heading |
Creates a panel header (light background color) | Try it | Panels |
.panel-title |
Used inside a .panel-heading to adjust the styling of the text (removes margins and adds a font-size of 16px) |
Try it | Panels |
.popover |
Popup-box that appears when the user clicks on an element | Try it | Popover |
.pre-scrollable |
Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar) |
Try it | Helpers |
.prev |
Used in carousels to indicate a "previous" link | Try it | Carousel |
.previous |
Used to align pager buttons to the left side of the page (previous button) | Try it | Pager |
.progress |
Container for progress bars | Try it | Progress Bars |
.progress-bar |
Creates a progress bar | Try it | Progress Bars |
.progress-bar-danger |
Red progress bar. Indicates danger | Try it | Progress Bars |
.progress-bar-info |
Light-blue progress bar. Indicates information | Try it | Progress Bars |
.progress-bar-striped |
Creates a striped progress bar | Try it | Progress Bars |
.progress-bar-success |
Green progress bar. Indicates success | Try it | Progress Bars |
.progress-bar-warning |
Yellow progress bar. Indicates warning | Try it | Progress Bars |
.pull-left |
Float an element to the left | Try it | Helpers |
.pull-right |
Float an element to the right | Try it | Helpers |
.right |
Used to identify the right carousel control | Try it | Carousel |
.row |
Container for responsive columns | Try it | Grid |
.row-no-gutters |
Removes the gutters from a row and its columns | Try it | Grid |
.show |
Shows an element (display:block) |
Try it | Helpers |
.small |
Creates a lighter, secondary text in any heading | Try it | Typography |
.sr-only |
Hides an element on all devices except for screen readers | Try it | Helpers |
.sr-only-focusable |
Hides an element on all devices except for screen readers | Try it | Helpers |
.success |
Adds a green background color to a table row (<tr> or table cell (<td> ). Indicates success or a positive action |
Try it | Tables |
.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-bordered |
Adds borders on all sides of the table and cells | Try it | Tables |
.table-condensed |
Makes a table more compact by cutting cell padding in half | 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) | Try it | Tables |
.text-capitalize |
Indicates capitalized text | Try it | Typography |
.text-center |
Center-aligns text | Try it | Typography |
.text-danger |
Red text color. Indicates danger | 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 | Typography |
.text-justify |
Indicates justified text | Try it | Typography |
.text-left |
Aligns the text to the left | Try it | Typography |
.text-lowercase |
Changes text to lowercase | Try it | Typography |
.text-muted |
Grey text color | Try it | Typography |
.text-nowrap |
Prevents the text from wrapping | Try it | Typography |
.text-primary |
Blue text color | Try it | Typography |
.text-right |
Aligns text to the right | Try it | Typography |
.text-success |
Green text color. Indicates success | Try it | Typography |
.text-uppercase |
Makes text uppercase | Try it | Typography |
.text-warning |
Yellow/orange text color. Indicates warning | Try it | Typography |
.thumbnail |
Adds a border around an element (often images or videos) to make it look like a thumbnail | Try it | Images |
.tooltip |
Popup-box that appears when the user moves the mouse pointer over an element | Try it | Tooltip |
.visible-* |
Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use .hidden-* instead |
Try it | Helpers |
.visible-print-block |
Displays the element (display:block ) in print (pre)view |
Helpers | |
.visible-print-inline |
Displays the element (display:inline ) in print (pre)view |
Helpers | |
.visible-print-inline-block |
Displays the element (display:inline-block ) in print (pre)view |
Helpers | |
.hidden-print |
Hides the element (display:none ) in print (pre)view |
Helpers | |
.warning |
Adds a yellow background color to the table row (<tr> or table cell (<td> ). Indicates a warning |
Try it | Tables |
.well |
Adds a rounded border around an element with a gray background color and some padding | Try it | Wells |
.well-lg |
Large well (more padding) | Try it | Wells |
.well-sm |
Small well (less padding) | Try it | Wells |
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.
function sortTable(table, col, reverse) { var tb = table.tBodies[0], tr = Array.prototype.slice.call(tb.rows, 0), i; reverse = -((+reverse) || -1); tr = tr.sort(function (a, b) { return reverse * (a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim())); }); for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); } function makeSortable(table) { var th = table.tHead, i; th && (th = th.rows[0]) && (th = th.cells); if (th) i = th.length; else return; while (--i >= 0) (function (i) { var dir = 1; th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))}); }(i)); } function makeAllSortable(parent) { parent = parent || document.body; var t = parent.getElementsByTagName('table'), i = t.length; while (--i >= 0) makeSortable(t[i]); } window.onload = function () {makeAllSortable();}; function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }