Bootstrap 3 Справочник классов
Полный список всех классов Bootstrap 3
Полный список всех классов Bootstrap 3 с описанием и примерами:
| Класс | Описание | Пример | Категория |
|---|---|---|---|
.active |
Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover) |
Попробуй это | Tables |
.active |
Adds a gray background color to the active link in a default navbar. Adds a black background and a white color to the current link inside an inverted navbar. | Попробуй это | Navbar |
.active |
Adds a blue background color to the active list item in a list group | Попробуй это | List Groups |
.active |
Adds a blue background color to simulate a 'pressed' button | Попробуй это | Buttons |
.active |
Animates a striped progress bar | Попробуй это | Progress Bars |
.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 |
.affix |
The Affix plugin allows an element to become affixed (locked/sticky) to an area on the page. It toggles position:fixed on and off |
Попробуй это | Affix |
.alert |
Creates an alert message box | Попробуй это | Alerts |
.alert-danger |
Red alert box. Indicates a dangerous or potentially negative action | Попробуй это | Alerts |
.alert-dismissible |
Together with the .close class, this class is used to
close the alert |
Попробуй это | Alerts |
.alert-info |
Light-blue alert box. Indicates some information | Попробуй это | Alerts |
.alert-link |
Used on links inside alerts to add matching colored links | Попробуй это | Alerts |
.alert-success |
Green alert box. Indicates a successful or positive action | Попробуй это | Alerts |
.alert-warning |
Yellow alert box. Indicates caution should be taken with this action | Попробуй это | Alerts |
.badge |
Creates a circular badge (grey circle - often used as a numerical indicator) | Попробуй это | Badges |
.bg-danger |
Adds a red background color to an element. Represents danger or a negative action | Попробуй это | Helpers |
.bg-info |
Adds a light-blue background color to an element. Represents some information | Попробуй это | Helpers |
.bg-primary |
Adds a blue background color to an element. Represents something important | Попробуй это | Helpers |
.bg-success |
Adds a green background color to an element. Indicates success or a positive action | Попробуй это | Helpers |
.bg-warning |
Adds a yellow background color to an element. Represents a warning or a negative action | Попробуй это | Helpers |
.breadcrumb |
A pagination. Indicates the current page's location within a navigational hierarchy | Попробуй это | 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-danger |
Red button. Indicates danger or a negative action | Попробуй это | Buttons |
.btn-default |
Default button. White background and grey border | Попробуй это | Buttons |
.btn-group |
Groups buttons together on a single line | Попробуй это | Button Groups |
.btn-group-justified |
Makes a group of buttons span the entire width of the screen | Попробуй это | 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-xs |
Extra small button group (makes all buttons in a button group extra small) | Попробуй это | Button Groups |
.btn-group-vertical |
Makes a button group appear vertically stacked | Попробуй это | Button Groups |
.btn-info |
Light-blue button. Represents information | Попробуй это | Buttons |
.btn-link |
Makes a button look like a link (get button behavior) | Попробуй это | Buttons |
.btn-lg |
Large button | Попробуй это | Buttons |
.btn-primary |
Blue button. | Попробуй это | Buttons |
.btn-sm |
Small button | Попробуй это | Buttons |
.btn-success |
Green button. Indicates success or a positive action | Попробуй это | Buttons |
.btn-warning |
Yellow button. Represents warning or a negative action | Попробуй это | Buttons |
.btn-xs |
Extra small button | Попробуй это | Buttons |
.caption |
Adds a caption text inside a .thumbnail |
Попробуй это | Images |
.caret |
Creates a caret arrow icon , which indicates that the button is a dropdown | Попробуй это | Dropdowns |
.carousel |
Creates a carousel (slideshow) | Попробуй это | Carousel |
.carousel-caption |
Creates a caption text for each slide in the carousel | Попробуй это | Carousel |
.carousel-control |
Container for next and previous links | Попробуй это | 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 |
.center-block |
Centers any element (Sets an element to display:block with margin-right:auto and margin-left:auto) |
Попробуй это | Helpers |
.checkbox |
Container for checkboxes | Попробуй это | Inputs |
.checkbox-inline |
Makes multiple checkboxes appear on the same line | Попробуй это | Inputs |
.clearfix |
Clears floats | Попробуй это | Helpers |
.close |
Indicates a close icon | Попробуй это | Helpers |
.col-*-* |
Responsive grid (span 1-12 column). Extra small devices Phones (< 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column values can be 1-12. | Попробуй это | Grid |
.col-*-offset-* |
Move columns to the right. These classes increase the left margin of a column by * columns | Попробуй это | Grid |
.col-*-pull-* |
Changes the order of the grid columns | Попробуй это | Grid |
.col-*-push-* |
Changes the order of the grid columns | Попробуй это | Grid |
.collapse |
Indicates collapsible content - which can be hidden or shown on demand | Попробуй это | Collapse |
.collapse in |
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 |
.control-label |
Allows a label to be used for form validation | Попробуй это | Forms |
.danger |
Adds a red background to the table row (<tr> or table cell (<td>). Indicates a dangerous or potentially negative action |
Попробуй это | Tables |
.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 grey background color and a 'no-parking-sign' icon on hover) | Попробуй это | List Groups |
.divider |
Used to separate links in the dropdown menu with a thin horizontal border | Попробуй это | Dropdowns |
.dl-horizontal |
Lines up the terms <dt> and descriptions <dd> in <dl> elements side-by-side. Starts off like default
<dl>s, but when the browser window expands, it will line up side-by-side |
Попробуй это | Typography |
.dropdown |
Creates a toggleable menu that allows the user to choose one value from a predefined list | Попробуй это | Dropdowns |
.dropdown-header |
Used to add headers inside the dropdown menu | Попробуй это | 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 |
.dropup |
Indicates a dropup menu (upwards instead of downwards) | Попробуй это | Dropdowns |
.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-4by3 |
Container for embedded content. Creates an 4:3 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 |
.form-control |
Used on input, textarea, and select elements to span the entire width of the page and make them responsive | Попробуй это | Forms |
.form-control-feedback |
Form validation class | Попробуй это | Inputs 2 |
.form-control-static |
Adds plain text next to a form label within a horizontal form | Попробуй это | Inputs 2 |
.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-horizontal |
Aligns labels and groups of form controls in a horizontal layout | Попробуй это | Forms |
.glyphicon |
Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set | Попробуй это | Glyphicons |
.has-danger |
Adds a red color to the label and a red border to the input, as well as an error icon inside the input (used together with .has-feedback) |
Попробуй это | Forms |
.has-feedback |
Adds feedback icons for inputs (checkmark, warning and error signs) | Попробуй это | Forms |
.has-success |
Adds a green color to the label and a green border to the input, as well as a checkmark icon inside the input (used together with .has-feedback) |
Попробуй это | Forms |
.has-warning |
Adds a yellow/orange color to the label and a yellow/orange border to the input, as well as a checkmark icon inside the input (used together with .has-feedback) |
Попробуй это | Forms |
.help-block |
A block of help text that breaks onto a new line and may extend beyond one line. | Попробуй это | Input Sizing |
.hidden |
Forces an element to be hidden (display:none) |
Попробуй это | Helpers |
.hidden-* |
Hides content depending on screen size | Попробуй это | Helpers |
.hide |
Deprecated. Use .hidden instead |
Попробуй это | Helpers |
.h1 - .h6 |
Makes an element look like a heading of the chosen class (h1-h6) | Попробуй это | Typography |
.icon-bar |
Used in the navbar to create a hamburger menu (three horizontal bars) | Попробуй это | Navbar |
.icon-next |
Unicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon | Попробуй это | Carousel |
.icon-prev |
Unicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon | Попробуй это | Carousel |
.img-circle |
Shapes an image to a circle (not supported in IE8 and earlier) | Попробуй это | Images |
.img-responsive |
Makes an image responsive | Попробуй это | Images |
.img-rounded |
Adds rounded corners to an image | Попробуй это | Images |
.img-thumbnail |
Shapes an image to a thumbnail (borders) | Попробуй это | Images |
.in |
Fades in tabs | Попробуй это | Tabs |
.info |
Adds a light-blue background to the table row (<tr> or table cell (<td>). Indicates a neutral informative change or action |
Попробуй это | Tables |
.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 it as a 'help text' | Попробуй это | Inputs |
.input-group-lg |
Large input group | Попробуй это | Inputs |
.input-group-sm |
Small input group | Попробуй это | Inputs |
.input-group-addon |
Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field |
Попробуй это | Inputs |
.input-group-btn |
Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar |
Попробуй это | Inputs |
.input-lg |
Large input field | Попробуй это | Input Sizing |
.input-sm |
Small input field | Попробуй это | Input Sizing |
.invisible |
Makes an element invisible (visibility:hidden). Note: Even though the element is invisible, it will take up space on the page |
Попробуй это | Helpers |
.item |
Class added to each carousel item. May be text or images | Попробуй это | Carousel |
.jumbotron |
Creates a padded grey box with rounded corners that enlarges the font sizes of the text inside it. Creates a big box for calling extra attention to some special content or information | Попробуй это | Jumbotron |
.label |
Adds a grey rounded box to an element. Provides additional information about something (e.g. 'New') | Попробуй это | Labels |
.label-danger |
Red label | Попробуй это | Labels |
.label-info |
Light-blue label | Попробуй это | Labels |
.label-success |
Green label | Попробуй это | Labels |
.label-warning |
Yellow label | Попробуй это | Labels |
.lead |
Increase the font size and line height of a paragraph | Попробуй это | Typography |
.left |
Used to identify the left carousel control | Попробуй это | Carousel |
.list-group |
Creates a bordered list group for <li> elements |
Попробуй это | List Group |
.list-group-item |
Added to each <li> element in the list group |
Попробуй это | List Group |
.list-group-item-heading |
Creates a list group heading (used on other elements besides <li>) |
Попробуй это | List Group |
.list-group-item-text |
Used for item text inside the list group (used on other elements besides
<li>) |
Попробуй это | List Group |
.list-group-item-danger |
Red 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-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 (horizontal menu) | Попробуй это | Tabs |
.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 (like images or videos - often used for comments in a blog post etc) | Попробуй это | Media Objects |
.media-body |
Text that should appear next to a media object | Попробуй это | Media Objects |
.media-heading |
Creates a heading inside the media object | Попробуй это | Media Objects |
.media-list |
Nested media lists | Попробуй это | Media Objects |
.media-object |
Indicates a media object (image or video) | Попробуй это | 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 |
Sets the proper width and margin of 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-open |
Used on the <body> element to prevent page scrolling (overflow:hidden) |
Попробуй это | Modals |
.modal-sm |
Small modal (less width) | Попробуй это | Modals |
.modal-title |
The title of the modal | Попробуй это | Modals |
.nav nav-tabs |
Indicates a tabbed menu | Попробуй это | Tabs |
.nav nav-pills |
Indicates a pill menu | Попробуй это | Tabs |
.nav .navbar-nav |
Used on a <ul> container that contains the list items with links inside a navigation bar |
Попробуй это | Navbar |
.nav-justified |
Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered) | Попробуй это | Tabs |
.nav-stacked |
Vertically stack tabs or pills | Попробуй это | Tabs |
.nav-tabs |
Creates a tabbed menu | Попробуй это | Tabs |
.navbar |
Creates a navigation bar | Попробуй это | Navbar |
.navbar-brand |
Added to a link or a header element inside the navbar to represent a logo or a header | Попробуй это | Navbar |
.navbar-btn |
Vertically aligns a button inside a navbar | Попробуй это | Navbar |
.navbar-collapse |
Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) | Попробуй это | Navbar |
.navbar-default |
Creates a default navigation bar (light-grey background color) | Попробуй это | Navbar |
.navbar-fixed-bottom |
Makes the navbar stay at the bottom of the screen (sticky/fixed) | Попробуй это | Navbar |
.navbar-fixed-top |
Makes the navbar stay at the top of the screen (sticky/fixed) | Попробуй это | Navbar |
.navbar-form |
Added to form elements inside the navbar to vertically center them (proper padding) | Попробуй это | Navbar |
.navbar-header |
Added to a container element that contains the link/element that represent a logo or a header | Попробуй это | Navbar |
.navbar-inverse |
Creates a black navigation bar (instead of light-grey) | Попробуй это | Navbar |
.navbar-left |
Aligns nav links, forms, buttons, or text, in the navbar to the left | Попробуй это | Navbar |
.navbar-link |
Styles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect - white color in an inversed navbar and a black color in a default navbar) | Попробуй это | Navbar |
.navbar-nav |
Used on a <ul> container that contains the list items with links inside a navigation bar |
Попробуй это | Navbar |
.navbar-right |
Aligns nav links, forms, buttons, or text in the navbar to the right. | Попробуй это | Navbar |
.navbar-static-top |
Removes left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default) | Попробуй это | Navbar |
.navbar-text |
Vertical align any elements inside the navbar that are not links (ensures proper padding) | Попробуй это | Navbar |
.navbar-toggle |
Styles the button that should open the navbar on small screens. Often used together with three .icon-bar classes to indicate a toggleable menu icon (hamburger/bars) |
Попробуй это | Navbar |
.next |
Used in the carousel control to identity the next control | Попробуй это | Carousel |
.next |
Used to align pager buttons to the right side of the page (next button) | Попробуй это | Pager |
.page-header |
Adds a horizontal line under the heading (+ adds some extra space around the element) | Попробуй это | Page Header |
.pager |
Creates previous/next buttons (used on <ul> elements) |
Попробуй это | Pager |
.pagination |
Creates a pagination (Useful when you have a web site with lots of pages. Used on <ul> elements) |
Попробуй это | Pagination |
.pagination-lg |
Large pagination (each pagination link gets a font-size of 18px. Default is 14px) | Попробуй это | Pagination |
.pagination-sm |
Small pagination (each pagination link gets a font-size of 12px. Default is 14px) | Попробуй это | Pagination |
.panel |
Creates a bordered box with some padding around its content | Попробуй это | Panels |
.panel-body |
Container for content inside the panel | Попробуй это | Panels |
.panel-collapse |
Collapsible panel (toggle between hiding and showing panel(s)) | Попробуй это | Collapse |
.panel-danger |
Red panel. Indicates danger | Попробуй это | Panels |
.panel-info |
Light-blue panel. Indicates information | Попробуй это | Panels |
.panel-success |
Green panel. Indicates success | Попробуй это | Panels |
.panel-warning |
Yellow panel. Indicates warning | Попробуй это | Panels |
.panel-footer |
Creates a panel footer (light background color) | Попробуй это | Panels |
.panel-group |
Used to group many panels together. This removes the bottom margin below each panel | Попробуй это | Panels |
.panel-heading |
Creates a panel header (light background color) | Попробуй это | Panels |
.panel-title |
Used inside a .panel-heading to adjust the styling of the text (removes margins and adds a font-size of 16px) |
Попробуй это | Panels |
.popover |
Popup-box that appears when the user clicks on an element | Попробуй это | Popover |
.pre-scrollable |
Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar) |
Попробуй это | Helpers |
.prev |
Used in carousels to indicate a 'previous' link | Попробуй это | Carousel |
.previous |
Used to align pager buttons to the left side of the page (previous button) | Попробуй это | Pager |
.progress |
Container for progress bars | Попробуй это | Progress Bars |
.progress-bar |
Creates a progress bar | Попробуй это | Progress Bars |
.progress-bar-danger |
Red progress bar. Indicates danger | Попробуй это | Progress Bars |
.progress-bar-info |
Light-blue progress bar. Indicates information | Попробуй это | Progress Bars |
.progress-bar-striped |
Creates a striped progress bar | Попробуй это | Progress Bars |
.progress-bar-success |
Green progress bar. Indicates success | Попробуй это | Progress Bars |
.progress-bar-warning |
Yellow progress bar. Indicates warning | Попробуй это | Progress Bars |
.pull-left |
Float an element to the left | Попробуй это | Helpers |
.pull-right |
Float an element to the right | Попробуй это | Helpers |
.right |
Used to identify the right carousel control | Попробуй это | Carousel |
.row |
Container for responsive columns | Попробуй это | Grid |
.row-no-gutters |
Removes the gutters from a row and its columns | Попробуй это | Grid |
.show |
Shows an element (display:block) |
Попробуй это | Helpers |
.small |
Creates a lighter, secondary text in any heading | Попробуй это | Typography |
.sr-only |
Hides an element on all devices except for screen readers | Попробуй это | Helpers |
.sr-only-focusable |
Hides an element on all devices except for screen readers | Попробуй это | Helpers |
.success |
Adds a green background color to a table row (<tr> or table cell (<td>). Indicates success or a positive action |
Попробуй это | Tables |
.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-bordered |
Adds borders on all sides of the table and cells | Попробуй это | Tables |
.table-condensed |
Makes a table more compact by cutting cell padding in half | Попробуй это | 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) | Попробуй это | Tables |
.text-capitalize |
Indicates capitalized text | Попробуй это | Typography |
.text-center |
Center-aligns text | Попробуй это | Typography |
.text-danger |
Red text color. Indicates danger | Попробуй это | 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 | Попробуй это | Typography |
.text-justify |
Indicates justified text | Попробуй это | Typography |
.text-left |
Aligns the text to the left | Попробуй это | Typography |
.text-lowercase |
Changes text to lowercase | Попробуй это | Typography |
.text-muted |
Grey text color | Попробуй это | Typography |
.text-nowrap |
Prevents the text from wrapping | Попробуй это | Typography |
.text-primary |
Blue text color | Попробуй это | Typography |
.text-right |
Aligns text to the right | Попробуй это | Typography |
.text-success |
Green text color. Indicates success | Попробуй это | Typography |
.text-uppercase |
Makes text uppercase | Попробуй это | Typography |
.text-warning |
Yellow/orange text color. Indicates warning | Попробуй это | Typography |
.thumbnail |
Adds a border around an element (often images or videos) to make it look like a thumbnail | Попробуй это | Images |
.tooltip |
Popup-box that appears when the user moves the mouse pointer over an element | Попробуй это | Tooltip |
.visible-* |
Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use .hidden-* instead |
Попробуй это | Helpers |
.visible-print-block |
Displays the element (display:block) in print (pre)view |
Helpers | |
.visible-print-inline |
Displays the element (display:inline) in print (pre)view |
Helpers | |
.visible-print-inline-block |
Displays the element (display:inline-block) in print (pre)view |
Helpers | |
.hidden-print |
Hides the element (display:none) in print (pre)view |
Helpers | |
.warning |
Adds a yellow background color to the table row (<tr> or table cell (<td>). Indicates a warning |
Попробуй это | Tables |
.well |
Adds a rounded border around an element with a gray background color and some padding | Попробуй это | Wells |
.well-lg |
Large well (more padding) | Попробуй это | Wells |
.well-sm |
Small well (less padding) | Попробуй это | Wells |
В таблице выше показаны все доступные классы Bootstrap 3.
Совет: Чтобы увидеть полный список всех классов Bootstrap 4, перейдите на наш Справочник всех CSS классов Bootstrap 4.
