Getting Started With Bootstrap: Part 2

Introduction

I have started an article series. The first part, Getting Started with Bootstrap, provided a basic introduction to Bootstrap and Bootstrap layout.

In this article, we'll learn:

• Twitter Bootstrap Typography
• Creating a Simple Table with Twitter Bootstrap
• Twitter Bootstrap List
• Create Twitter Bootstrap Forms
• Twitter Bootstrap Images
• Twitter Bootstrap Media Objects
• Twitter Bootstrap Icons
• Twitter Bootstrap Typography

In this article you we will learn about the styling and text content formatting like headings, paragraphs, blockquotes and so on. It uses Helvetica Neue, Helvetica, Arial and sans-serif in its default font stack.

Headings

You can define all the HTML headings, <h1> to <h6>. In the same way you define a simple HTML document. You can also use heading classes .h1 to .h6 on other elements, if you want to apply a heading style on other elements.

HTML Code

<h1>h1: Getting started with Bootstrap</h1>
<h2>h2: Getting started with Bootstrap</h2>
<h3>h3: Getting started with Bootstrap</h3>
<h4>h4: Getting started with Bootstrap</h4>
<h5>h5: Getting started with Bootstrap</h5>
<h6>h6: Getting started with Bootstrap</h6>

 Result

You can use the <small> and <span> tags with .small class to display the secondary text of any heading in a smaller and lighter variation. 

HTML Code 

<h1>h1: Getting started with Bootstrap<small>MCN Solutions</small></h1>
<h2>h2: Getting started with Bootstrap<small>MCN Solutions</small></h2>
<h3>h3: Getting started with Bootstrap<small>MCN Solutions</small></h3>
<h4>h4: Getting started with Bootstrap<small>MCN Solutions</small></h4>
<h5>h5: Getting started with Bootstrap<small>MCN Solutions</small></h5>
<h6>h6: Getting started with Bootstrap<small>MCN Solutions</small></h6>

Result

Paragraphs
 
Bootstrap defines the global style for all paragraphs with default font-size 14px. You can add a .lead class to make a paragraph stand out.
 
HTML Code

<p>This is how a normal paragraph looks like in Twitter Bootstrap.</p>
<p class="lead">This is how a paragraph stands out in Twitter Bootstrap.</p>

Result

 

In bootstrap you can easily align text inside the paragraph using the text-alignment classes.
 
 HTML code 

<p class="text-left"> Align Left Text </p>
<p class="text-center"> Align Center Text </p>
<p class="text-right"> Align Right Text </p>
<p class="text-justify"> Justify Text </p>
<p class="text-nowrap"> no wrap Text </p>

Result

Text Formatting
 
You can use HTML text formating tags like <strong>,<i><small> to make your text bold, italic, small and so on.
 
HTML Code 

<p><b>This is bold text</b></p>
<p><big>This is big text</big></p>
<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><i>This is italic text</i></p>
<p><mark>This is highlighted text</mark></p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>

Result

Text Transformation Classes
 
You can also transform the text to lowercase, uppercase or make them capitalized. 

<p class="text-uppercase">C# Corner is social community for developer</p>
<p class="text-lowercase">C# Corner is social community for developer</p>
<p class="text-capitalize">C# Corner is social community for developer</p>

Result

Text Emphasis classes

Colors are the powerful method of conveying important information in website design. Bootstrap provides emphasis utility classes that can be used for showing success message in Green, warning or error message in Red, and so on.
 
HTML Code 

<p class="text-muted">Muted: This text is grayed out.</p>
<p class="text-primary">Important: Please read the instructions carefully before proceed.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Error: An error has been occurred while submitting your data.</p>

Result

Blockquotes
 
Bootstrap provides styling of blockquotes. You just define the blockquotes using the standard element <blockquote>.
 
HTML Code 

<blockquote>
    <p>Success is blocked by concentrating on it and planning for it... Success is shy - it won't come out while you're watching.</p>
    <small>by <cite>Tennessee Williams</cite></small>
</blockquote>

Result

Creating a Simple Table with Twitter Bootstrap
 
The following explains tables and how to create a table using Bootstrap. HTML tables are used to present data in a grid manner like rows and columns. You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap's class .table to the <table> element.
 
HTML Code 

<table class="table">
     <thead>
         <tr>
             <th>Row</th>
             <th>First Name</th>
             <th>Last Name</th>
             <th>Email</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>1</td>
             <td>Vipin</td>
             <td>Choudhary</td>
             <td>[email protected]</td>
         </tr>
         <tr>
             <td>2</td>
             <td>Manoj</td>
             <td>Dhakar</td>
             <td>[email protected]</td>
         </tr>
         <tr>
             <td>3</td>
             <td>Vikas</td>
             <td>Sharma</td>
             <td>[email protected]</td>
         </tr>
     </tbody>
 </table>

Result

Use Contextual classes in Bootstrap Table
 
The contextual classes shown in the following table will allow you to change the background color of your table rows or individual cells.

Class	Description
.active	Applies the hover color to a specific row or cell
.success	Indicates a successful or positive action
.warning	Indicates a warning that might need attention
.danger	Indicates a dangerous or potentially negative action

These classes can be applied to <tr>, <td> or <th> .
 
HTML Code

<table class="table">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr class="active">
            <td>1</td>
            <td>Vipin</td>
            <td>Choudhary</td>
            <td>[email protected]</td>
        </tr>
        <tr class="success">
            <td>2</td>
            <td>Manoj</td>
            <td>Dhakar</td>
            <td>[email protected]</td>
        </tr>
        <tr class="warning">
            <td>3</td>
            <td>Vikas</td>
            <td>Sharma</td>
            <td>[email protected]</td>
        </tr>
        <tr class="danger">
            <td>4</td>
            <td>Deepak</td>
            <td>Verma</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

Result

You can create a stylish and colorful border table by simple adding the Bootstrap's class in the <table> tag with the .table class. Some of Bootstrap's table class are:

• .table-striped: Use for Alternate background of table row.
   
• .table-bordered: Use for adding the border to all cells in table.
   
• .table-hover: Use for enable the hover state on table rows.
   
• .table-condensed: Makes the table compact by cutting the cell padding in half.

Twitter Bootstrap List

In this you will learn how to create a styling list in bootstrap. The following are three types of list:

• Unordered lists: An unordered list is simply a list of related items whose order does not matter. An unordered list is a list that doesn't have any specific order and is traditionally styled with bullets.
   
• Ordered lists: A list of items in which the order does explicitly matter. An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.
   
• Definition list: A list of terms with their associated descriptions. 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.

UnStyled Ordered and Unordered Lists

In bootstrap you can remove the style from the list items. You can do this by applying the class .list-unstyled to the respective <ul> or <ol> elements.

HTML Code

<ul class="list-unstyled">
    <li>Home</li>
    <li>Technologies
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>Bootstrap</li>
        </ul>
    </li>
    <li>Answers</li>
    <li>Blog</li>
</ul>

Result 

Note: If you removed .list-unstyled then list-style are the default and the left padding is only from the list items that are immediate children of the <ul> or <ol>element.

Styled Ordered and Unordered Lists with Bootstrap

Twitter Bootstrap provide various list-style class for different style. These are given below:

• .list-inline: Use for create horizontal menu using ordered or unordered list you need to place all list items in a single line, in other words side by side.
   
• .dl-horizontal: Use for create descriptions in definition lists can also be placed side-by-side.
   
• .list-group: Use for a component for displaying lists of items in a beautiful manner. In the most basic form a list group is simply an unordered list with list items and proper classes.

HTML Code

For list inline styles:

<ul class="list-inline">
    <li>Home</li>
    <li>Technologies</li>
    <li>Answer</li>
    <li>Blog</li>
</ul>

For a description list:

<dl class="dl-horizontal">
    <dt>Technologies</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis risus quis ante elementum volutpat vel quis nisi. Mauris vehicula eros vitae tincidunt venenatis.</dd>
    <dt>Aricle</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis risus quis ante elementum volutpat vel quis nisi.</dd>
    <dt>Blog</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis risus quis ante elementum volutpat vel quis nisi. Mauris vehicula eros vitae tincidunt venenatis.</dd>
</dl>

For a group list:

<ul class="list-group">
    <li class="list-group-item">Home</li>
    <li class="list-group-item">Technologies</li>
    <li class="list-group-item">Answer</li>
    <li class="list-group-item">Blog</li>
</ul>

Result 

Create Twitter Bootstrap Forms

The following explains how to create forms using Twitter bootstrap.

HTML forms are the integral part of the web pages, but the styling the form controls manually one by one using CSS can be a tedious process. Twitter Bootstrap simplifies the styling process of form controls like input-boxes, select-boxes, textareas, and so on.

Twitter Bootstrap provides the following three types of form layouts:

• Vertical Form
• Horizontal Form
• Inline Form

Creating Vertical Form Layout

A Vertical Form layout is the default layout form of bootstrap in which styles are applied to form controls without adding any base class to the <form > element. The form controls in this layout are stacked with left-aligned labels on the top. The class .form-control makes all textual elements like <input>, <textarea> and <select> are 100% wide by default. To use them inline, you will need to set a width on the element the form controls used within. To create a basic form do the following:

Add a role form to the parent <form> element.

Wrap labels and controls in a <div> with class the .form-group. This is needed for optimum spacing.

Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

HTML Code

<form>
   <div class="form-group">
       <label for="inputEmail">Email</label>
       <input type="email" class="form-control" id="inputEmail" placeholder="Email">
   </div>
   <div class="form-group">
       <label for="inputPassword">Password</label>
       <input type="password" class="form-control" id="inputPassword" placeholder="Password">
   </div>
   <div class="checkbox">
       <label><input type="checkbox"> Remember me</label>
   </div>
   <button type="submit" class="btn btn-primary">Login</button>
</form>

Result 

Creating Horizontal Form Layout
 
In a horizontal form layout labels are right-aligned and floated to left to make them appear on the same line as form controls. The horizontal form layout requires the various markup changes from a default form layout. The procedure is listed below.
 
In the form element, add the class .form-horizontal.
 
Wrap labels and form controls in <div> elements and apply the class .form-group on the <div> element.
 
Add the class .control-label to the <label> element.
 
<input>, <select>, and <textarea> elements in a <div> element.
 
Use Bootstrap's predefined grid classes to align labels and and form controls parent <div> element.
 
Add the class .control-label to the <label> element.
 
Add the class .form-control to the <input>,<select>, and <textarea> elements.
 
HTML Code 

<form class="form-horizontal">
     <div class="form-group">
         <label for="inputEmail" class="control-label col-xs-2">Email</label>
         <div class="col-xs-10">
             <input type="email" class="form-control" id="inputEmail" placeholder="Email">
         </div>
     </div>
     <div class="form-group">
         <label for="inputPassword" class="control-label col-xs-2">Password</label>
         <div class="col-xs-10">
             <input type="password" class="form-control" id="inputPassword" placeholder="Password">
         </div>
     </div>
     <div class="form-group">
         <div class="col-xs-offset-2 col-xs-10">
             <div class="checkbox">
                 <label><input type="checkbox"> Remember me</label>
             </div>
         </div>
     </div>
     <div class="form-group">
         <div class="col-xs-offset-2 col-xs-10">
             <button type="submit" class="btn btn-primary">Login</button>
         </div>
     </div>
 </form>

Result

Static Form Control
 
There might be a situation when you need to place just plain text next to a form lable instead of a form control. You can do this within a horizontal form layout by using the .form-control-static class on a <p> element, like this: 

<div class="form-group">
     <label for="inputEmail" class="control-label col-xs-2">Email</label>
     <div class="col-xs-10">
         <p class="form-control-static">[email protected]</p>
     </div>
 </div>

Creating Inline Form Layout
 
Sometimes you need to place the form controls side-by-side to compact the layout. You can do this by adding the Bootstrap class .form-inline to the <form> element. In an Inline form layout, you need to include a label for every form input otherwise screen readers will have trouble with your forms. However in the case of an inline form layout you can hide these labels using the .sr-only class.
 
HTML Code 

<form class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

Result

Height sizing of Inputs and Select Boxes

With Bootstrap, you can easily control the height of your input and select boxes to match the button sizes. The Bootstrap's relative sizing classes like .input-lg, .input-sm can be used both on <input> and <select> boxes to create it's larger or smaller sizes.

HTML Code

<form>
    <div class="row">
        <div class="col-xs-6">
            <input type="text" class="form-control input-lg" placeholder="Larger input">
        </div>
        <div class="col-xs-6">
            <select class="form-control input-lg">
                <option>Larger select</option>
            </select>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-6">
            <input type="text" class="form-control" placeholder="Default input">
        </div>
        <div class="col-xs-6">
            <select class="form-control">
                    <option>Default select</option>
            </select>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-6">
            <input type="text" class="form-control input-sm" placeholder="Smaller input">
        </div>
        <div class="col-xs-6">
            <select class="form-control input-sm">
                <option>Smaller select</option>
            </select>
        </div>
    </div>
</form>

Result

Validation States with Twitter Bootstrap
 
Bootstrap provides an easy to use and powerful mechanism for styling input controls to present various validation states. Bootstrap includes validation styles for error, warning and success messages. To use, just add the appropriate class to the surrounding .form-group.
 
The following shows Twitter Bootstrap Form Validation States.
 
HTML Code

<form class="form-horizontal">
    <div class="form-group has-success">
        <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
        <div class="col-xs-10">
            <input type="text" id="inputSuccess" class="form-control" placeholder="Input with success">
            <span class="help-block">Username is available</span>
        </div>
    </div>
    <div class="form-group has-warning">
        <label class="col-xs-2 control-label" for="inputWarning">Password</label>
        <div class="col-xs-10">
            <input type="password" id="inputWarning" class="form-control" placeholder="Input with warning">
            <span class="help-block">Password strength: Weak</span>
        </div>
    </div>
    <div class="form-group has-error">
        <label class="col-xs-2 control-label" for="inputError">Email</label>
        <div class="col-xs-10">
            <input type="email" id="inputError" class="form-control" placeholder="Input with error">
            <span class="help-block">Please enter a valid email address</span>
        </div>
    </div>
</form>

Result

Twitter Bootstrap Images

The following explains how to style images, creating thumbnails, grid of images, videos, text and so on.

We can use images to create a modern web page design. So styling images and placing them properly on web pages. Bootstrap provides the predifined classes for styling images. These are :

• .img-rounded: It is making the round cornered images.
• .img-circle: It is making the circular images.
• .img-thumbnail: It is provide the effect like thumbnail.

HTML Code

<img src="image.png" class="img-rounded" >
<img src="image.png" class="img-circle" >
<img src="image.png" class="img-thumbnail" >

Result 

Twitter Bootstrap Thumbnails
 
The Twitter Bootstrap thumbnails component is very useful for creating grids of images or videos, list of products, portfolios and much more. See the HTML for thumbnails grid of images.
 
HTML Code

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <a href="#" class="thumbnail">
                <img src="image.png" >
            </a>
        </div>
        <div class="col-xs-2">
            <a href="#" class="thumbnail">
                <img src="image.png" >
            </a>
        </div>
        <div class="col-xs-2">
            <a href="#" class="thumbnail">
                <img src="image.png" >
            </a>
        </div>
        <div class="col-xs-2">
            <a href="#" class="thumbnail">
                <img src="image.png" >
            </a>
        </div>
        <div class="col-xs-2">
            <a href="#" class="thumbnail">
                <img src="image.png" >
            </a>
        </div>
        <div class="col-xs-2">
            <a href="#" class="thumbnail">
                <img src="image.png" >
            </a>
        </div>
    </div>
</div>

Result

Twitter Bootstrap Media Objects
 
If you want to create a layout like blog comments that contains a left- or right-aligned image along with the textual content, you can do that easily through the newly introduced Bootstrap media component, like this.
 
HTML Code 

<div class="media">
     <a href="#" class="pull-left">
         <img src="image.png" class="media-object">
     </a>
     <div class="media-body">
         <h4 class="media-heading">Vipin Kumar <small><i>Posted on September 02, 2014</i></small></h4>
         <p> The first part Getting started with Bootstrap provided a basic introduction of bootstrap and bootstrap layout.</p>
     </div>
</div>

Result

Note: You can also create a list of media objects or nested media objects using the media list component. It can be useful for comment threads or article lists.
 
Twitter Bootstrap Icons
 
This explains how to use Twitter Bootstrap Icons. Twitter Bootstrap includes 200 Glyphicons. These icons are available in font format for better usability and scalability. To use the Bootstrap icons you will require a <span>, <i> ,<a> and so on. tag along with a base class .glyphicon and individual icon class .glyphicon-*. The general syntax for using Bootstrap icons is: 

<span class="glyphicon glyphicon-class-name"></span>

Note: If you want to use your own font format icon you can learn here.

 

Next: Getting Started with Bootstrap Part 3 >>