Create responsive website with Bootstrap

Bootstrap tutorial includes all topics such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

Bootstrap Typography

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font stack. Using typography feature of Bootstrap you can create headings, paragraphs, lists and other inline elements.


All HTML headings (h1 to h6) are styled in Bootstrap.

<h1>Heading 1 h1</h1>
<h2>Heading 2 h2</h2>
<h3>Heading 3 h3</h3>
<h4>Heading 4 h4</h4>
<h5>Heading 5 h5</h5>
<h6>Heading 6 h6</h6>

Inline Subheadings

To add an inline subheading to any of the headings, simply add around any of the elements or add .small class and you will get smaller text in a lighter color

<h1>Heading 1<small>Inline Subheading 1</small></h1>
<h2>Heading 2<small>Inline Subheading 2</small></h2>
<h3>Heading 3<small>Inline Subheading 3</small></h3>
<h4>Heading 4<small>Inline Subheading 4</small></h4>
<h5>Heading 5<small>Inline Subheading 5</small></h5>
<h6>Heading 6<small>Inline Subheading 6</small></h6>


Use the mark element to highlight text.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.


The HTML element provides markup for abbreviations or acronyms, like WWW or HTTP

<abbr title = "Hypertext Transfer Protocol">HTTP</abbr><br>


You can use the default <blockquote> around any HTML text. Other options include, adding a <small> tag for identifying the source of the quote and right-aligning the blockquote using class .pull-right.

<blockquote> This is a blockquote with a source title. <small>Someone famous in <cite title = "Source Title">Source Title</cite></small> </blockquote>


In this type of list, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for definition term, and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, the <dd> is the definition of the <dt>. You can make terms and descriptions in <dl> line up side-by-side using class dl-horizontal.



If you are going to be displaying code inline, you should use the <code> tag.

<p><code>&lt;header&gt;</code> is wrapped as an inline element.</p>


If the code needs to be displayed as a standalone block element or if it has multiple lines, then you should use the <pre> tag.

<pre> &lt;article&gt; &lt;h1&gt;Article Heading&lt;/h1&gt; &lt;/article&gt; </pre>