Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
-Markup
-Wrap your content in a div like so:
Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
+Markup
+Wrap your content in a div like so:
<div class="hero-unit"> <h1>Heading</h1> @@ -1445,31 +1416,29 @@ </p> </div>+ +
Hello, world!
+This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
+Hello, world!
-This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
- -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 most other components (with additional styles).
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 most other components (with additional styles).
Example page header Subtext for header
Example page header Subtext for header
-<div class="page-header"> <h1>Example page header</h1> </div>-
Thumbnails Grids of images, videos, text, and more
Default thumbnails
-By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
- -Highly customizable
-With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
--
-
- - - -
- - - -
Default thumbnails
+By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
+ -Why use thumbnails
-Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.
Simple, flexible markup
-Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.
Uses grid column sizes
-Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.
Highly customizable
+With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
+-
+
- + + +
- + + +
The markup
-As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:
+Why use thumbnails
+Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.
Simple, flexible markup
+Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.
Uses grid column sizes
+Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.
The markup
+As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:
<ul class="thumbnails"> <li class="span3"> @@ -1565,7 +1521,7 @@ ... </ul>-
For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
<ul class="thumbnails"> <li class="span3"> @@ -1578,44 +1534,41 @@ ... </ul>-
More examples
+Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
+ @@ -1629,37 +1582,35 @@