Style

Javascript Examples

Bring Bootstrap's components to life, with custom jQuery plugins.

Left tabs

Made for everyone and packed with features

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

By nerds, for nerds. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well. A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

249 icons Gorgeous on high-resolution retina displays. Scalable vector graphics means every icon looks awesome at any size.

#	First Name	Last Name	Job
1	Mark	Otto	Designer
2	Jacob	Thorn	Artist
3	Larry	Bird	Tea Boy

Alert Boxes

× Well done! You successfully read this important alert message.

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

× Warning! Better check yourself, you're not looking too good.

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

Accordion

Information Gathering

Rebum sanctus gubergren ei mea, usu repudiare adolescens rationibus at, eum ea dicant malorum deseruisse. Quot pertinax sensibus id per, usu vide dolorem ea. Invidunt incorrupte mei ea, duo ei viderer mentitum explicari. Sed dolorum mediocritatem ex. Ceteros fabellas verterem ut has, ne facilis.

CREATE DESIGN CODE

Ex sit diam veniam veritus. Nec ex quis homero. Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in. Vel te augue ponderum singulis, ei justo doctus sed.

Design

Lorem ipsum dolor sit amet, vix invidunt neglegentur no, in pri evertitur consequuntur. Minim evertitur scripserit ad qui, no diam error meliore quo. No mei ferri adhuc scribentur, an eius vitae ubique eos.

Certain things to consider are:

Purpose
Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in?
Goals
Vel te augue ponderum singulis, ei justo doctus sed?
Target Audience
Quot pertinax sensibus id per, usu vide dolorem ea. Invidunt incorrupte mei ea, duo ei viderer mentitum explicari.

Testing and Delivery

An mea vidit definiebas. No sea quaestio abhorreant, ne sit offendit urbanitas interpretaris. Habeo atqui docendi quo ne, clita labore laoreet eam no. Eam ipsum vocibus cu.

Ex sit diam veniam veritus. Nec ex quis homero. Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in. Vel te augue ponderum singulis, ei justo doctus sed.
Ex sit diam veniam veritus. Nec ex quis homero. Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in. Vel te augue ponderum singulis, ei justo doctus sed.
Ex sit diam veniam veritus. Nec ex quis homero. Porro audiam recusabo ut sed, qui ornatus menandri ea, brute aperiam insolens his in. Vel te augue ponderum singulis, ei justo doctus sed.

Maintenance

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Vivamus purus arcu, commodo cursus egestas et, dictum lobortis dui curabitur at mi eu mi sollicitudin.

Hosting
Porro audiam recusabo ut sed, qui ornatus menandri ea brute aperiam insolens his in?
Pricing
Vel te augue ponderum singulis, ei justo doctus sed offendit urbanitas interpretaris.
- • £50.00 per page
- • £80.00 - £120.00 per portfolio
- • £750.00 - e-commerce
Updates
Quot pertinax sensibus id per, usu vide dolorem ea. Invidunt incorrupte mei ea, duo ei viderer mentitum explicari.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Popovers

<button type="button" class="btn btn-md btn-primary" data-rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. Right?"">
Popover with title
</button>

<button type="button" class="btn btn-md btn-primary" data-rel="popover" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>

<button type="button" class="btn btn-md btn-primary" data-rel="popover" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>

<button type="button" class="btn btn-md btn-primary" data-rel="popover" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. .

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Duis dignissim, risus et pretium fermentum, mauris nisi scelerisque orci, quis aliquet tortor tortor commodo nunc. Suspendisse ullamcorper, orci sed hendrerit tincidunt, nibh metus pulvinar diam, in mollis nisl lacus convallis purus.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#contact" data-toggle="tab">Contact</a></li>
</ul>