Tham khảo các lớp Bootstrap
Danh sách đầy đủ của tất cả các lớp Bootstrap
Danh sách đầy đủ của tất cả các lớp Bootstrap với mô tả và ví dụ:
Class | Description | Example | Category |
---|---|---|---|
.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 |
Bảng trên hiển thị tất cả các lớp Bootstrap 3 có sẵn.
Mẹo: Để xem danh sách đầy đủ của tất cả các lớp Bootstrap 4 , hãy đi tới Tham khảo Tất cả các lớp CSS của Bootstrap 4 của chúng tôi .