Reader Level:
ARTICLE

Learning Bootstrap Part 1: Getting Started With Bootstrap

Posted by dj Articles | .NET 4.5 September 11, 2013
In this article I am focusing on getting started with Bootstrap.
  • 2
  • 0
  • 7626

What is Twitter Bootstrap? Well, I will answer this question in a future article. In this article I am focusing on getting started with Bootstrap and I will show you how easy it could be to make your web applications more immersive using Bootstrap.

Let us start with downloading and installing Bootstrap. You can download that from here.

Bootstrap-1.jpg

After downloading, unzip the folder and you will find the following subfolders inside that. The folder's names are very much self-explanatory. CSS files are in a CSS folder and JS files are in a JS folder. 

Bootstrap-2.jpg
 
Next you need to add the Bootstrap files to your project structure. The Visual Studio folder structure should look such as the following:

Bootstrap-3.jpg

Now a typical HTML file looks like the following:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.7.1.min.js"></script>

    <link href="Content/Site.css" rel="stylesheet" />

</head>

<body>

   

    <h1>Bootstarp Sample</h1>

    <div>I am here to decide about my Ideas ! Okay ?</div>

</body>

</html>
 
HTML will render without Bootstrap as in the following:

Bootstrap-4.jpg

You can add Bootstrap CSS and JS references in the same way we add the usual CSS and JS references.

Bootstrap-5.jpg

After adding the references for the Bootstrap CSS and JS HTML it should look like the following.
 

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.7.1.min.js"></script>

    <link href="Content/Site.css" rel="stylesheet" />

    <!-- Bootstrap references -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>   

    <h1>Bootstarp Sample</h1>

    <div>I am here to decide about my Ideas ! Okay ?</div>

</body>

</html>
 
Now we have added the Bootstrap CSS and the HTML will render as in the following. You will sse the difference in typography and the way H1 and DIV elements are rendering now.

Bootstrap-6.jpg

Now let us see how easy it is to differentiate various kinds of messages in Bootstrap. For example if we want to show an error message then that can be done by setting the class of a paragraph.

Bootstrap-7.jpg

In the same way an information message can be displayed as in the following,

Bootstrap-8.jpg

We can show various kinds of messages in the application as easily as depicted in the following HTML:
 

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.7.1.min.js"></script>

    <link href="Content/Site.css" rel="stylesheet" />

    <!-- Bootstrap references -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

   

    <h1>Bootstarp Sample</h1>

    <p class="muted">This is muted text</p>

    <p class="text-warning">This is warning text</p>

    <p class="text-error">This is Error !</p>

    <p class="text-info">This is Info !</p>

    <p class="text-success">This is sucess message !</p>

</body>

</html>
 
And various kinds of messages will render as in the following:

Bootstrap-9.jpg

Let us take another example of a table. You can create a table with some rows as in the following:
 

     <table>

        <tr>

            <td>Dhananjay Kumar</td>

            <td>@debug_mode</td>

        </tr>

        <tr>

            <td>John Bristowe</td>

            <td>@johnbristowe</td>

        </tr>

        <tr>

            <td>Chris Eargle</td>

            <td>@kodefuguru</td>

        </tr>

         <tr>

            <td>Pinal Dave</td>

            <td>@pinaldave</td>

        </tr>

    </table>

  
On rendering the HTML above in the browser you will get the table as in the following. Certainly this table is not looking very impressive.

Bootstrap-10.jpg

Using Bootstrap we can style the table as easily as setting the class value. If you set the class of the table as table then the table will stretch to the all width available.

Bootstrap-11.jpg

And see how the table is rendering now.

Bootstrap-12.jpg
 
If you want to strip the table then that can be done by just setting the class value. A stripped table can be created in Bootstrap as in the following:

Bootstrap-13.jpg

As an output table will render as given in the following image:

Bootstrap-14.jpg

The full source code of the stripped table above is as follows:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.7.1.min.js"></script>

    <link href="Content/Site.css" rel="stylesheet" />

    <!-- Bootstrap references -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

   

    <h1>Bootstarp Sample</h1>

    <table class="table table-striped">

        <tr>

            <td>Dhananjay Kumar</td>

            <td>@debug_mode</td>

        </tr>

        <tr>

            <td>John Bristowe</td>

            <td>@johnbristowe</td>

        </tr>

        <tr>

            <td>Chris Eargle</td>

            <td>@kodefuguru</td>

        </tr>

         <tr>

            <td>Pinal Dave</td>

            <td>@pinaldave</td>

        </tr>

    </table>

</body>

</html>
 
In this article we focused on getting started with Bootstrap. In further posts we will get into the details of other aspects of Bootstrap. I hope you find this article useful. Thanks for reading.

COMMENT USING

Trending up