The Bootstrap Snippets icon  provides many useful snippets of HTML that leverage styles available in Bootstrap. Click the icon, then use the menu to select the desired snippet. Most snippets can be edited in the standard view, but some may be easier to adjust in the raw HTML view.

Accordion

Create groupings of text that can be collapsed and opened by clicking on a main heading link item.

More documentation here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis est ac dui convallis porta adipiscing ante lobortis. Aenean volutpat mollis pretium. Ut eu enim dolor, vitae tincidunt odio. Aenean iaculis nibh id nibh venenatis ac hendrerit turpis tempor.
Curabitur sit amet nunc sapien, a vehicula turpis. In auctor neque a ipsum rhoncus eu pulvinar eros consequat. Pellentesque ultrices, ipsum commodo adipiscing suscipit, nisi enim dapibus nunc, vitae convallis risus erat a felis.
Mauris felis odio, imperdiet sed posuere et, ultrices eget turpis. Morbi quis arcu ac quam hendrerit facilisis ut ac ligula. Praesent at lacus eros. Nam elit massa, vehicula ac sollicitudin non, sollicitudin tristique tellus. Nulla nisi magna, cursus nec vestibulum cursus, iaculis nec magna.

Alerts

Create a colored box for default warnings, errors, success or information with configurable text.

More documentation here.

Warning! Proceed with caution...

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Badges

Create default, success, warning or other informational labels for different sections on your page. The text in each badge is editable.

More documentation here.

Default

Success

Warning

Breadcrumb

Create a "breadcrumb" trail from your starting location to your current location. This allows you to navigate back to previous locations and see how you reached your current destination.

More documentation here.

 

Buttons

Insert buttons with customized text in multiple colors and sizes. These buttons can link to internal or external pages or locations.

More documentation here.

    

Jumbotron

Showcase key content on your site with a ready made heading and text section, including a button to link to more information.

More documentation here.

Heading

This is a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Media Object

Add an image with a heading and text aligned automatically.

More documentation here.

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.

Page Header

Create a page header including subtext.

More documentation here.

Example page header Subtext for header

Tabs

Create configurable tabs with specific information under each.

More documentation here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis fringilla suscipit. Praesent sapien libero, gravida sed bibendum vel, sollicitudin non nibh. Curabitur nulla neque, ullamcorper ut consequat et, ullamcorper ut massa. Nam condimentum nunc mauris, sed aliquet tortor. Aenean rutrum ante quis enim blandit interdum. Aliquam dolor purus, lacinia et auctor non, rutrum fringilla augue. Nulla hendrerit, metus vitae eleifend egestas, mi felis faucibus turpis, non accumsan mauris lectus nec dolor. Nam dictum imperdiet libero mattis accumsan.

 

Morbi et lorem tellus. Sed diam diam, ultricies vitae lacinia aliquam, facilisis vel sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed a mauris sed turpis ultricies feugiat. Integer ullamcorper mi non ligula lobortis malesuada. Nam sed neque eu risus tincidunt tempor vitae vel ligula. Vestibulum rhoncus nisi ut leo vehicula at tempus augue facilisis.

Habitasse platea dictumst. Suspendisse magna sem, vestibulum quis cursus vitae, lobortis a dui. Vivamus porttitor condimentum sem. In hac habitasse platea dictumst. Aenean pretium sapien at justo gravida a convallis sapien tempus. Pellentesque nec massa nibh, ut semper erat.

Thumbnails

Images can be added to include text and action buttons relating to the image and information provided. This component sets up three separate sections of thumbnails.

More documentation here.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

 

Wells

Create a box around a specific area of text.

More documentation here.

Look, I'm in a well!

Look, I'm in another well!

Wells (mini)

Like the larger weil, this creates a box around your text.

More documentation here.

Look, I'm in a mini well!

Look, I'm in another mini well!