Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
+
+{% highlight html linenos %}
+
+{% endhighlight %}
Typography and links
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
@@ -103,7 +107,9 @@ title: CSS
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.
-
<p>...</p>
+{% highlight html linenos %}
+
...
+{% endhighlight %}
Lead body copy
@@ -111,7 +117,9 @@ title: CSS
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
-
<p class="lead">...</p>
+{% highlight html linenos %}
+
...
+{% endhighlight %}
Built with Less
@@ -127,25 +135,28 @@ title: CSS
This line of text is meant to be treated as fine print.
-
-<p>
- <small>This line of text is meant to be treated as fine print.</small>
-</p>
-
+{% highlight html linenos %}
+This line of text is meant to be treated as fine print.
+{% endhighlight %}
+
Bold
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
-
<strong>rendered as bold text</strong>
+{% highlight html linenos %}
+rendered as bold text
+{% endhighlight %}
Italics
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
-
<em>rendered as italicized text</em>
+{% highlight html linenos %}
+rendered as italicized text
+{% endhighlight %}
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.
Convey meaning through color with a handful of emphasis utility classes.
@@ -170,12 +181,13 @@ title: CSS
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-
-<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
-<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-
+{% highlight html linenos %}
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+
Etiam porta sem malesuada magna mollis euismod.
+
Donec ullamcorper nulla non metus auctor fringilla.
+
Donec ullamcorper nulla non metus auctor fringilla.
+
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-<address>
- <strong>Twitter, Inc.</strong><br>
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
- <abbr title="Phone">P:</abbr> (123) 456-7890
-</address>
+{% highlight html linenos %}
+
+ Twitter, Inc.
+ 795 Folsom Ave, Suite 600
+ San Francisco, CA 94107
+ P: (123) 456-7890
+
-<address>
- <strong>Full Name</strong><br>
- <a href="mailto:#">first.last@example.com</a>
-</address>
-
+
+ Full Name
+ first.last@example.com
+
+{% endhighlight %}
@@ -241,11 +257,11 @@ title: CSS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
-<blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-</blockquote>
-
+{% highlight html linenos %}
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+{% endhighlight %}
Blockquote options
Style and content changes for simple variations on a standard blockquote.
@@ -258,12 +274,12 @@ title: CSS
Someone famous in Source Title
-
-<blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- <small>Someone famous <cite title="Source Title">Source Title</cite></small>
-</blockquote>
-
+{% highlight html linenos %}
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ Someone famous Source Title
+
+{% endhighlight %}
Alternate displays
Use .pull-right for a floated, right-aligned blockquote.
@@ -273,11 +289,11 @@ title: CSS
Someone famous in Source Title
-
-<blockquote class="pull-right">
+{% highlight html linenos %}
+
Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.