Getting Started With Bootstrap: Part 2

<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> 

<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>   

<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> 

<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> 

<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> 

<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>  

<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>  

<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> 

<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>

<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>

<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>

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 >>