Bootstrap Typography


In Bootstrap, heading from <h1> to <h6> are similar to the default HTML heading and rendered by the browser in the same fashion. Bootstrap provides great flexibility to use his heading classes that is .h1 to .h6 with other HTML elements like <div> if you wish to apply style to other HTML element similar to headings.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<hr>
<div class="h1">h1. Bootstrap heading</div>
<div class="h2">h2. Bootstrap heading</div>
<div class="h3">h3. Bootstrap heading</div>
<div class="h4">h4. Bootstrap heading</div>
<div class="h5">h5. Bootstrap heading</div>
<div class="h6">h6. Bootstrap heading</div>
Try Now

The above code example will produce below output:


Bootstrap's default font-size is 14px and default line uses height 1.428. This applied to the <body> element of the page, hence applied to all the paragraphs.

Bootstrap Page Headers

Bootstrap gives you great flexibility to work with page header. With Bootstrap If you want to display secondary text in heading, you can still use lt;small> element or you can use <span> element with .small class.

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
<hr>
<h1>h1. Bootstrap heading <span class="small">Secondary text</span></h1>
<h2>h2. Bootstrap heading <span class="small">Secondary text</span></h2>
<h3>h3. Bootstrap heading <span class="small">Secondary text</span></h3>
<h4>h4. Bootstrap heading <span class="small">Secondary text</span></h4>
<h5>h5. Bootstrap heading <span class="small">Secondary text</span></h5>
<h6>h6. Bootstrap heading <span class="small">Secondary text</span></h6>
Try Now

The above code example will produce below output:


Bootstrap and <mark>

Similar to HTML <small> element, Bootstrap will style the HTML <mark> element in the following way:

<p>Mark element is used to highlight text.</p>
Try Now

The above code example will produce below output:


Bootstrap and <abbr>

Similar to HTML <mark> element, Bootstrap will style the HTML element in the following way:

<p>The WTO was founded in 1 Jauary 1995.</p>
Try Now

The above code example will produce below output:


Bootstrap and <blockquote>

Similar to HTML <mark> element, Bootstrap will style the HTML <blockquote> element in the following way:

<blockquote>
    <p>Bootstrap system, the way to create responsive website layouts. 
	Bootstrap has bunch of classes that support grid layouts 
in the form of row and columns to organize page contents. 
Bootstrap grid system enables to create layout for different 
types of devices like mobile, tablets, laptops and desktops etc. 
Bootstrap's grid system supports up to 12 columns across the page.</p>
    <footer>From techstrikers.com website</footer>
  </blockquote>
Try Now

The above code example will produce below output:


<blockquote class="blockquote-reverse">
    <p>Bootstrap system, the way to create responsive website layouts. 
	Bootstrap has bunch of classes that support grid layouts 
in the form of row and columns to organize page contents. 
Bootstrap grid system enables to create layout for different 
types of devices like mobile, tablets, laptops and desktops etc. 
Bootstrap's grid system supports up to 12 columns across the page.</p>
    <footer>From techstrikers.com website</footer>
  </blockquote>
Try Now

The above code example will produce below output:


Bootstrap and <dl>

Similar to HTML <mark> element, Bootstrap will style the HTML <dl> element in the following way:

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>
Try Now

The above code example will produce below output:


Bootstrap and <code>

Similar to HTML <mark> element, Bootstrap will style the HTML <code> element in the following way:

<p>HTML elements like <code>span</code>, <code>section</code>, 
and <code>div</code> defines a section in a document.<p>
Try Now

The above code example will produce below output:


Bootstrap and <kbd>

Similar to HTML <mark> element, Bootstrap will style the HTML <kbd> element in the following way:

<p>Use <kbd>ctrl + c</kbd> to copy selected text.</p>
Try Now

The above code example will produce below output:


Bootstrap and <pre>

Similar to HTML <mark> element, Bootstrap will style the HTML <pre> element in the following way:

<pre>
This is pre HTML element (used to display code)
rendering with Bootstrap displaying is a fixed-width
font, and it preserves
spaces and line breaks.
</pre>
Try Now

The above code example will produce below output:


Bootstrap Text Transformation Classes

Bootstrap provides you set of classes to transform the text to lowercase, uppercase or make them capitalize by using .text-lowercase, .text-uppercase and .text-capitalize classes.

<p class="text-lowercase">Bootstrap support to lowercase text using <code>.text-lowercase</code> class.</p>
<p class="text-uppercase">Bootstrap support to uppercase text using <code>.text-uppercase</code> class.</p>
<p class="text-capitalize">Bootstrap support to capitalize text using <code>.text-capitalize</code> class.</p>
Try Now

The above code example will produce below output:


Bootstrap Text Emphasis Classes

Bootstrap provides you set of classes to show different messages in different colors for example success in green, error in red etc, by using .text-muted, .text-primary, .text-success, .text-info, .text-warning and .text-danger classes.

<p class="text-muted"><b>Muted:</b> This will grayed out the text.</p>
<p class="text-primary"><b>Important:</b> Please read the guidelines carefully and strictly follow them when creating your
submission!</p>
<p class="text-success"><b>Success:</b> Your file has been uploaded successfully.</p>
<p class="text-info"><b>Note:</b> To continue signing in you must agree to the terms and conditions.</p>
<p class="text-warning"><b>Warning:</b> There was a problem with database connection, please contact to Administrator.</p>
<p class="text-danger"><b>Error:</b> An error occurred while inserting data into the database.</p>
Try Now

The above code example will produce below output:


Bootstrap Text Background Classes

Bootstrap also provides you bunch of classes to show different messages with different background colors, instead of text color for example green backgroun for success, rad background for error message etc. by using .bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning and .bg-danger classes.

<p class="bg-muted"><b>Muted:</b> This will grayed out the text.</p>
<p class="bg-primary"><b>Important:</b> Please read the guidelines carefully and strictly follow them when creating your
submission!</p>
<p class="bg-success"><b>Success:</b> Your file has been uploaded successfully.</p>
<p class="bg-info"><b>Note:</b> To continue signing in you must agree to the terms and conditions.</p>
<p class="bg-warning"><b>Warning:</b> There was a problem with database connection, please contact to Administrator.</p>
<p class="bg-danger"><b>Error:</b> An error occurred while inserting data into the database.</p>
Try Now

The above code example will produce below output:


Bootstrap More Typography Classes

Bootstrap has more typography classes given below to style HTML elements further:

ClassDescriptionLive Demo
.leadTo makes a paragraph stand outTry Now
.text-leftThis indicates left-aligned textTry Now
.text-centerThis indicates center-aligned textTry Now
.text-rightThis indicates right-aligned textTry Now
.text-justifyIndicates justified textTry Now
.text-nowrapThis indicates no wrap textTry Now
.initialismThis displays the text inside an <abbr> elementTry Now
.list-unstyledThis removes the default list-style and left margin on list itemsTry Now
.list-inlineThis will places all list items on a single lineTry Now
.dl-horizontalThis will lines up the the <dt> and descriptions <dd> in <dl> elements side-by-side.Try Now
.pre-scrollableThis makes a <pre> element scrollableTry Now


See Also

AngularJS Built-in Filters
AngularJS Built-in Directives
AngularJS Expression
AngularJS Built-in Events
AngularJS Scope Methods
AngularJS Built-in Services
AngularJS Controller Inheritance
AngularJS Custom Directives



 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.