Bootstrap 4 Class Reference







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



Bootstrap 4 Class Reference



❮ Previous
Next ❯



Complete List of All Bootstrap 4 Classes


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











































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































Class
Description Example Category
.active Adds a white text color to the active link in a navbar.
Try it
Navbar
.active Adds a blue background color to the active list item in a list group
Try it
List Groups
.active Adds a dark-blue background color to simulate a "pressed" button

Try it
Buttons
.active Adds a blue background color to the active dropdown item in a dropdown
Try it
Dropdowns
.active Adds a blue background color to the active pagination link (to highlight the current page)
Try it
Pagination
.active Displays/shows the current carousel item
Try it
Carousel
.alert
Creates an alert message box Try it Alerts
.alert-danger Red alert. Indicates a dangerous or potentially negative action Try it Alerts
.alert-dark Dark alert. Dark grey alert box Try it Alerts
.alert-dismissible Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding) Try it Alerts
.alert-heading Adds color:inherit to the specified element Try it Alerts
.alert-info Teal alert. Indicates a neutral informative change or action Try it Alerts
.alert-light Light alert. Light grey alert box Try it Alerts
.alert-link Used on links inside alerts to provide matching colored links Try it Alerts
.alert-primary Blue alert. Indicates an important action Try it Alerts
.alert-secondary Grey alert. Indicates a "less" important action Try it Alerts
.alert-success Green alert. Indicates a successful or positive action Try it Alerts
.alert-warning Yellow alert. Indicates caution should be taken with this action Try it Alerts
.align-baseline The element is aligned with the baseline of the parent. This is default Try it Utilities
.align-bottom The element is aligned with the lowest element on the line Try it Utilities
.align-middle The element is placed in the middle of the parent element Try it Utilities
.align-top The element is aligned with the top of the tallest element on the line Try it Utilities
.align-text-top The element is aligned with the top of the parent element's font Try it Utilities
.align-text-bottom The element is aligned with the bottom of the parent element's font Try it Utilities
.align-content-around Align gathered items "around" Try it Flex
.align-content-*-around Align gathered items "around" on different screens Try it Flex
.align-content-center Align gathered items in the center Try it Flex
.align-content-*-center Align gathered items in the center on different screens Try it Flex
.align-content-end Align gathered items at the end Try it Flex
.align-content-*-end Align gathered items at the end on different screens Try it Flex
.align-content-start Align gathered items from the start Try it Flex
.align-content-*-start Align gathered items from the start on different screens Try it Flex
.align-content-stretch Stretch gathered items Try it Flex
.align-content-*-stretch Stretch gathered items on different screens Try it Flex
.align-items-start Align single rows of items from the start Try it Flex
.align-items-*-start Align single rows of items from the start on different screens Try it Flex
.align-items-end Align single rows of items at the end Try it Flex
.align-items-*-end Align single rows of items at the end on different screens Try it Flex
.align-items-center Align single rows of items in the center Try it Flex
.align-items-*-center Align single rows of items in the center on different screens Try it Flex
.align-items-baseline Align single rows of items at the baseline Try it Flex
.align-items-*-baseline Align single rows of items at the baseline on different screens Try it Flex
.align-items-stretch Stretch single rows of items Try it Flex
.align-items-*-stretch Stretch single rows of items on different screens Try it Flex
.align-self-start Align a flex item from the start Try it Flex
.align-self-*-start Align a flex item from the start on different screens Try it Flex
.align-self-end Align a flex item at the end Try it Flex
.align-self-*-end Align a flex item at the end on different screens Try it Flex
.align-self-center Align a flex item in the center Try it Flex
.align-self-*-center Align a flex item in the center on different screens Try it Flex
.align-self-baseline Align a flex item at the baseline Try it Flex
.align-self-*-start Align a flex item at the baseline on different screens Try it Flex
.align-self-stretch Stretch a flex item Try it Flex
.align-self-*-stretch Stretch a flex item on different screens Try it Flex
.badge Creates a circular badge (grey circle - often used as a numerical indicator)
Try it
Badges
.badge-danger Red badge. Indicates a dangerous or potentially negative action Try it Badges
.badge-dark Dark badge. Dark grey alert box Try it Badges
.badge-info Teal badge. Indicates a neutral informative change or action Try it Badges
.badge-light Light badge. Light grey alert box Try it Badges
.badge-pill Makes a badge more round
Try it
Badges
.badge-primary Blue badge. Indicates an important action Try it Badges
.badge-secondary Grey badge. Indicates a "less" important action Try it Badges
.badge-success Green badge. Indicates a successful or positive action Try it Badges
.badge-warning Yellow badge. Indicates caution should be taken with this action Try it Badges
.bg-danger Adds a red background color to an element. Represents danger or a negative action
Try it
Colors
.bg-dark Adds a dark grey background color to an element
Try it
Colors
.bg-info Adds a teal background color to an element. Represents some information
Try it
Colors
.bg-light Adds a light grey background color to an element
Try it
Colors
.bg-primary Adds a blue background color to an element. Represents something important
Try it
Colors
.bg-secondary Adds a grey background color to an element. Indicates a "less" important action
Try it
Colors
.bg-success Adds a green background color to an element. Indicates success or a positive action
Try it
Colors
.bg-warning Adds a yellow/orange background color to an element. Represents a warning or a negative action
Try it
Colors
.blockquote Styles quoted blocks of content from another source (adds a larger font-size (1.25rem))
Try it
Typography
.blockquote-footer Styles the source title inside the blockquote (light grey text with indentation)
Try it
Typography
.border Adds a border to an element
Try it
Utilities
.border-bottom-0 Removes the bottom border from an element
Try it
Utilities
.border-danger Adds a red border to an element (indicates danger)
Try it
Utilities
.border-dark Adds a dark border to an element
Try it
Utilities
.border-info Adds a teal border to an element (indicates information)
Try it
Utilities
.border-left-0 Removes the left border from an element
Try it
Utilities
.border-light Adds a light grey border to an element
Try it
Utilities
.border-primary Adds a blue border to an element
Try it
Utilities
.border-right-0 Removes the right border from an element
Try it
Utilities
.border-top-0 Removes the top border from an element
Try it
Utilities
.border-secondary Adds a grey border to an element
Try it
Utilities
.border-success Adds a green border to an element (indicates success)
Try it
Utilities
.border-warning Adds a orange border to an element (indicates warning)
Try it
Utilities
.border-white Adds a white border to an element
Try it
Utilities
.border-0 Removes all borders from an element
Try it
Utilities
.breadcrumb A pagination. Indicates the current page's location within a navigational hierarchy
Try it
Pagination
.breadcrumb-item Styles list items or links inside the breadcrumb
Try it
Pagination
.btn Creates a basic button (gray background and rounded corners)
Try it
Buttons
.btn-block Creates a block level button that spans the entire width of the parent element
Try it
Buttons
.btn-dark Dark grey button
Try it
Buttons
.btn-danger Red button. Indicates danger or a negative action
Try it
Buttons
.btn-group Groups buttons together on a single line
Try it
Button Groups
.btn-group-lg Large button group (makes all buttons in a button group larger - increased font-size and padding)
Try it
Button Groups
.btn-group-sm Small button group (makes all buttons in a button group smaller)
Try it
Button Groups
.btn-group-vertical Makes a button group appear vertically stacked
Try it
Button Groups
.btn-info Teal button. Represents a neutral informative change or action
Try it
Buttons
.btn-light Light grey button
Try it
Buttons
.btn-link Makes a button look like a link (get button behavior)
Try it
Buttons
.btn-lg Large button
Try it
Buttons
.btn-outline-dark Dark grey bordered/outlined button
Try it
Buttons
.btn-outline-danger Red bordered/outlined button. Indicates danger or a negative action
Try it
Buttons
.btn-outline-info Teal bordered/outlined button. Represents a neutral informative change or action
Try it
Buttons
.btn-outline-light Light grey bordered/outlined button
Try it
Buttons
.btn-outline-primary Blue bordered/outlined button.
Try it
Buttons
.btn-outline-secondary Grey bordered/outlined button. Indicates a "less" important action
Try it
Buttons
.btn-outline-success Green bordered/outlined button. Indicates success or a positive action
Try it
Buttons
.btn-outline-warning Orange bordered/outlined button. Represents warning or a negative action
Try it
Buttons
.btn-primary Blue button. Indicates a something important
Try it
Buttons
.btn-sm Small button
Try it
Buttons
.btn-secondary Grey button. Indicates a "less" important action
Try it
Buttons
.btn-success Green button. Indicates success or a positive action
Try it
Buttons
.btn-toolbar Combine sets of button groups into button toolbars for more complex components
Try it
Button Groups
.btn-warning Orange button. Represents warning or a negative action
Try it
Buttons
.card Creates a card
Try it
Cards
.card-body Container for card content
Try it
Cards
.card-columns Container to create a masonry-like grid of cards
Try it
Cards
.card-danger Adds a red background color to the card. Represents danger or a negative action
Try it
Cards
.card-dark Adds a grey background color to the card
Try it
Cards
.card-deck Container to create a grid of cards that are of equal height and width
Try it
Cards
.card-footer Card footer
Try it
Cards
.card-group Container to create a grid of cards that are of equal height and width, without side margins

Try it
Cards
.card-header Card header
Try it
Cards
.card-header-tabs Styles navigation tabs inside the card header
Try it
Cards
.card-header-pills Styles navigation pills inside the card header
Try it
Cards
.card-img-bottom Place the image at the bottom inside a card
Try it
Cards
.card-img-overlay Turns an image into a card background. Often used to add text on top of the image
Try it
Cards
.card-img-top Place the image at the top inside a card
Try it
Cards
.card-info Adds a teal background color to the card. Represents some information
Try it
Cards
.card-light Adds a light grey background color to the card
Try it
Cards
.card-link Adds a blue color to any link and a hover effect inside the card
Try it
Cards
.card-primary Adds a blue background color to the card. Represents something important
Try it
Cards
.card-secondary Adds a grey background color to the card. Represents something "less" important
Try it
Cards
.card-subtitle The .card-subtitle is used after a .card-title, and adds the following to an element: margin-top: -.375rem; margin-bottom: 0;

Try it
Cards
.card-success Adds a green background color to the card. Indicates success or a positive action
Try it
Cards
.card-text Used to remove bottom margins for a p element if it is the last child (or the only one), inside .card-body

Try it
Cards
.card-title Adds a title to any heading element inside the card
Try it
Cards
.card-warning Adds a yellow/orange background color to the card. Represents a warning or a negative action
Try it
Cards
.carousel Creates a carousel (slideshow)
Try it
Carousel
.carousel-caption Creates a caption text for each slide in the carousel
Try it
Carousel
.carousel-control-next Container for "next" carousel/item link
Try it
Carousel
.carousel-control-next-icon Used together with .carousel-control-next to create a "next" icon/button (right-pointed arrow)
Try it
Carousel
.carousel-control-prev Container for "previous" carousel/item link
Try it
Carousel
.carousel-control-prev-icon Used together with .carousel-control-prev to create a "previous" icon/button (left-pointed arrow)
Try it
Carousel
.carousel-indicators Adds little dots/indicators at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing)
Try it
Carousel
.carousel-inner Container for slide items
Try it
Carousel
.carousel-item Specifies the content of each slide
Try it
Carousel
.clearfix Clears floats
Try it
Utilities
.close Styles a close icon. This is often used for alerts and modals. Often used together with the × symbol to create the actual icon (a better lookiong "x"). It floats right by default
Try it
Utilities
.col-* Creates a column layout for extra small devices (and up/all devices, if not combined with other column classes). The * can be a number between 1 and 12
Try it
Grid System
.col-sm-* Creates a column layout for small devices (and up, if not combined with other column classes). The * can be a number between 1 and 12
Try it
Grid System
.col-md-* Creates a column layout for medium devices (and up, if not combined with other column classes). The * can be a number between 1 and 12
Try it
Grid System
.col-lg-* Creates a column layout for large devices (and up, if not combined with other column classes). The * can be a number between 1 and 12
Try it
Grid System
.col-xl-* Creates a column layout for extra large devices. The * can be a number between 1 and 12
Try it
Grid System
.collapse Indicates collapsible content - which can be hidden or shown on demand
Try it
Collapse
.collapse show Show the collapsible content by default
Try it
Collapse
.container Fixed width container with widths determined by screen sites. Equal margin on the left and right.
Try it
Containers
.container-fluid A container that spans the full width of the screen
Try it
Containers
.custom-checkbox A wrapper/container for custom checkboxes
Try it
Custom Forms
.custom-control A wrapper/container for custom forms
Try it
Custom Forms
.custom-control-input Customized form control
Try it
Custom Forms
.custom-control-inline Inline (horizontally - side by side) customized form controls
Try it
Custom Forms
.custom-control-label Customized label, when used together with a custom form control
Try it
Custom Forms
.custom-file Customized file upload
Try it
Custom Forms
.custom-radio A wrapper/container for custom radio buttons
Try it
Custom Forms
.custom-range Customized range control
Try it
Custom Forms
.custom-select Customized select menu
Try it
Custom Forms
.custom-select-lg Large customized select menu
Try it
Custom Forms
.custom-select-sm Small customized select menu
Try it
Custom Forms
.disabled Disables a button (adds opacity and a "no-parking-sign" icon on hover)
Try it
Buttons
.disabled Disables a dropdown item (adds a grey text color and a "no-parking-sign" icon on hover)
Try it
Dropdowns
.disabled Disables a pagination link (cannot be clicked - adds a grey text color and a "no-parking-sign" icon on hover)
Try it
Pagination
.disabled Disables a list item in a list group (cannot be clicked - adds a light grey color and removes the hover effect on list item links)
Try it
List Groups
.dropdown Creates a toggleable menu that allows the user to choose one value from a predefined list
Try it
Dropdowns
.dropdown-divider Used to separate links in the dropdown menu with a thin horizontal border
Try it
Dropdowns
.dropdown-header Used to add headers inside the dropdown menu
Try it
Dropdowns
.dropdown-item Creates a dropdown item (added to links or buttons inside .dropdown-menu)
Try it
Dropdowns
.dropdown-item-text Used to add plain text to a dropdown item, or used on links for default link styling
Try it
Dropdowns
.dropdown-menu Adds the default styles for the dropdown menu container
Try it
Dropdowns
.dropdown-menu-right Right-aligns a dropdown menu
Try it
Dropdowns
.dropdown-toggle Used on the button that should hide and show (toggle) the dropdown menu
Try it
Dropdowns
.dropleft Left-aligns the dropdown
Try it
Dropdowns
.dropright Right-aligns the dropdown
Try it
Dropdowns
.dropup Indicates a dropup menu (upwards instead of downwards)
Try it
Dropdowns
.d-block Creates a block element (adds display:block)
Try it
Utilities
.d-*-block Creates a block element on a specific screen width
Try it
Utilities
.d-flex Creates a flexbox container and transforms direct children into flex items
Try it
Flex
.d-*-flex Creates a flexbox container on a specific screen size
Try it
Flex
.d-inline-flex Creates an inline flexbox container
Try it
Flex
.d-*-inline-flex Creates an inline flexbox container on a specific screen size
Try it
Flex
.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
.fade Adds a fading effect when showing tab/pill content
Try it
Navs
.fade Adds a fading effect when opening a modal
Try it
Modal
.fixed-bottom Makes an element stay at the bottom of the screen (sticky/fixed)
Try it
Utilities
.fixed-top Makes an element stay at the top of the screen (sticky/fixed)
Try it
Utilities
.flex-column Display flex items vertically
Try it
Flex
.flex-*-column Display flex items vertically on different screen sizes:
Try it
Flex
.flex-column-reverse Display flex items vertically, reversed
Try it
Flex
.flex-*-column-reverse Display flex items vertically, reversed, on different screen sizes
Try it
Flex
.flex-fill Used on flex items to force it/them into equal width columns
Try it
Flex
.flex-*-fill Force flex items into equal widths on different screens
Try it
Flex
.flex-grow-0|1 Used on a single flex item to take up the rest of the available space
Try it
Flex
.flex-nowrap Don't wrap flex items
Try it
Flex
.flex-*-nowrap Don't wrap items on different screens
Try it
Flex
.flex-shrink-0|1 Used on a single flex item to shrink it if necessary
 
Flex
.flex-row Display flex items horizontally (side by side)
Try it
Flex
.flex-*-row Display flex items horizontally on a specific screen size
Try it
Flex
.flex-row-reverse Display flex items right-aligned and horizontally
Try it
Flex
.flex-*-row-reverse Display flex items right-aligned and horizontally on a specific screen size
Try it
Flex
.flex-wrap Wrap flex items
Try it
Flex
.flex-*-wrap Wrap items on different screens
Try it
Flex
.flex-wrap-reverse Wrap flex items, in reversed order
Try it
Flex
.flex-*-wrap-reverse Wrap flex items, in reversed order on different screens
Try it
Flex
.float-left Floats an element to the left
Try it
Utilities
.float-*-left Floats an element to the left on different screens
Try it
Utilities
.float-none Remove floats from an element
Try it
Utilities
.float-right Floats an element to the right
Try it
Utilities
.float-*-right Floats an element to the left on different screens
Try it
Utilities
.font-weight-bold
Bold text

Try it
Typography
.font-weight-italic
Italic text

Try it
Typography
.font-weight-light Light weight text (font-weight:300)
Try it
Typography
.font-weight-normal Normal text (font-weight:400)
Try it
Typography
.form-check Container for checkboxes. Adds proper padding
Try it
Forms
.form-check-inline Makes checkboxes appear on the same line (horizontally)
Try it
Forms
.form-check-input Styles checkboxes with proper margins
Try it
Forms
.form-check-label Ensures proper margins for labels used together with checkboxes
Try it
Forms
.form-control Used on input, textarea, and select elements to span the entire width of the page and make them responsive
Try it
Forms
.form-control-file Adds display:block and width:100% to input filed with type="file"
Try it
Forms
.form-control-lg Large form control
Try it
Forms
.form-control-plaintext Styles a form control as plain text
Try it
Forms
.form-control-range Adds display:block and width:100% to input filed with type="range"
Try it
Forms
.form-control-sm Small form control
Try it
Forms
.form-group Container for form input and label
Try it
Forms
.form-inline Makes a <form> left-aligned with inline-block controls (This only
applies to forms within viewports that are at least 768px wide)
Try it Forms
.h1 - .h6 Makes an element look like a heading of the chosen class (h1-h6)
Try it
Typography
.h-25 Sets the height of an element to 25%
Try it
Utilities
.h-50 Sets the height of an element to 50%
Try it
Utilities
.h-75 Sets the height of an element to 75%
Try it
Utilities
.h-100 Sets the height of an element to 100%
Try it
Utilities
.img-fluid Responsive image (adds max-width:100% and height:auto)
Try it
Images
.img-thumbnail Shapes an image to a thumbnail (thin light grey borders)
Try it
Images
.initialism Displays the text inside an <abbr> element in a slightly smaller font size
Try it
Typography
.input-group Container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text"
Try it
Input Group
.input-group-append Input group container for adding help text behind an input field
Try it
Input Group
.input-group-lg Large input group
Try it
Input Group
.input-group-prepend Input group container for adding help text in front of an input field
Try it
Input Group
.input-group-sm Small input group
Try it
Input Group
.input-group-text Styles the specified help text in an input group
Try it
Input Group
.input-lg Large input field
Try it
Input Sizing
.input-sm Small input field
Try it
Input Sizing
.invisible Make an element invisible
Try it
Utilities
.jumbotron Creates a padded grey heading/box with rounded corners that enlarges the font sizes of the text inside it. Used for calling extra attention to some special content or information
Try it
Jumbotron
.jumbotron-fluid Creates a full-width jumbotron (grey padded heading) without rounded borders
Try it
Jumbotron
.justify-content-* Aligns flex items from the start, at the end,
centered, in between and "around"

Try it
Flex
.justify-content-*-around Aligns flex items "around" on different screen sizes
Try it
Flex
.justify-content-*-between Aligns flex items in "between" on different screen sizes
Try it
Flex
.justify-content-*-center Aligns flex items in the center on different screen sizes
Try it
Flex
.justify-content-*-end Aligns flex items at the end on different screen sizes
Try it
Flex
.justify-content-*-start Aligns flex items from the start on different screen sizes
Try it
Flex
.lead Increase the font size and line height of a paragraph
Try it
Typography
.list-group Creates a bordered list group for <li> elements
Try it
List Group
.list-group-flush Removes some borders and rounded corners from list items in a list group
Try it
List Group
.list-group-item Added to each <li> element in the list group
Try it
List Group
.list-group-item-action Added to links inside the list group to make them stand out on hover (darker background)
Try it
List Group
.list-group-item-danger Red background color for a list item in a list group
Try it
List Group
.list-group-item-dark Dark grey background color for a list item in a list group
Try it
List Group
.list-group-item-info Light-blue background color for a list item in a list group
Try it
List Group
.list-group-item-light Light grey background color for a list item in a list group
Try it
List Group
.list-group-item-primary Blue background color for a list item in a list group
Try it
List Group
.list-group-item-success Green background color for a list item in a list group
Try it
List Group
.list-group-item-warning Yellow background color for a list item in a list group
Try it
List Group
.list-inline Places all list items on a single line (used together with
.list-inline-item on each <li> elements)

Try it
Typography
.list-inline-item Places all list items on a single line (used together with
.list-inline on the parent <ul> element)

Try it
Typography
.list-unstyled Removes all default list-style (bullets, left margin, etc.) styling from a
<ul>
or <ol> list

Try it
Typography
.mark Highlights text: Highlighted text

Try it
Typography
.media Aligns media objects together with content (like images or videos - often used for comments in a blog post etc)
Try it
Media Objects
.media-body Container for media content
Try it
Media Objects
.modal Identifies the content as a modal and brings focus to it
Try it
Modals
.modal-body Defines the style for the body of the modal. Add any HTML markup here (p, img, etc)
Try it
Modals
.modal-content Styles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if needed
Try it
Modals
.modal-dialog-centered Centers the modal vertically and horizontally within the page
Try it
Modals
.modal-footer The footer of the modal (often contains an action button and a close button)
Try it
Modals
.modal-header The header of the modal (often contains a title and a close button)
Try it
Modals
.modal-lg Large modal (wider than default)
Try it
Modals
.modal-sm Small modal (less width)
Try it
Modals
.m-# / m-*-# Responsive margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.mt-# / mt-*-# Responsive top margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.mb-# / mb-*-# Responsive bottom margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.ml-# / ml-*-# Responsive left margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.mr-# / mr-*-# Responsive right margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.mx-# / mx-*-# Responsive left and right margin auto (horizontal) classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.my-# / my-*-# Responsive top and bottom margin auto (vertical) classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.mx-auto Centers an element horizontally
Try it
Utilities
.nav nav-tabs Creates a tabbed menu
Try it
Tabs
.nav nav-pills Creates a pill menu
Try it
Tabs
.nav-justified Justifies tab/pill links with an equal width
Try it
Tabs
.navbar Creates a navigation bar
Try it
Navbar
.navbar-nav Container for navigation links inside the .navbar container
Try it
Navbar
.navbar-brand Added to a link or a header element inside the navbar to represent a logo or a header
Try it
Navbar
.navbar-collapse Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets)
Try it
Navbar
.navbar-expand-* Responsive collapsible class - stacks the navbar vertically on small (sm), medium (md), large (lg) or extra large (xl) screens
Try it
Navbar
.navbar-dark Adds a white text color to all links in the navbar
Try it
Navbar
.navbar-light Adds a black text color to all links in the navbar
Try it
Navbar
.navbar-text Vertically align any elements inside the navbar that are not links (ensures proper padding)
Try it
Navbar
.navbar-toggler Styles the button that should open the navbar on small screens. Automatically styled as a hamburger/three bars
Try it
Navbar
.navlink Used to style links/anchors inside the navbar
Try it
Navbar
.nav-item Used to style list items inside the navbar
Try it
Navbar
.no-gutters Remove gutters/extra space from columns
Try it
Grid System
.page-item Styles list items inside a pagination
Try it
Pagination
.page-link Styles links inside a pagination
Try it
Pagination
.pagination Creates a pagination (Useful when you have a web site with lots of pages
Try it
Pagination
.pagination-lg Large pagination (each pagination link gets a bigger font-size and more padding)
Try it
Pagination
.pagination-sm Small pagination (each pagination link gets a smaller font size and less padding)
Try it
Pagination
.pre-scrollable Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar)
Try it
Helpers
.progress Container for progress bars
Try it
Progress Bars
.progress-bar Creates a progress bar
Try it
Progress Bars
.progress-bar-animated Animates the progress bar (used together with stripes)
Try it
Progress Bars
.progress-bar-striped Adds stripes to the progress bar
Try it
Progress Bars
.p-# / p-*-# Responsive padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.pt-# / pt-*-# Responsive top padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.pb-# / pb-*-# Responsive bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.pl-# / pl-*-# Responsive left padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.pr-# / pr-*-# Responsive right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.py-# / py-*-# Responsive top and bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.px-# / px-*-# Responsive left and right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5
Try it
Utilities
.rounded Adds rounded corners to an element
Try it
Utilities
.rounded-bottom Adds bottom rounded corners to an element
Try it
Utilities
.rounded-circle Shapes an element to a circle (not supported in IE8 and earlier)
Try it
Utilities
.rounded-left Adds left rounded corners of an element
Try it
Utilities
.rounded-right Adds right rounded corners to an element
Try it
Utilities
.rounded-top Adds top rounded corners to an element
Try it
Utilities
.rounded-0 Removes rounded corners from an element
Try it
Utilities
.row Container for responsive columns
Try it
Grid System
.shadow Adds a shadow to an element
Try it
Utilities
.shadow-lg Adds a large shadow to an element
Try it
Utilities
.shadow-md Adds a medium shadow to an element
Try it
Utilities
.shadow-none Removes shadows from an element
Try it
Utilities
.shadow-sm Adds a small shadow to an element
Try it
Utilities
.small Creates a lighter, secondary text in any heading
Try it
Typography
.sr-only Hides an element on all devices except for screen readers
Try it
Utilities
.sr-only-focusable Hides an element on all devices except for screen readers
Try it
Utilities
.sticky-top Makes an element stay sticky/fixed at the top of the page when you scroll past it
Try it
Utilities
.tab-content Used together with .tab-pane to creates toggleable/dynamic tabs/pills
Try it
Tabs
.tab-pane Used together with .tab-content to creates toggleable/dynamic tabs/pills
Try it
Tabs
.table Adds basic styling to a table (padding, bottom borders, etc)
Try it
Tables
.table-active Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover)
Try it
Tables
.table-bordered Adds borders on all sides of the table and cells
Try it
Tables
.table-borderless Remove broders from a table
Try it
Tables
.table-condensed Makes a table more compact by cutting cell padding in half
Try it
Tables
.table-dark Adds a black background with white text to the table
Try it
Tables
.table-hover Creates a hoverable table (adds a grey background color on table rows on hover)
Try it
Tables
.table-responsive-* Makes a table responsive (adds a horizontal scrollbar when needed). By default, the scrollbar is added to the table on screens that are less than 992px wide (if needed). There's no difference when viewing anything lager than 992px wide. However, you can use sm|md|lg|xl to decide WHEN the table should get a scrollbar, depending on the screen width
Try it
Tables
.table-striped Adds zebra-stripes to a table
Try it
Tables
.text-capitalize Indicates capitalized text
Try it
Typography
.text-center Center-aligns text
Try it
Typography
.text-*-center Center-aligns text on different screens
Try it
Typography
.text-danger Red text color. Indicates danger
Try it
Colors
.text-dark Dark grey text color
Try it
Typography
.text-hide Hides text (helps replace an element's text content with a background image)
Try it
Typography
.text-info Light-blue text color. Indicates information
Try it
Colors
.text-light Light grey text color
Try it
Colors
.text-justify Indicates justified text
Try it
Typography
.text-left Aligns the text to the left
Try it
Typography
.text-*-left Left-aligns text on different screens
Try it
Typography
.text-lowercase Changes text to lowercase
Try it
Typography
.text-muted Grey text color
Try it
Colors
.text-nowrap Prevents the text from wrapping
Try it
Typography
.text-primary Blue text color. Indicates something important
Try it
Colors
.text-secondary Grey text color. Indicates something "less" important
Try it
Colors
.text-right Aligns text to the right
Try it
Typography
.text-*-right Right-aligns text on different screens
Try it
Typography
.text-success Green text color. Indicates success
Try it
Colors
.text-uppercase Makes text uppercase
Try it
Typography
.text-warning Yellow/orange text color. Indicates warning
Try it
Colors
.text-white White text color
Try it
Colors
.thead-dark Adds a black background color to table headers
Try it
Tables
.thead-light Adds a grey background color to table headers
Try it
Tables
.visible Make an element visible
Try it
Utilities
.w-25 Sets the width of an element to 25%
Try it
Utilities
.w-50 Sets the width of an element to 50%
Try it
Utilities
.w-75 Sets the width of an element to 75%
Try it
Utilities
.w-100 Sets the width of an element to 100%
Try it
Utilities




Tip: To see the full list of all Bootstrap 3 classes, go to our All Bootstrap 3 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 = 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 -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

❮ Previous
Next ❯

Popular posts from this blog

How to check contact read email or not when send email to Individual?

Displaying single band from multi-band raster using QGIS

How many registers does an x86_64 CPU actually have?