THE WORLD'S LARGEST WEB DEVELOPER SITE

Bootstrap Classes 参考


Complete List of All Bootstrap Classes

Complete list of all Bootstrap classes with description and examples:

Class Description Example Category
.active Adds a grey background color to the table row (<tr> or table cell (<td>) (same color used on hover) Try it 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. Try it 导航栏
.active Adds a blue background color to the active list item in a list group Try it 列表组s
.active Adds a blue background color to simulate a "pressed" button Try it Buttons
.active Animates a striped progress bar Try it 进度条
.active Adds a blue background color to the active dropdown item in a dropdown Try it Dropdowns
.active Adds a blue background color to the active pagination link (to highlight the current page) Try it 分页
.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 Try it Affix
.alert Creates an alert message box Try it 警报
.alert-danger Red alert box. Indicates a dangerous or potentially negative action Try it 警报
.alert-dismissible Together with the .close class, this class is used to close the alert Try it 警报
.alert-info Light-blue alert box. Indicates some information Try it 警报
.alert-link Used on links inside alerts to add matching colored links Try it 警报
.alert-success Green alert box. Indicates a successful or positive action Try it 警报
.alert-warning Yellow alert box. Indicates caution should be taken with this action Try it 警报
.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 分页
.btn Creates a basic 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 按钮组s
.btn-group-justified Makes a group of buttons span the entire width of the screen Try it 按钮组s
.btn-group-lg Large button group (makes all buttons in a button group larger - increased font-size and padding) Try it 按钮组s
.btn-group-sm Small button group (makes all buttons in a button group smaller) Try it 按钮组s
.btn-group-xs Extra small button group (makes all buttons in a button group extra small) Try it 按钮组s
.btn-group-vertical Makes a button group appear vertically stacked Try it 按钮组s
.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 明确s 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 分页
.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 列表组s
.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. 规模s the video nicely to the parent element Try it Images
.fade Adds a fading effect when closing an alert box Try it 警报
.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 雕ly Halflings set Try it 雕ly
.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 导航栏
.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 形状 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 形状 an image to a thumbnail (borders) Try it Images
.in Fades in tabs Try it 标签
.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 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 Try it Jumbotron
.label Adds a grey rounded box to an element. Provides additional information about something (e.g. "New") Try it 标签
.label-danger Red label Try it 标签
.label-info Light-blue label Try it 标签
.label-success Green label Try it 标签
.label-warning Yellow label Try it 标签
.lead Increase the font size and line height of a paragraph Try it Typography
.left Used to identify the left carousel control Try it Carousel
.list-group Creates a bordered list group for <li> elements Try it 列表组
.list-group-item Added to each <li> element in the list group Try it 列表组
.list-group-item-heading Creates a list group heading (used on other elements besides <li>) Try it 列表组
.list-group-item-text Used for item text inside the list group (used on other elements besides <li>) Try it 列表组
.list-group-item-danger Red background color for a list item in a list group Try it 列表组
.list-group-item-info Light-blue background color for a list item in a list group Try it 列表组
.list-group-item-success Green background color for a list item in a list group Try it 列表组
.list-group-item-warning Yellow background color for a list item in a list group Try it 列表组
.list-inline Places all list items on a single line (horizontal menu) Try it 标签
.list-unstyled Removes all default list-style (bullets, left margin, etc.) styling from a <ul> or <ol> list 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 标签
.nav nav-pills Indicates a pill menu Try it 标签
.nav .navbar-nav Used on a <ul> container that contains the list items with links inside a navigation bar Try it 导航栏
.nav-justified Centers tabs/pills. Note that on screens smaller than 768px the items are stacked (content will remain centered) Try it 标签
.nav-stacked Vertically stack tabs or pills Try it 标签
.nav-tabs Creates a tabbed menu Try it 标签
.navbar Creates a navigation bar Try it 导航栏
.navbar-brand Added to a link or a header element inside the navbar to represent a logo or a header Try it 导航栏
.navbar-btn Vertically aligns a button inside a navbar Try it 导航栏
.navbar-collapse Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) Try it 导航栏
.navbar-default Creates a default navigation bar (light-grey background color) Try it 导航栏
.navbar-fixed-bottom Makes the navbar stay at the bottom of the screen (sticky/fixed) Try it 导航栏
.navbar-fixed-top Makes the navbar stay at the top of the screen (sticky/fixed) Try it 导航栏
.navbar-form Added to form elements inside the navbar to vertically center them (proper padding) Try it 导航栏
.navbar-header Added to a container element that contains the link/element that represent a logo or a header Try it 导航栏
.navbar-inverse Creates a black navigation bar (instead of light-grey) Try it 导航栏
.navbar-left Aligns nav links, forms, buttons, or text, in the navbar to the left Try it 导航栏
.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-nav Used on a <ul> container that contains the list items with links inside a navigation bar Try it 导航栏
.navbar-right Aligns nav links, forms, buttons, or text in the navbar to the right. Try it 导航栏
.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-text Vertical align any elements inside the navbar that are not links (ensures proper padding) Try it 导航栏
.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 导航栏
.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-lg Large pagination (each pagination link gets a font-size of 18px. Default is 14px) Try it 分页
.pagination-sm Small pagination (each pagination link gets a font-size of 12px. Default is 14px) Try it 分页
.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 可折叠 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-bar Creates a progress bar Try it 进度条
.progress-bar-danger Red progress bar. Indicates danger Try it 进度条
.progress-bar-info Light-blue progress bar. Indicates information Try it 进度条
.progress-bar-striped Creates a striped progress bar Try it 进度条
.progress-bar-success Green progress bar. Indicates success Try it 进度条
.progress-bar-warning Yellow progress bar. Indicates warning Try it 进度条
.pull-left 浮动 an element to the left Try it Helpers
.pull-right 浮动 an element to the right Try it Helpers
.right Used to identify the right carousel control Try it Carousel
.row Container for responsive columns Try it Grid
.row-no-gutters Removes the gutters from a row and its 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 Adds a green background color to a table row (<tr> or table cell (<td>). Indicates success or a positive action Try it Tables
.tab-content Used together with .tab-pane to creates toggleable/dynamic tabs/pills Try it 标签
.tab-pane Used together with .tab-content to creates toggleable/dynamic tabs/pills Try it 标签
.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 Adds a yellow background color to the table row (<tr> or table cell (<td>). Indicates a warning 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

The table above shows all available Bootstrap 3 classes.

Tip: To see the full list of all Bootstrap 4 classes, go to our All Bootstrap 4 CSS Classes 参考.




W3Schools is optimized for learning, testing, and training. 示例 might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

W3Schools.com