ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
Уроки по Bootstrap для начинающих. W3Schools на русском

Bootstrap 4 Справочник классов


Полный список всех классов Bootstrap 4

Полный список всех CSS-классов Bootstrap 4 с описанием и примерами:

Класс Описание Пример Категория
.active Adds a white text color to the active link in a navbar. Попробуй это Navbar
.active Adds a blue background color to the active list item in a list group Попробуй это List Groups
.active Adds a dark-blue background color to simulate a 'pressed' button Попробуй это Buttons
.active Adds a blue background color to the active dropdown item in a dropdown Попробуй это Dropdowns
.active Adds a blue background color to the active pagination link (to highlight the current page) Попробуй это Pagination
.active Displays/shows the current carousel item Попробуй это Carousel
.alert Creates an alert message box Попробуй это Alerts
.alert-danger Red alert. Indicates a dangerous or potentially negative action Попробуй это Alerts
.alert-dark Dark alert. Dark grey alert box Попробуй это Alerts
.alert-dismissible Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding) Попробуй это Alerts
.alert-heading Adds color:inherit to the specified element Попробуй это Alerts
.alert-info Teal alert. Indicates a neutral informative change or action Попробуй это Alerts
.alert-light Light alert. Light grey alert box Попробуй это Alerts
.alert-link Used on links inside alerts to provide matching colored links Попробуй это Alerts
.alert-primary Blue alert. Indicates an important action Попробуй это Alerts
.alert-secondary Grey alert. Indicates a 'less' important action Попробуй это Alerts
.alert-success Green alert. Indicates a successful or positive action Попробуй это Alerts
.alert-warning Yellow alert. Indicates caution should be taken with this action Попробуй это Alerts
.align-baseline The element is aligned with the baseline of the parent. This is default Попробуй это Utilities
.align-bottom The element is aligned with the lowest element on the line Попробуй это Utilities
.align-middle The element is placed in the middle of the parent element Попробуй это Utilities
.align-top The element is aligned with the top of the tallest element on the line Попробуй это Utilities
.align-text-top The element is aligned with the top of the parent element's font Попробуй это Utilities
.align-text-bottom The element is aligned with the bottom of the parent element's font Попробуй это Utilities
.align-content-around Align gathered items 'around' Попробуй это Flex
.align-content-*-around Align gathered items 'around' on different screens Попробуй это Flex
.align-content-center Align gathered items in the center Попробуй это Flex
.align-content-*-center Align gathered items in the center on different screens Попробуй это Flex
.align-content-end Align gathered items at the end Попробуй это Flex
.align-content-*-end Align gathered items at the end on different screens Попробуй это Flex
.align-content-start Align gathered items from the start Попробуй это Flex
.align-content-*-start Align gathered items from the start on different screens Попробуй это Flex
.align-content-stretch Stretch gathered items Попробуй это Flex
.align-content-*-stretch Stretch gathered items on different screens Попробуй это Flex
.align-items-start Align single rows of items from the start Попробуй это Flex
.align-items-*-start Align single rows of items from the start on different screens Попробуй это Flex
.align-items-end Align single rows of items at the end Попробуй это Flex
.align-items-*-end Align single rows of items at the end on different screens Попробуй это Flex
.align-items-center Align single rows of items in the center Попробуй это Flex
.align-items-*-center Align single rows of items in the center on different screens Попробуй это Flex
.align-items-baseline Align single rows of items at the baseline Попробуй это Flex
.align-items-*-baseline Align single rows of items at the baseline on different screens Попробуй это Flex
.align-items-stretch Stretch single rows of items Попробуй это Flex
.align-items-*-stretch Stretch single rows of items on different screens Попробуй это Flex
.align-self-start Align a flex item from the start Попробуй это Flex
.align-self-*-start Align a flex item from the start on different screens Попробуй это Flex
.align-self-end Align a flex item at the end Попробуй это Flex
.align-self-*-end Align a flex item at the end on different screens Попробуй это Flex
.align-self-center Align a flex item in the center Попробуй это Flex
.align-self-*-center Align a flex item in the center on different screens Попробуй это Flex
.align-self-baseline Align a flex item at the baseline Попробуй это Flex
.align-self-*-baseline Align a flex item at the baseline on different screens Попробуй это Flex
.align-self-stretch Stretch a flex item Попробуй это Flex
.align-self-*-stretch Stretch a flex item on different screens Попробуй это Flex
.badge Creates a circular badge (grey circle - often used as a numerical indicator) Попробуй это Badges
.badge-danger Red badge. Indicates a dangerous or potentially negative action Попробуй это Badges
.badge-dark Dark badge. Dark grey alert box Попробуй это Badges
.badge-info Teal badge. Indicates a neutral informative change or action Попробуй это Badges
.badge-light Light badge. Light grey alert box Попробуй это Badges
.badge-pill Makes a badge more round Попробуй это Badges
.badge-primary Blue badge. Indicates an important action Попробуй это Badges
.badge-secondary Grey badge. Indicates a 'less' important action Попробуй это Badges
.badge-success Green badge. Indicates a successful or positive action Попробуй это Badges
.badge-warning Yellow badge. Indicates caution should be taken with this action Попробуй это Badges
.bg-danger Adds a red background color to an element. Represents danger or a negative action Попробуй это Colors
.bg-dark Adds a dark grey background color to an element Попробуй это Colors
.bg-info Adds a teal background color to an element. Represents some information Попробуй это Colors
.bg-light Adds a light grey background color to an element Попробуй это Colors
.bg-primary Adds a blue background color to an element. Represents something important Попробуй это Colors
.bg-secondary Adds a grey background color to an element. Indicates a 'less' important action Попробуй это Colors
.bg-success Adds a green background color to an element. Indicates success or a positive action Попробуй это Colors
.bg-warning Adds a yellow/orange background color to an element. Represents a warning or a negative action Попробуй это Colors
.blockquote Styles quoted blocks of content from another source (adds a larger font-size (1.25rem)) Попробуй это Typography
.blockquote-footer Styles the source title inside the blockquote (light grey text with indentation) Попробуй это Typography
.border Adds a border to an element Попробуй это Utilities
.border-bottom-0 Removes the bottom border from an element Попробуй это Utilities
.border-danger Adds a red border to an element (indicates danger) Попробуй это Utilities
.border-dark Adds a dark border to an element Попробуй это Utilities
.border-info Adds a teal border to an element (indicates information) Попробуй это Utilities
.border-left-0 Removes the left border from an element Попробуй это Utilities
.border-light Adds a light grey border to an element Попробуй это Utilities
.border-primary Adds a blue border to an element Попробуй это Utilities
.border-right-0 Removes the right border from an element Попробуй это Utilities
.border-top-0 Removes the top border from an element Попробуй это Utilities
.border-secondary Adds a grey border to an element Попробуй это Utilities
.border-success Adds a green border to an element (indicates success) Попробуй это Utilities
.border-warning Adds a orange border to an element (indicates warning) Попробуй это Utilities
.border-white Adds a white border to an element Попробуй это Utilities
.border-0 Removes all borders from an element Попробуй это Utilities
.breadcrumb A pagination. Indicates the current page's location within a navigational hierarchy Попробуй это Pagination
.breadcrumb-item Styles list items or links inside the breadcrumb Попробуй это Pagination
.btn Creates a basic button (gray background and rounded corners) Попробуй это Buttons
.btn-block Creates a block level button that spans the entire width of the parent element Попробуй это Buttons
.btn-dark Dark grey button Попробуй это Buttons
.btn-danger Red button. Indicates danger or a negative action Попробуй это Buttons
.btn-group Groups buttons together on a single line Попробуй это Button Groups
.btn-group-lg Large button group (makes all buttons in a button group larger - increased font-size and padding) Попробуй это Button Groups
.btn-group-sm Small button group (makes all buttons in a button group smaller) Попробуй это Button Groups
.btn-group-vertical Makes a button group appear vertically stacked Попробуй это Button Groups
.btn-info Teal button. Represents a neutral informative change or action Попробуй это Buttons
.btn-light Light grey button Попробуй это Buttons
.btn-link Makes a button look like a link (get button behavior) Попробуй это Buttons
.btn-lg Large button Попробуй это Buttons
.btn-outline-dark Dark grey bordered/outlined button Попробуй это Buttons
.btn-outline-danger Red bordered/outlined button. Indicates danger or a negative action Попробуй это Buttons
.btn-outline-info Teal bordered/outlined button. Represents a neutral informative change or action Попробуй это Buttons
.btn-outline-light Light grey bordered/outlined button Попробуй это Buttons
.btn-outline-primary Blue bordered/outlined button. Попробуй это Buttons
.btn-outline-secondary Grey bordered/outlined button. Indicates a 'less' important action Попробуй это Buttons
.btn-outline-success Green bordered/outlined button. Indicates success or a positive action Попробуй это Buttons
.btn-outline-warning Orange bordered/outlined button. Represents warning or a negative action Попробуй это Buttons
.btn-primary Blue button. Indicates a something important Попробуй это Buttons
.btn-sm Small button Попробуй это Buttons
.btn-secondary Grey button. Indicates a 'less' important action Попробуй это Buttons
.btn-success Green button. Indicates success or a positive action Попробуй это Buttons
.btn-toolbar Combine sets of button groups into button toolbars for more complex components Попробуй это Button Groups
.btn-warning Orange button. Represents warning or a negative action Попробуй это Buttons
.card Creates a card Попробуй это Cards
.card-body Container for card content Попробуй это Cards
.card-columns Container to create a masonry-like grid of cards Попробуй это Cards
.card-danger Adds a red background color to the card. Represents danger or a negative action Попробуй это Cards
.card-dark Adds a grey background color to the card Попробуй это Cards
.card-deck Container to create a grid of cards that are of equal height and width Попробуй это Cards
.card-footer Card footer Попробуй это Cards
.card-group Container to create a grid of cards that are of equal height and width, without side margins Попробуй это Cards
.card-header Card header Попробуй это Cards
.card-header-tabs Styles navigation tabs inside the card header Попробуй это Cards
.card-header-pills Styles navigation pills inside the card header Попробуй это Cards
.card-img-bottom Place the image at the bottom inside a card Попробуй это Cards
.card-img-overlay Turns an image into a card background. Often used to add text on top of the image Попробуй это Cards
.card-img-top Place the image at the top inside a card Попробуй это Cards
.card-info Adds a teal background color to the card. Represents some information Попробуй это Cards
.card-light Adds a light grey background color to the card Попробуй это Cards
.card-link Adds a blue color to any link and a hover effect inside the card Попробуй это Cards
.card-primary Adds a blue background color to the card. Represents something important Попробуй это Cards
.card-secondary Adds a grey background color to the card. Represents something 'less' important Попробуй это 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; Попробуй это Cards
.card-success Adds a green background color to the card. Indicates success or a positive action Попробуй это 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 Попробуй это Cards
.card-title Adds a title to any heading element inside the card Попробуй это Cards
.card-warning Adds a yellow/orange background color to the card. Represents a warning or a negative action Попробуй это Cards
.carousel Creates a carousel (slideshow) Попробуй это Carousel
.carousel-caption Creates a caption text for each slide in the carousel Попробуй это Carousel
.carousel-control-next Container for 'next' carousel/item link Попробуй это Carousel
.carousel-control-next-icon Used together with .carousel-control-next to create a 'next' icon/button (right-pointed arrow) Попробуй это Carousel
.carousel-control-prev Container for 'previous' carousel/item link Попробуй это Carousel
.carousel-control-prev-icon Used together with .carousel-control-prev to create a 'previous' icon/button (left-pointed arrow) Попробуй это 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) Попробуй это Carousel
.carousel-inner Container for slide items Попробуй это Carousel
.carousel-item Specifies the content of each slide Попробуй это Carousel
.clearfix Clears floats Попробуй это 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 looking 'x'). It floats right by default Попробуй это Utilities
.col-auto Make form columns automatically size themselves based on their content Попробуй это Forms
.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 Попробуй это 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 Попробуй это 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 Попробуй это 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 Попробуй это Grid System
.col-xl-* Creates a column layout for extra large devices. The * can be a number between 1 and 12 Попробуй это Grid System
.collapse Indicates collapsible content - which can be hidden or shown on demand Попробуй это Collapse
.collapse show Show the collapsible content by default Попробуй это Collapse
.container Fixed width container with widths determined by screen sites. Equal margin on the left and right. Попробуй это Containers
.container-fluid A container that spans the full width of the screen Попробуй это Containers
.container-* Responsive containers Попробуй это Containers
.custom-checkbox A wrapper/container for custom checkboxes Попробуй это Custom Forms
.custom-control A wrapper/container for custom forms Попробуй это Custom Forms
.custom-control-input Customized form control Попробуй это Custom Forms
.custom-control-inline Inline (horizontally - side by side) customized form controls Попробуй это Custom Forms
.custom-control-label Customized label, when used together with a custom form control Попробуй это Custom Forms
.custom-file Customized file upload Попробуй это Custom Forms
.custom-file-input Customized file upload Попробуй это Custom Forms
.custom-file-label Customized file label Попробуй это Custom Forms
.custom-radio A wrapper/container for custom radio buttons Попробуй это Custom Forms
.custom-range Customized range control Попробуй это Custom Forms
.custom-select Customized select menu Попробуй это Custom Forms
.custom-select-lg Large customized select menu Попробуй это Custom Forms
.custom-select-sm Small customized select menu Попробуй это Custom Forms
.custom-switch Customized toggle switch Попробуй это Custom Forms
.disabled Disables a button (adds opacity and a 'no-parking-sign' icon on hover) Попробуй это Buttons
.disabled Disables a dropdown item (adds a grey text color and a 'no-parking-sign' icon on hover) Попробуй это Dropdowns
.disabled Disables a pagination link (cannot be clicked - adds a grey text color and a 'no-parking-sign' icon on hover) Попробуй это 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) Попробуй это List Groups
.dropdown Creates a toggleable menu that allows the user to choose one value from a predefined list Попробуй это Dropdowns
.dropdown-divider Used to separate links in the dropdown menu with a thin horizontal border Попробуй это Dropdowns
.dropdown-header Used to add headers inside the dropdown menu Попробуй это Dropdowns
.dropdown-item Creates a dropdown item (added to links or buttons inside .dropdown-menu) Попробуй это Dropdowns
.dropdown-item-text Used to add plain text to a dropdown item, or used on links for default link styling Попробуй это Dropdowns
.dropdown-menu Adds the default styles for the dropdown menu container Попробуй это Dropdowns
.dropdown-menu-right Right-aligns a dropdown menu Попробуй это Dropdowns
.dropdown-toggle Used on the button that should hide and show (toggle) the dropdown menu Попробуй это Dropdowns
.dropleft Left-aligns the dropdown Попробуй это Dropdowns
.dropright Right-aligns the dropdown Попробуй это Dropdowns
.dropup Indicates a dropup menu (upwards instead of downwards) Попробуй это Dropdowns
.d-block Creates a block element (adds display:block) Попробуй это Utilities
.d-*-block Creates a block element on a specific screen width Попробуй это Utilities
.d-inline Makes an element inline Попробуй это Utilities
.d-*-inline Makes an element inline on a specific screen size Попробуй это Utilities
.d-inline-block Makes an element inline block Попробуй это Utilities
.d-*-inline-block Makes an element inline block on a specific screen size Попробуй это Utilities
.d-flex Creates a flexbox container and transforms direct children into flex items Попробуй это Flex
.d-*-flex Creates a flexbox container on a specific screen size Попробуй это Flex
.d-inline-flex Creates an inline flexbox container Попробуй это Flex
.d-*-inline-flex Creates an inline flexbox container on a specific screen size Попробуй это Flex
.d-none Hides an element Попробуй это Utilities
.d-*-none Hides an element on a specific screen size Попробуй это Utilities
.d-table Makes an element display as a table Попробуй это Utilities
.d-*-table Makes an element display as a table on a specific screen size Попробуй это Utilities
.d-table-cell Makes an element display as a table cell Попробуй это Utilities
.d-*-table-cell Makes an element display as a table cell on a specific screen size Попробуй это Utilities
.d-table-row Makes an element display as a table row Попробуй это Utilities
.d-*-table-row Makes an element display as a table row on a specific screen size Попробуй это Utilities
.embed-responsive Container for embedded content. Makes videos or slideshows scale properly on any device Попробуй это Images
.embed-responsive-16by9 Container for embedded content. Creates an 16:9 aspect ratio embedded content Попробуй это Images
.embed-responsive-3by4 Container for embedded content. Creates an 3:4 aspect ratio embedded content Попробуй это Images
.embed-responsive-item Used inside .embed-responsive. Scales the video nicely to the parent element Попробуй это Images
.fade Adds a fading effect when closing an alert box Попробуй это Alerts
.fade Adds a fading effect when showing tab/pill content Попробуй это Navs
.fade Adds a fading effect when opening a modal Попробуй это Modal
.fixed-bottom Makes an element stay at the bottom of the screen (sticky/fixed) Попробуй это Utilities
.fixed-top Makes an element stay at the top of the screen (sticky/fixed) Попробуй это Utilities
.flex-column Display flex items vertically Попробуй это Flex
.flex-*-column Display flex items vertically on different screen sizes: Попробуй это Flex
.flex-column-reverse Display flex items vertically, reversed Попробуй это Flex
.flex-*-column-reverse Display flex items vertically, reversed, on different screen sizes Попробуй это Flex
.flex-fill Used on flex items to force it/them into equal width columns Попробуй это Flex
.flex-*-fill Force flex items into equal widths on different screens Попробуй это Flex
.flex-grow-0|1 Used on a single flex item to take up the rest of the available space Попробуй это Flex
.flex-nowrap Don't wrap flex items Попробуй это Flex
.flex-*-nowrap Don't wrap items on different screens Попробуй это 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) Попробуй это Flex
.flex-*-row Display flex items horizontally on a specific screen size Попробуй это Flex
.flex-row-reverse Display flex items right-aligned and horizontally Попробуй это Flex
.flex-*-row-reverse Display flex items right-aligned and horizontally on a specific screen size Попробуй это Flex
.flex-wrap Wrap flex items Попробуй это Flex
.flex-*-wrap Wrap items on different screens Попробуй это Flex
.flex-wrap-reverse Wrap flex items, in reversed order Попробуй это Flex
.flex-*-wrap-reverse Wrap flex items, in reversed order on different screens Попробуй это Flex
.float-left Floats an element to the left Попробуй это Utilities
.float-*-left Floats an element to the left on different screens Попробуй это Utilities
.float-none Remove floats from an element Попробуй это Utilities
.float-right Floats an element to the right Попробуй это Utilities
.float-*-right Floats an element to the left on different screens Попробуй это Utilities
.font-italic Italic text Попробуй это Typography
.font-weight-bold Bold text Попробуй это Typography
.font-weight-bolder Bolder text (font-weight:bolder) Попробуй это Typography
.font-weight-light Light weight text (font-weight:300) Попробуй это Typography
.font-weight-lighter Lighter weight text (font-weight:lighter) Попробуй это Typography
.font-weight-normal Normal text (font-weight:400) Попробуй это Typography
.form-check Container for checkboxes. Adds proper padding Попробуй это Forms
.form-check-inline Makes checkboxes appear on the same line (horizontally) Попробуй это Forms
.form-check-input Styles checkboxes with proper margins Попробуй это Forms
.form-check-label Ensures proper margins for labels used together with checkboxes Попробуй это Forms
.form-control Used on input, textarea, and select elements to span the entire width of the page and make them responsive Попробуй это Forms
.form-control-file Adds display:block and width:100% to input filed with type='file' Попробуй это Forms
.form-control-lg Large form control Попробуй это Forms
.form-control-plaintext Styles a form control as plain text Попробуй это Forms
.form-control-range Adds display:block and width:100% to input filed with type='range' Попробуй это Forms
.form-control-sm Small form control Попробуй это Forms
.form-group Container for form input and label Попробуй это 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) Попробуй это Forms
.form-row Container for responsive columns (less left and right margins than .row/overrides default column gutters) Попробуй это Forms
.h1 - .h6 Makes an element look like a heading of the chosen class (h1-h6) Попробуй это Typography
.h-25 Sets the height of an element to 25% Попробуй это Utilities
.h-50 Sets the height of an element to 50% Попробуй это Utilities
.h-75 Sets the height of an element to 75% Попробуй это Utilities
.h-100 Sets the height of an element to 100% Попробуй это Utilities
.img-fluid Responsive image (adds max-width:100% and height:auto) Попробуй это Images
.img-thumbnail Shapes an image to a thumbnail (thin light grey borders) Попробуй это Images
.initialism Displays the text inside an <abbr> element in a slightly smaller font size Попробуй это 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' Попробуй это Input Group
.input-group-append Input group container for adding help text behind an input field Попробуй это Input Group
.input-group-lg Large input group Попробуй это Input Group
.input-group-prepend Input group container for adding help text in front of an input field Попробуй это Input Group
.input-group-sm Small input group Попробуй это Input Group
.input-group-text Styles the specified help text in an input group Попробуй это Input Group
.input-lg Large input field Попробуй это Input Sizing
.input-sm Small input field Попробуй это Input Sizing
.invalid-feedback Creates a custom validation message used in validated forms (red text color) Попробуй это Forms
.invalid-tooltip Creates a custom validation message used in validated forms (red tooltip) Попробуй это Forms
.invisible Make an element invisible Попробуй это Utilities
.is-invalid Validates a form element (adds a red border to input fields). Note: for server side Попробуй это Forms
.is-valid Validates a form element (adds a green border to input fields). Note: for server side Попробуй это Forms
.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 Попробуй это Jumbotron
.jumbotron-fluid Creates a full-width jumbotron (grey padded heading) without rounded borders Попробуй это Jumbotron
.justify-content-* Aligns flex items from the start, at the end, centered, in between and 'around' Попробуй это Flex
.justify-content-*-around Aligns flex items 'around' on different screen sizes Попробуй это Flex
.justify-content-*-between Aligns flex items in 'between' on different screen sizes Попробуй это Flex
.justify-content-*-center Aligns flex items in the center on different screen sizes Попробуй это Flex
.justify-content-*-end Aligns flex items at the end on different screen sizes Попробуй это Flex
.justify-content-*-start Aligns flex items from the start on different screen sizes Попробуй это Flex
.lead Increase the font size and line height of a paragraph Попробуй это Typography
.list-group Creates a bordered list group for <li> elements Попробуй это List Group
.list-group-flush Removes some borders and rounded corners from list items in a list group Попробуй это List Group
.list-group-horizontal Display list items horizontally instead of vertically (side-by-side instead of on top of each other) Попробуй это List Group
.list-group-horizontal-* Display list items horizontally instead of vertically on different screen sizes Попробуй это List Group
.list-group-item Added to each <li> element in the list group Попробуй это List Group
.list-group-item-action Added to links inside the list group to make them stand out on hover (darker background) Попробуй это List Group
.list-group-item-danger Red background color for a list item in a list group Попробуй это List Group
.list-group-item-dark Dark grey background color for a list item in a list group Попробуй это List Group
.list-group-item-info Light-blue background color for a list item in a list group Попробуй это List Group
.list-group-item-light Light grey background color for a list item in a list group Попробуй это List Group
.list-group-item-primary Blue background color for a list item in a list group Попробуй это List Group
.list-group-item-success Green background color for a list item in a list group Попробуй это List Group
.list-group-item-warning Yellow background color for a list item in a list group Попробуй это List Group
.list-inline Places all list items on a single line (used together with .list-inline-item on each <li> elements) Попробуй это Typography
.list-inline-item Places all list items on a single line (used together with .list-inline on the parent <ul> element) Попробуй это Typography
.list-unstyled Removes all default list-style (bullets, left margin, etc.) styling from a <ul> or <ol> list Попробуй это Typography
.mark Highlights text: Highlighted text Попробуй это Typography
.media Aligns media objects together with content (like images or videos - often used for comments in a blog post etc) Попробуй это Media Objects
.media-body Container for media content Попробуй это Media Objects
.modal Identifies the content as a modal and brings focus to it Попробуй это Modals
.modal-body Defines the style for the body of the modal. Add any HTML markup here (p, img, etc) Попробуй это Modals
.modal-content Styles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if needed Попробуй это Modals
.modal-dialog-centered Centers the modal vertically and horizontally within the page Попробуй это Modals
.modal-dialog-scrollable Adds a scrollbar inside the modal Попробуй это Modals
.modal-footer The footer of the modal (often contains an action button and a close button) Попробуй это Modals
.modal-header The header of the modal (often contains a title and a close button) Попробуй это Modals
.modal-lg Large modal (wider than default) Попробуй это Modals
.modal-sm Small modal (less width) Попробуй это Modals
.modal-xl Extra large modal Попробуй это Modals
.m-# / m-*-# Responsive margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.mt-# / mt-*-# Responsive top margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.mb-# / mb-*-# Responsive bottom margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.ml-# / ml-*-# Responsive left margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.mr-# / mr-*-# Responsive right margin classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это 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 Попробуй это 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 Попробуй это Utilities
.mx-auto Centers an element horizontally Попробуй это Utilities
.nav nav-tabs Creates a tabbed menu Попробуй это Tabs
.nav nav-pills Creates a pill menu Попробуй это Tabs
.nav-justified Justifies tab/pill links with an equal width Попробуй это Tabs
.navbar Creates a navigation bar Попробуй это Navbar
.navbar-nav Container for navigation links inside the .navbar container Попробуй это Navbar
.navbar-brand Added to a link or a header element inside the navbar to represent a logo or a header Попробуй это Navbar
.navbar-collapse Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) Попробуй это Navbar
.navbar-expand-* Responsive collapsible class - stacks the navbar vertically on small (sm), medium (md), large (lg) or extra large (xl) screens Попробуй это Navbar
.navbar-dark Adds a white text color to all links in the navbar Попробуй это Navbar
.navbar-light Adds a black text color to all links in the navbar Попробуй это Navbar
.navbar-text Vertically align any elements inside the navbar that are not links (ensures proper padding) Попробуй это Navbar
.navbar-toggler Styles the button that should open the navbar on small screens. Automatically styled as a hamburger/three bars Попробуй это Navbar
.nav-link Used to style links/anchors inside the navbar Попробуй это Navbar
.nav-item Used to style list items inside the navbar Попробуй это Navbar
.needs-validation Adds validation styles to a submitted form Попробуй это Forms
.no-gutters Remove gutters/extra space from columns Попробуй это Grid System
.page-item Styles list items inside a pagination Попробуй это Pagination
.page-link Styles links inside a pagination Попробуй это Pagination
.pagination Creates a pagination (Useful when you have a web site with lots of pages Попробуй это Pagination
.pagination-lg Large pagination (each pagination link gets a bigger font-size and more padding) Попробуй это Pagination
.pagination-sm Small pagination (each pagination link gets a smaller font size and less padding) Попробуй это Pagination
.pre-scrollable Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar) Попробуй это Helpers
.progress Container for progress bars Попробуй это Progress Bars
.progress-bar Creates a progress bar Попробуй это Progress Bars
.progress-bar-animated Animates the progress bar (used together with stripes) Попробуй это Progress Bars
.progress-bar-striped Adds stripes to the progress bar Попробуй это Progress Bars
.p-# / p-*-# Responsive padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.pt-# / pt-*-# Responsive top padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.pb-# / pb-*-# Responsive bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.pl-# / pl-*-# Responsive left padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.pr-# / pr-*-# Responsive right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.py-# / py-*-# Responsive top and bottom padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.px-# / px-*-# Responsive left and right padding classes. * can be sm, md, lg or xl. # can be a number between 0 and 5 Попробуй это Utilities
.rounded Adds rounded corners to an element Попробуй это Utilities
.rounded-bottom Adds bottom rounded corners to an element Попробуй это Utilities
.rounded-circle Shapes an element to a circle (not supported in IE8 and earlier) Попробуй это Utilities
.rounded-left Adds left rounded corners of an element Попробуй это Utilities
.rounded-right Adds right rounded corners to an element Попробуй это Utilities
.rounded-top Adds top rounded corners to an element Попробуй это Utilities
.rounded-0 Removes rounded corners from an element Попробуй это Utilities
.row Container for responsive columns Попробуй это Grid System
.row-cols-* Set the number of columns that should appear next to each other Попробуй это Grid System
.shadow Adds a shadow to an element Попробуй это Utilities
.shadow-lg Adds a large shadow to an element Попробуй это Utilities
.shadow-none Removes shadows from an element Попробуй это Utilities
.shadow-sm Adds a small shadow to an element Попробуй это Utilities
.small Creates a lighter, secondary text in any heading Попробуй это Typography
.spinner-border Creates a spinner/loader Попробуй это Spinners
.spinner-border-sm Creates a smaller spinner/loader Попробуй это Spinners
.spinner-grow Creates a spinner/loader that 'grows' Попробуй это Spinners
.spinner-grow-sm Creates a smaller spinner/loader that 'grows' Попробуй это Spinners
.sr-only Hides an element on all devices except for screen readers Попробуй это Utilities
.sr-only-focusable Hides an element on all devices except for screen readers Попробуй это Utilities
.sticky-top Makes an element stay sticky/fixed at the top of the page when you scroll past it Попробуй это Utilities
.stretched-link Added to a link to make its containing block (parent) clickable (works only for parent elements with position:relative) Попробуй это Utilities
.tab-content Used together with .tab-pane to creates toggleable/dynamic tabs/pills Попробуй это Tabs
.tab-pane Used together with .tab-content to creates toggleable/dynamic tabs/pills Попробуй это Tabs
.table Adds basic styling to a table (padding, bottom borders, etc) Попробуй это Tables
.table-active Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover) Попробуй это Tables
.table-bordered Adds borders on all sides of the table and cells Попробуй это Tables
.table-borderless Remove borders from a table Попробуй это Tables
.table-condensed Makes a table more compact by cutting cell padding in half Попробуй это Tables
.table-dark Adds a black background with white text to the table Попробуй это Tables
.table-hover Creates a hoverable table (adds a grey background color on table rows on hover) Попробуй это 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 Попробуй это Tables
.table-striped Adds zebra-stripes to a table Попробуй это Tables
.text-break Prevents long text from breaking layout Попробуй это Typography
.text-capitalize Indicates capitalized text Попробуй это Typography
.text-center Center-aligns text Попробуй это Typography
.text-*-center Center-aligns text on different screens Попробуй это Typography
.text-danger Red text color. Indicates danger Попробуй это Colors
.text-dark Dark grey text color Попробуй это Typography
.text-decoration-none Removes the underline from a link Попробуй это Typography
.text-hide Hides text (helps replace an element's text content with a background image) Попробуй это Typography
.text-info Light-blue text color. Indicates information Попробуй это Colors
.text-light Light grey text color Попробуй это Colors
.text-justify Indicates justified text Попробуй это Typography
.text-left Aligns the text to the left Попробуй это Typography
.text-*-left Left-aligns text on different screens Попробуй это Typography
.text-lowercase Changes text to lowercase Попробуй это Typography
.text-muted Grey text color Попробуй это Colors
.text-nowrap Prevents the text from wrapping Попробуй это Typography
.text-primary Blue text color. Indicates something important Попробуй это Colors
.text-secondary Grey text color. Indicates something 'less' important Попробуй это Colors
.text-reset Resets the color of a text or a link (inherits the color from its parent) Попробуй это Typography
.text-right Aligns text to the right Попробуй это Typography
.text-*-right Right-aligns text on different screens Попробуй это Typography
.text-success Green text color. Indicates success Попробуй это Colors
.text-uppercase Makes text uppercase Попробуй это Typography
.text-warning Yellow/orange text color. Indicates warning Попробуй это Colors
.text-white White text color Попробуй это Colors
.thead-dark Adds a black background color to table headers Попробуй это Tables
.thead-light Adds a grey background color to table headers Попробуй это Tables
.toast Creates a toast (alert box that disappears after a few seconds) Попробуй это Toast
.toast-body Toast body Попробуй это Toast
.toast-header Toast header Попробуй это Toast
.valid-feedback Creates a custom validation message used in validated forms (green text color) Попробуй это Forms
.valid-tooltip Creates a custom validation message used in validated forms (green tooltip) Попробуй это Forms
.visible Make an element visible Попробуй это Utilities
.was-validated Adds validation styles to a form element Попробуй это Forms
.w-25 Sets the width of an element to 25% Попробуй это Utilities
.w-50 Sets the width of an element to 50% Попробуй это Utilities
.w-75 Sets the width of an element to 75% Попробуй это Utilities
.w-100 Sets the width of an element to 100% Попробуй это Utilities

В таблице выше показаны все доступные классы Bootstrap 4.

Совет: Чтобы увидеть полный список всех классов Bootstrap 3 перейдите на наш Справочник по всем CSS классам Bootstrap 3.