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.
