Ý nghĩa của các Class trong Bootstrap 3 - Danh sách đầy đủ của tất cả các Class Bootstrap 3

Danh sách đầy đủ của tất cả các lớp Bootstrap 3

Class	Description	Example	Category
.active	Màu xám table row <tr> hoặc cell <td> (Dùng làm hover)	Try it	Tables
.active	Màu xám dùng với .navbar	Try it	Navbar
.active	Màu xanh với list-group-item	Try it	List Groups
.active	Màu xanh cho mô phỏng được nhấn button	Try it	Buttons
.active	Hiệu ứng chạy cho progress bar	Try it	Progress Bars
.active	Màu xanh item trong dropdown-menu	Try it	Dropdowns
.active	Màu xanh cho pagination	Try it	Pagination
.affix	Cố định khi chuyển đổi vị trí position:fixed on and off	Try it	Affix
.alert	Alert message box	Try it	Alerts
.alert-danger	Red alert box. Màu đỏ	Try it	Alerts
.alert-dismissible	Together with the .close class, this class is used to close the alert	Try it	Alerts
.alert-info	Light-blue alert box. Indicates some information	Try it	Alerts
.alert-link	Used on links inside alerts to add matching colored links	Try it	Alerts
.alert-success	Green alert box. Indicates a successful or positive action	Try it	Alerts
.alert-warning	Yellow alert box. Indicates caution should be taken with this action	Try it	Alerts
.badge	Creates a circular badge (grey circle - often used as a numerical indicator)	Try it	Badges
.bg-danger	Adds a red background color to an element. Represents danger or a negative action	Try it	Helpers
.bg-info	Adds a light-blue background color to an element. Represents some information	Try it	Helpers
.bg-primary	Adds a blue background color to an element. Represents something important	Try it	Helpers
.bg-success	Adds a green background color to an element. Indicates success or a positive action	Try it	Helpers
.bg-warning	Adds a yellow background color to an element. Represents a warning or a negative action	Try it	Helpers
.breadcrumb	A pagination. Indicates the current page's location within a navigational hierarchy	Try it	Pagination
.btn	Button (gray background and rounded corners)	Try it	Buttons
.btn-block	Creates a block level button that spans the entire width of the parent element	Try it	Buttons
.btn-danger	Red button. Indicates danger or a negative action	Try it	Buttons
.btn-default	Default button. White background and grey border	Try it	Buttons
.btn-group	Groups buttons together on a single line	Try it	Button Groups
.btn-group-justified	Makes a group of buttons span the entire width of the screen	Try it	Button Groups
.btn-group-lg	Large button group (makes all buttons in a button group larger - increased font-size and padding)	Try it	Button Groups
.btn-group-sm	Small button group (makes all buttons in a button group smaller)	Try it	Button Groups
.btn-group-xs	Extra small button group (makes all buttons in a button group extra small)	Try it	Button Groups
.btn-group-vertical	Makes a button group appear vertically stacked	Try it	Button Groups
.btn-info	Light-blue button. Represents information	Try it	Buttons
.btn-link	Makes a button look like a link (get button behavior)	Try it	Buttons
.btn-lg	Large button	Try it	Buttons
.btn-primary	Blue button.	Try it	Buttons
.btn-sm	Small button	Try it	Buttons
.btn-success	Green button. Indicates success or a positive action	Try it	Buttons
.btn-warning	Yellow button. Represents warning or a negative action	Try it	Buttons
.btn-xs	Extra small button	Try it	Buttons
.caption	Adds a caption text inside a .thumbnail	Try it	Images
.caret	Creates a caret arrow icon , which indicates that the button is a dropdown	Try it	Dropdowns
.carousel	Creates a carousel (slideshow)	Try it	Carousel
.carousel-caption	Creates a caption text for each slide in the carousel	Try it	Carousel
.carousel-control	Container for next and previous links	Try it	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)	Try it	Carousel
.carousel-inner	Container for slide items	Try it	Carousel
.center-block	Centers any element (Sets an element to display:block with margin-right:auto and margin-left:auto)	Try it	Helpers
.checkbox	Container for checkboxes	Try it	Inputs
.checkbox-inline	Makes multiple checkboxes appear on the same line	Try it	Inputs
.clearfix	Clears floats	Try it	Helpers
.close	Indicates a close icon	Try it	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.	Try it	Grid
.col-*-offset-*	Move columns to the right. These classes increase the left margin of a column by * columns	Try it	Grid
.col-*-pull-*	Changes the order of the grid columns	Try it	Grid
.col-*-push-*	Changes the order of the grid columns	Try it	Grid
.collapse	Indicates collapsible content - which can be hidden or shown on demand	Try it	Collapse
.collapse in	Show the collapsible content by default	Try it	Collapse
.container	Fixed width container with widths determined by screen sites. Equal margin on the left and right.	Try it	Containers
.container-fluid	A container that spans the full width of the screen	Try it	Containers
.control-label	Allows a label to be used for form validation	Try it	Forms
.danger	Adds a red background to the table row (<tr> or table cell (<td>). Indicates a dangerous or potentially negative action	Try it	Tables
.disabled	Disables a button (adds opacity and a "no-parking-sign" icon on hover)	Try it	Buttons
.disabled	Disables a dropdown item (adds a grey text color and a "no-parking-sign" icon on hover)	Try it	Dropdowns
.disabled	Disables a pagination link (cannot be clicked - adds a grey text color and a "no-parking-sign" icon on hover)	Try it	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)	Try it	List Groups
.divider	Used to separate links in the dropdown menu with a thin horizontal border	Try it	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	Try it	Typography
.dropdown	Creates a toggleable menu that allows the user to choose one value from a predefined list	Try it	Dropdowns
.dropdown-header	Used to add headers inside the dropdown menu	Try it	Dropdowns
.dropdown-menu	Adds the default styles for the dropdown menu container	Try it	Dropdowns
.dropdown-menu-right	Right-aligns a dropdown menu	Try it	Dropdowns
.dropdown-toggle	Used on the button that should hide and show (toggle) the dropdown menu	Try it	Dropdowns
.dropup	Indicates a dropup menu (upwards instead of downwards)	Try it	Dropdowns
.embed-responsive	Container for embedded content. Makes videos or slideshows scale properly on any device	Try it	Images
.embed-responsive-16by9	Container for embedded content. Creates an 16:9 aspect ratio embedded content	Try it	Images
.embed-responsive-4by3	Container for embedded content. Creates an 4:3 aspect ratio embedded content	Try it	Images
.embed-responsive-item	Used inside .embed-responsive. Scales the video nicely to the parent element	Try it	Images
.fade	Adds a fading effect when closing an alert box	Try it	Alerts
.form-control	Used on input, textarea, and select elements to span the entire width of the page and make them responsive	Try it	Forms
.form-control-feedback	Form validation class	Try it	Inputs 2
.form-control-static	Adds plain text next to a form label within a horizontal form	Try it	Inputs 2
.form-group	Container for form input and label	Try it	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)	Try it	Forms
.form-horizontal	Aligns labels and groups of form controls in a horizontal layout	Try it	Forms
.glyphicon	Creates an icon. Bootstrap provides 260 free glyphicons from the Glyphicons Halflings set	Try it	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)	Try it	Forms
.has-feedback	Adds feedback icons for inputs (checkmark, warning and error signs)	Try it	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)	Try it	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)	Try it	Forms
.help-block	A block of help text that breaks onto a new line and may extend beyond one line.	Try it	Input Sizing
.hidden	Forces an element to be hidden (display:none)	Try it	Helpers
.hidden-*	Hides content depending on screen size	Try it	Helpers
.hide	Deprecated. Use .hidden instead	Try it	Helpers
.h1 - .h6	Makes an element look like a heading of the chosen class (h1-h6)	Try it	Typography
.icon-bar	Used in the navbar to create a hamburger menu (three horizontal bars)	Try it	Navbar
.icon-next	Unicode icon (arrow pointing right), used in carousels. This is often replaced with a glyphicon	Try it	Carousel
.icon-prev	Unicode icon (arrow pointing left), used in carousels. This is often replaced with a glyphicon	Try it	Carousel
.img-circle	Shapes an image to a circle (not supported in IE8 and earlier)	Try it	Images
.img-responsive	Makes an image responsive	Try it	Images
.img-rounded	Adds rounded corners to an image	Try it	Images
.img-thumbnail	Shapes an image to a thumbnail (borders)	Try it	Images
.in	Fades in tabs	Try it	Tabs
.info	Adds a light-blue background to the table row (<tr> or table cell (<td>). Indicates a neutral informative change or action	Try it	Tables
.initialism	Displays the text inside an <abbr> element in a slightly smaller font size	Try it	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"	Try it	Inputs
.input-group-lg	Large input group	Try it	Inputs
.input-group-sm	Small input group	Try it	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	Try it	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	Try it	Inputs
.input-lg	Large input field	Try it	Input Sizing
.input-sm	Small input field	Try it	Input Sizing
.invisible	Makes an element invisible (visibility:hidden). Note: Even though the element is invisible, it will take up space on the page	Try it	Helpers
.item	Class added to each carousel item. May be text or images	Try it	Carousel
.jumbotron	Tạo một hộp màu xám có đệm với các góc tròn làm tăng kích thước phông chữ của văn bản bên trong nó.	Try it	Jumbotron
.label	Thêm một hộp tròn màu xám cho một phần tử. Cung cấp thông tin bổ sung về nội dung nào đó (ví dụ: "Mới")	Try it	Labels
.label-danger	Red label	Try it	Labels
.label-info	Light-blue label	Try it	Labels
.label-success	Green label	Try it	Labels
.label-warning	Yellow label	Try it	Labels
.lead	Tăng kích thước phông chữ và chiều cao dòng của một đoạn	Try it	Typography
.left	Căn bên trái	Try it	Carousel
.list-group	Creates a bordered list group for <li> elements	Try it	List Group
.list-group-item	Added to each <li> element in the list group	Try it	List Group
.list-group-item-heading	Creates a list group heading (used on other elements besides <li>)	Try it	List Group
.list-group-item-text	Used for item text inside the list group (used on other elements besides <li>)	Try it	List Group
.list-group-item-danger	Background màu đỏ cho item trong .list-group	Try it	List Group
.list-group-item-info	Background màu Màu lam nhạt cho item trong .list-group	Try it	List Group
.list-group-item-success	Background màu màu xanh lá cho item trong .list-group	Try it	List Group
.list-group-item-warning	Background màu vàng cho item trong .list-group	Try it	List Group
.list-inline	<ul><li> List trên một dòng	Try it	Tabs
.list-unstyled	Xóa dấu chấm <ul> or <ol>	Try it	Typography
.mark	Highlights text: Highlighted text	Try it	Typography
.media	Aligns media objects (like images or videos - often used for comments in a blog post etc)	Try it	Media Objects
.media-body	Text that should appear next to a media object	Try it	Media Objects
.media-heading	Creates a heading inside the media object	Try it	Media Objects
.media-list	Nested media lists	Try it	Media Objects
.media-object	Indicates a media object (image or video)	Try it	Media Objects
.modal	Identifies the content as a modal and brings focus to it	Try it	Modals
.modal-body	Defines the style for the body of the modal. Add any HTML markup here (p, img, etc)	Try it	Modals
.modal-content	Styles the modal (border, background-color, etc). Inside this, add the modal's header, body and footer, if needed	Try it	Modals
.modal-dialog	Sets the proper width and margin of the modal	Try it	Modals
.modal-footer	The footer of the modal (often contains an action button and a close button)	Try it	Modals
.modal-header	The header of the modal (often contains a title and a close button)	Try it	Modals
.modal-lg	Large modal (wider than default)	Try it	Modals
.modal-open	Used on the <body> element to prevent page scrolling (overflow:hidden)	Try it	Modals
.modal-sm	Small modal (less width)	Try it	Modals
.modal-title	The title of the modal	Try it	Modals
.nav nav-tabs	Indicates a tabbed menu	Try it	Tabs
.nav nav-pills	Indicates a pill menu	Try it	Tabs
.nav .navbar-nav	Used on a <ul> container that contains the list items with links inside a navigation bar	Try it	Navbar
.nav-justified	Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered)	Try it	Tabs
.nav-stacked	Vertically stack tabs or pills	Try it	Tabs
.nav-tabs	Creates a tabbed menu	Try it	Tabs
.navbar	Creates a navigation bar	Try it	Navbar
.navbar-brand	Added to a link or a header element inside the navbar to represent a logo or a header	Try it	Navbar
.navbar-btn	Vertically aligns a button inside a navbar	Try it	Navbar
.navbar-collapse	Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets)	Try it	Navbar
.navbar-default	Creates a default navigation bar (light-grey background color)	Try it	Navbar
.navbar-fixed-bottom	Makes the navbar stay at the bottom of the screen (sticky/fixed)	Try it	Navbar
.navbar-fixed-top	Makes the navbar stay at the top of the screen (sticky/fixed)	Try it	Navbar
.navbar-form	Added to form elements inside the navbar to vertically center them (proper padding)	Try it	Navbar
.navbar-header	Added to a container element that contains the link/element that represent a logo or a header	Try it	Navbar
.navbar-inverse	Creates a black navigation bar (instead of light-grey)	Try it	Navbar
.navbar-left	Aligns nav links, forms, buttons, or text, in the navbar to the left	Try it	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)	Try it	Navbar
.navbar-nav	Used on a <ul> container that contains the list items with links inside a navigation bar	Try it	Navbar
.navbar-right	Aligns nav links, forms, buttons, or text in the navbar to the right.	Try it	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)	Try it	Navbar
.navbar-text	Vertical align any elements inside the navbar that are not links (ensures proper padding)	Try it	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)	Try it	Navbar
.next	Used in the carousel control to identity the next control	Try it	Carousel
.next	Used to align pager buttons to the right side of the page (next button)	Try it	Pager
.page-header	Adds a horizontal line under the heading (+ adds some extra space around the element)	Try it	Page Header
.pager	Creates previous/next buttons (used on <ul> elements)	Try it	Pager
.pagination	Creates a pagination (Useful when you have a web site with lots of pages. Used on <ul> elements)	Try it	Pagination
.pagination-lg	Large pagination (each pagination link gets a font-size of 18px. Default is 14px)	Try it	Pagination
.pagination-sm	Small pagination (each pagination link gets a font-size of 12px. Default is 14px)	Try it	Pagination
.panel	Creates a bordered box with some padding around its content	Try it	Panels
.panel-body	Container for content inside the panel	Try it	Panels
.panel-collapse	Collapsible panel (toggle between hiding and showing panel(s))	Try it	Collapse
.panel-danger	Red panel. Indicates danger	Try it	Panels
.panel-info	Light-blue panel. Indicates information	Try it	Panels
.panel-success	Green panel. Indicates success	Try it	Panels
.panel-warning	Yellow panel. Indicates warning	Try it	Panels
.panel-footer	Creates a panel footer (light background color)	Try it	Panels
.panel-group	Used to group many panels together. This removes the bottom margin below each panel	Try it	Panels
.panel-heading	Creates a panel header (light background color)	Try it	Panels
.panel-title	Used inside a .panel-heading to adjust the styling of the text (removes margins and adds a font-size of 16px)	Try it	Panels
.popover	Popup-box that appears when the user clicks on an element	Try it	Popover
.pre-scrollable	Makes a <pre> element scrollable (max-height of 350px and provide a y-axis scrollbar)	Try it	Helpers
.prev	Used in carousels to indicate a "previous" link	Try it	Carousel
.previous	Used to align pager buttons to the left side of the page (previous button)	Try it	Pager
.progress	Container for progress bars	Try it	Progress Bars
.progress-bar	Creates a progress bar	Try it	Progress Bars
.progress-bar-danger	Red progress bar. Indicates danger	Try it	Progress Bars
.progress-bar-info	Light-blue progress bar. Indicates information	Try it	Progress Bars
.progress-bar-striped	Creates a striped progress bar	Try it	Progress Bars
.progress-bar-success	Green progress bar. Indicates success	Try it	Progress Bars
.progress-bar-warning	Yellow progress bar. Indicates warning	Try it	Progress Bars
.pull-left	Kéo sang trái	Try it	Helpers
.pull-right	Keo sang phải	Try it	Helpers
.right	Phải	Try it	Carousel
.row	Container for responsive columns	Try it	Grid
.show	Shows an element (display:block)	Try it	Helpers
.small	Creates a lighter, secondary text in any heading	Try it	Typography
.sr-only	Hides an element on all devices except for screen readers	Try it	Helpers
.sr-only-focusable	Hides an element on all devices except for screen readers	Try it	Helpers
.success	Green background color cho table row (<tr> or table cell (<td>).	Try it	Tables
.tab-content	Used together with .tab-pane to creates toggleable/dynamic tabs/pills	Try it	Tabs
.tab-pane	Used together with .tab-content to creates toggleable/dynamic tabs/pills	Try it	Tabs
.table	Adds basic styling to a table (padding, bottom borders, etc)	Try it	Tables
.table-bordered	Adds borders on all sides of the table and cells	Try it	Tables
.table-condensed	Makes a table more compact by cutting cell padding in half	Try it	Tables
.table-hover	Creates a hoverable table (adds a grey background color on table rows on hover)	Try it	Tables
.table-responsive	Makes a table responsive (adds a horizontal scrollbar when needed)	Try it	Tables
.text-capitalize	Indicates capitalized text	Try it	Typography
.text-center	Center-aligns text	Try it	Typography
.text-danger	Red text color. Indicates danger	Try it	Typography
.text-hide	Hides text (helps replace an element's text content with a background image)	Try it	Typography
.text-info	Light-blue text color. Indicates information	Try it	Typography
.text-justify	Indicates justified text	Try it	Typography
.text-left	Aligns the text to the left	Try it	Typography
.text-lowercase	Changes text to lowercase	Try it	Typography
.text-muted	Grey text color	Try it	Typography
.text-nowrap	Prevents the text from wrapping	Try it	Typography
.text-primary	Blue text color	Try it	Typography
.text-right	Aligns text to the right	Try it	Typography
.text-success	Green text color. Indicates success	Try it	Typography
.text-uppercase	Makes text uppercase	Try it	Typography
.text-warning	Yellow/orange text color. Indicates warning	Try it	Typography
.thumbnail	Adds a border around an element (often images or videos) to make it look like a thumbnail	Try it	Images
.tooltip	Popup-box that appears when the user moves the mouse pointer over an element	Try it	Tooltip
.visible-*	Deprecated as of v3.2.0. Used to show and/or hide content by device. Note: Use .hidden-* instead	Try it	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	Yellow background color cho table row (<tr> or table cell (<td>).	Try it	Tables
.well	Adds a rounded border around an element with a gray background color and some padding	Try it	Wells
.well-lg	Large well (more padding)	Try it	Wells
.well-sm	Small well (less padding)	Try it	Wells