Grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Make Sure to Always Plan a Responsive Layout
It takes a minute or two extra – not more than that. Just make sure you always make your UI responsive. It is as simple as considering how .col-xx-x
classes break down on smaller screens.
Introduction
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
- Rows must be placed within a
.container
(fixed-width) or.container-fluid
(full-width) for proper alignment and padding. - Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Predefined grid classes like
.row
and.col-xs-4
are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts. - Columns create gutters (gaps between column content) via
padding
. That padding is offset in rows for the first and last column via negative margin on.row
s. - The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
- Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three
.col-xs-4
. - 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, e.g. 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.
Look to the examples for applying these principles to your code.
Media queries
We use the following media queries in our Less files to create the key breakpoints in our grid system.
We occasionally expand on these media queries to include a max-width
to limit CSS to a narrower set of devices.
A Word About Pixel Values And Viewport Sizes
The most important information is that these viewport pixel values don't necessarily correlate with the native resolution of any mobile device.
By setting <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
, the HTML header forces Webkit/Chromium into a rendering mode which simulates (on phones) a 240x320px resolution. Scaling and antialiasing work correctly, so a much higher screen resolution means crystal clear rendering regardless.
This allows Bootstrap's CSS to test against a pixel width of the viewport. If we don't define the scale of the viewport, a phone is indistinguishable from a tablet, laptop or desktop screen.
In summary, rejoice, but don't pay too much attention to the pixel values used by Bootstrap.
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
Container width | None (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
# of columns | 12 | |||
Column width | Auto | ~62px | ~81px | ~97px |
Gutter width | 30px (15px on each side of a column) | |||
Nestable | Yes | |||
Offsets | Yes | |||
Column ordering | Yes |
Example: Stacked-to-horizontal
Using a single set of .col-md-*
grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row
.
Example: Fluid container
Turn any fixed-width grid layout into a full-width layout by changing your outermost .container
to .container-fluid
.
Example: Mobile and desktop
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-*
.col-md-*
to your columns. See the example below for a better idea of how it all works.
Example: Mobile, tablet, desktop
Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-*
classes.
Example: Column wrapping
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.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
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.
Resize your viewport or check it out on your phone for an example.
In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.
Offsetting columns
Move columns to the right using .col-md-offset-*
classes. These classes increase the left margin of a column by *
columns. For example, .col-md-offset-4
moves .col-md-4
over four columns.
You can also override offsets from lower grid tiers with .col-*-offset-0
classes.
Nesting columns
To nest your content with the default grid, add a new .row
and set of .col-sm-*
columns within an existing .col-sm-*
column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
Column ordering
Easily change the order of our built-in grid columns with .col-md-push-*
and .col-md-pull-*
modifier classes.
Less mixins and variables
In addition to prebuilt grid classes for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.
Variables
Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
Mixins
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
Example usage
You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
Typography
Headings
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.
h1. Bootstrap heading | Semibold 36px |
h2. Bootstrap heading | Semibold 30px |
h3. Bootstrap heading | Semibold 24px |
h4. Bootstrap heading | Semibold 18px |
h5. Bootstrap heading | Semibold 14px |
h6. Bootstrap heading | Semibold 12px |
Create lighter, secondary text in any heading with a generic <small>
tag or the .small
class.
h1. Bootstrap heading Secondary text |
h2. Bootstrap heading Secondary text |
h3. Bootstrap heading Secondary text |
h4. Bootstrap heading Secondary text |
h5. Bootstrap heading Secondary text |
h6. Bootstrap heading Secondary text |
Body copy
Bootstrap's 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>
(paragraphs) receive a bottom margin of half their computed line-height (10px by default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Lead body copy
Make a paragraph stand out by adding .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Built with Less
The typographic scale is based on two Less variables in variables.less: @font-size-base
and @line-height-base
. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
Inline text elements
Marked text
For highlighting a run of text due to its relevance in another context, use the <mark>
tag.
You can use the mark tag to highlight text.
Deleted text
For indicating blocks of text that have been deleted use the <del>
tag.
This line of text is meant to be treated as deleted text.
Strikethrough text
For indicating blocks of text that are no longer relevant use the <s>
tag.
This line of text is meant to be treated as no longer accurate.
Inserted text
For indicating additions to the document use the <ins>
tag.
This line of text is meant to be treated as an addition to the document.
Underlined text
To underline text use the <u>
tag.
This line of text will render as underlined
Make use of HTML's default emphasis tags with lightweight styles.
Small text
For de-emphasizing inline or blocks of text, use the <small>
tag to set text at 85% the size of the parent. Heading elements receive their own font-size
for nested <small>
elements.
You may alternatively use an inline element with .small
in place of any <small>
.
This line of text is meant to be treated as fine print.
Bold
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
Italics
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
Alternate elements
Feel free to use <b>
and <i>
in HTML5. <b>
is meant to highlight words or phrases without conveying additional importance while <i>
is mostly for voice, technical terms, etc.
Alignment classes
Easily realign text to components with text alignment classes.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
Transformation classes
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
Capitalized text.
Abbreviations
Stylized implementation of HTML's <abbr>
element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title
attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.
Basic abbreviation
An abbreviation of the word attribute is attr.
Initialism
Add .initialism
to an abbreviation for a slightly smaller font-size.
HTML is the best thing since sliced bread.
Addresses
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>
.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
first.last@example.com
OC Page header
Each Page/View has a <h1>
heading, which may be extended by form elements, .html'; return false;">, callouts, static text or pictures
Exempt from this rule are the following pages/views:
OPC
-
Page Title
/opc/pageUrl/
-
Page Title
/opc/pageUrl/
-
Page Title
/opc/pageUrl/
-
Page Title
/opc/pageUrl/
CMP
All CMP Pages
???
All ??? Pages
Examples
RfQ Item Temp Labour
Requisition Cart(22-11-2015) € 1,423.75
- ID
- C160001100
- Requested by
- opc/opc, 0 days ago
- Created on
- 08/22/2016 – 14:51h
BS 3.3 Page header
A simple shell for an h1
to appropriately space out and segment sections of content on a page. It can utilize the h1
's default small
element, as well as most other components (with additional styles).
Example page header Subtext for header
Code
Inline
Wrap inline snippets of code with <code>
.
<section>
should be wrapped as inline. <section>
should be wrapped as inline. <section>
should be wrapped as inline. <section>
should be wrapped as inline. User input
Use the <kbd>
to indicate input that is typically entered via keyboard.
To edit settings, press ctrl + ,
Basic block
Use <pre>
for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
<p>Sample text here...</p>
You may optionally add the .pre-scrollable
class, which will set a max-height of 350px and provide a y-axis scrollbar.
Variables
For indicating variables use the <var>
tag.
y = mx + b
Sample output
For indicating blocks sample output from a program use the <samp>
tag.
This text is meant to be treated as sample output from a computer program.
Images
Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive
class. This applies max-width: 100%;
, height: auto;
and display: block;
to the image so that it scales nicely to the parent element.
To center images which use the .img-responsive
class, use .center-block
instead of .text-center
. See the helper classes section for more details about .center-block
usage.
SVG images and IE 8-10
In Internet Explorer 8-10, SVG images with .img-responsive
are disproportionately sized. To fix this, add width: 100% \9;
where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
Image shapes
Add classes to an <img>
element to easily style images in any project.
Cross-browser compatibility
Keep in mind that Internet Explorer 8 lacks support for rounded corners.
Jumbotron
A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
To make the jumbotron full width, and without rounded corners, place it outside all .container
s and instead add a .container
within.
Helper classes
Contextual colors
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Dealing with specificity
Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span>
with the class.
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only
class.
Contextual backgrounds
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Dealing with specificity
Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div>
with the class.
Conveying meaning to assistive technologies
As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
Close icon
Use the generic close icon for dismissing content like modals and alerts.
Carets
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
Quick floats
Float an element to the left or right with a class. !important
is included to avoid specificity issues. Classes can also be used as mixins.
Center content blocks
Set an element to display: block
and center via margin
. Available as a mixin and class.
Clearfix
Easily clear float
s by adding .clearfix
to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
Showing and hiding content
Force an element to be shown or hidden (including for screen readers) with the use of .show
and .hidden
classes. These classes use !important
to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.
.hide
is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden
or .sr-only
instead.
Furthermore, .invisible
can be used to toggle only the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document.
Screen reader and keyboard navigation content
Hide an element to all devices except screen readers with .sr-only
. Combine .sr-only
with .sr-only-focusable
to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.
Image replacement
Utilize the .text-hide
class or mixin to help replace an element's text content with a background image.
Responsive utilities
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
Available classes
Use a single or combination of the available classes for toggling content across viewport breakpoints.
Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
---|---|---|---|---|
.visible-xs-* | Visible | Hidden | Hidden | Hidden |
.visible-sm-* | Hidden | Visible | Hidden | Hidden |
.visible-md-* | Hidden | Hidden | Visible | Hidden |
.visible-lg-* | Hidden | Hidden | Hidden | Visible |
.hidden-xs | Hidden | Visible | Visible | Visible |
.hidden-sm | Visible | Hidden | Visible | Visible |
.hidden-md | Visible | Visible | Hidden | Visible |
.hidden-lg | Visible | Visible | Visible | Hidden |
As of v3.2.0, the .visible-*-*
classes for each breakpoint come in three variations, one for each CSS display
property value listed below.
Group of classes | CSS display |
---|---|
.visible-*-block | display: block; |
.visible-*-inline | display: inline; |
.visible-*-inline-block | display: inline-block; |
So, for extra small (xs
) screens for example, the available .visible-*-*
classes are: .visible-xs-block
, .visible-xs-inline
, and .visible-xs-inline-block
.
The classes .visible-xs
, .visible-sm
, .visible-md
, and .visible-lg
also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block
, except with additional special cases for toggling <table>
-related elements.
Print classes
Similar to the regular responsive classes, use these for toggling content for print.
Classes | Browser | |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block | Hidden | Visible |
.hidden-print | Visible | Hidden |
The class .visible-print
also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block
, except with additional special cases for <table>
-related elements.
Test cases
Resize your browser or load on different devices to test the responsive utility classes.
Visible on...
Green checkmarks indicate the element is visible in your current viewport.
Hidden on...
Here, green checkmarks also indicate the element is hidden in your current viewport.
Labels
Example
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Available variations
Add any of the below mentioned modifier classes to change the appearance of a label.
Have tons of labels?
Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block
element (like an icon). The way around this is setting display: inline-block;
. For context and an example, see #13219.
DL Labels
Labels can be constructed from <DL>
elements. These labels consist of at least two strings, each wrapped in its own element: attrib <dt>
and value <dd>
.
A single dl.label
can contain multiple <dt>
and <dd>
elements in every possible combination.
- ID
- A99999
- 29
- days left
- Valid from
- 29/11/2016
- to
- 5/1/2017
- 3:16
- hours left
- 35
- minutes left
- 23
- minutes overdue
- 927
- products created
Badges
Easily highlight new or unread items by adding a <span class="badge">
to links, Bootstrap navs, and more.
Self collapsing
When there are no new or unread items, badges will simply collapse (via CSS's :empty
selector) provided no content exists within.
Cross-browser compatibility
Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty
selector.
Adapts to active nav states
Built-in styles are included for placing badges in active states in pill navigations.
Thumbnails
Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as Masonry, Isotope, or Salvattore.
Default example
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
Custom content
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Callouts
Callouts (as used in the Bootstrap documentation) are used instead of the standard alerts.
Each callout must contain a headline <h4>
and at least one content element, default is <p>
.
Info Callout
Use this to explain to the user what is happening, or how to use a complex interface.
Warning Callout
Warn the user of something that is about to happen.
Danger Callout
Warn the user of something that has happened.
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Examples
Wrap any text and an optional dismiss button in .alert
and one of the four contextual classes (e.g., .alert-success
) for basic alert messages.
No default class
Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
Dismissible alerts
Build on any alert by adding an optional .alert-dismissible
and close button.
Requires JavaScript alert plugin
For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.
Ensure proper behavior across all devices
Be sure to use the <button>
element with the data-dismiss="alert"
data attribute.
Links in alerts
Use the .alert-link
utility class to quickly provide matching colored links within any alert.
Progress bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Cross-browser compatibility
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
Content Security Policy (CSP) compatibility
If your website has a Content Security Policy (CSP) which doesn't allow style-src 'unsafe-inline'
, then you won't be able to use inline style
attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets element.style.width
) or using custom CSS classes.
Basic example
Default progress bar.
With label
Remove the <span>
with .sr-only
class from within the progress bar to show a visible percentage.
To ensure that the label text remains legible even for low percentages, consider adding a min-width
to the progress bar.
Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.
Striped
Uses a gradient to create a striped effect. Not available in IE9 and below.
Animated
Add .active
to .progress-bar-striped
to animate the stripes right to left. Not available in IE9 and below.
Stacked
Place multiple bars into the same .progress
to stack them.
Media object
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
Default media
The default media displays a media object (images, video, audio) to the left or right of a content block.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.The classes .pull-left
and .pull-right
also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left
and .media-right
, except that .media-right
should be placed after the .media-body
in the html.
Media alignment
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
Top aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Bottom aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Media list
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
-
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Responsive embed
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to <iframe>
, <embed>
, <video>
, and <object>
elements; optionally use an explicit descendant class .embed-responsive-item
when you want to match the styling for other attributes.
Pro-Tip! You don't need to include frameborder="0"
in your <iframe>
s as we override that for you.
Wells
Default well
Use the well as a simple effect on an element to give it an inset effect.
Optional classes
Control padding and rounded corners with two optional modifier classes.
Panels
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Basic example
By default, all the .panel
does is apply some basic border and padding to contain some content.
Panel with heading
Easily add a heading container to your panel with .panel-heading
. You may also include any <h1>
-<h6>
with a .panel-title
class to add a pre-styled heading. However, the font sizes of <h1>
-<h6>
are overridden by .panel-heading
.
For proper link coloring, be sure to place links in headings within .panel-title
.
Panel title
Panel with footer
Wrap buttons or secondary text in .panel-footer
. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Contextual alternatives
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Panel title
Panel title
Panel title
Panel title
Panel title
With tables
Add any non-bordered .table
within a panel for a seamless design. If there is a .panel-body
, we add an extra border to the top of the table for separation.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
If there is no panel body, the component moves from panel header to table without interruption.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
With list groups
Easily include full-width list groups within any panel.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros