Menu
×
Get Certified Upgrade For Teachers Spaces Get Certified Upgrade For Teachers Spaces
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS DSA TYPESCRIPT ANGULAR ANGULARJS GIT POSTGRESQL MONGODB ASP AI R GO KOTLIN SASS VUE GEN AI SCIPY CYBERSECURITY DATA SCIENCE INTRO TO PROGRAMMING BASH RUST

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-*-baseline 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