Bootstrap 3.2.0 Examples
Helper classes
- *-primary
- *-success
- *-info
- *-warning
- *-danger
text-hide text-hide text-muted text-primary text-success text-info text-warning text-danger
text-left
text-center
text-right
text-nowrap
text-justify
text-lowercase
text-uppercase
text-capitalize
bg-primary bg-success bg-info bg-warning bg-danger
pull-left pull-right
center-block
show / hidden / sr-only / sr-only-focusable hidden sr-only sr-only
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<span class="caret"></span>
Responsive utilities
| Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) |
Medium devices Desktops (≥992px) |
Large devices Desktops (≥1200px) |
| xs | sm | md | lg |
| visible-*-* / hidden-* / visible-print-* / hidden-print | |||
| visible-xs-block visible-sm-inline visible-md-inline-block / visible-print-xs | |||
Core CSS
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
- .container for a responsive fixed width container.
- .container-fluid for a full width container, spanning the entire width of your viewport.
Grid
- .row must be placed within a .container / .container-fluid for proper alignment and padding
- Content should be placed within .column, and only .column may be immediate children of .row
- .column create gutters (gaps between column content) via padding. That padding is offset in .row for the first and last column via negative margin on .row
- If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
| col-xs-* | col-sm-* | col-md-* | col-lg-* |
| col-*-offset-* | |||
| col-*-push-*(往右边推) / col-*-pull-*(往左边拉) | |||
Responsive column resets With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
Headings
h1 Secondary text
h2
h3
h4
h5
h6
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
Create lighter, secondary text in any heading with a generic <small> tag or the .small class.
Global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> receive a bottom margin of half their computed line-height (10px by default).
Make a paragraph stand out by adding .lead
mark
del
s
ins
u
strong
em
code
kbd
var
samp
abbr HTML
pre
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
.pre-scrollable
Address: 795 Folsom Ave, Suite 600.San Francisco, CA 94107
blockquote
.blockquote-reverse
- ul.list-unstyled
- ul.list-unstyled
- ul.list-unstyled
- ul.inline
- ul.inline
- ul.inline
- .dl-horizontal
- A description list is perfect for defining terms.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
| Column heading | Column heading | Column heading | Column heading | Column heading |
|---|---|---|---|---|
| tr.active | ||||
| Column content | Column content | Column content | Column content | Column content |
| tr.success | ||||
| Column content | Column content | Column content | Column content | Column content |
| tr.info | ||||
| Column content | Column content | Column content | Column content | Column content |
| tr.warning | ||||
| Column content | Column content | Column content | Column content | Column content |
| tr.danger | ||||
| td.active | td.success | td.info | td.warning | td.danger |
| Button | Appearance | Size | State | Display |
|---|---|---|---|---|
