Post
Ask Question

Guide To The Basic Pillars Of Bootstrap

Bootstrap is the most popular front-end framework for developing responsive mobile first projects on the web in a much easier way. It uses HTML5, CSS, and Java Script. Bootstrap is completely free to download and use! Today, I am going to talk about the basics of Bootstrap and will go through the basic pillars of Bootstrap. Bootstrap is basically a collection of CSS + Java Script files; with the help of these libraries our normal HTML page becomes a responsive UI. To make a responsive UI we have to add our custom CSS file but with the help of the Bootstrap library you can easily make a great foundation for mobile first responsive UI. One point to remember: You still need to create your customer Css file in order to make flawless awesome web pages, or else it will be like any other Bootstrap website on the internet. Bootstrap is made using classes, and use them when you need them in your website.

Advantages :
 
  • Bootstrap Css library takes care of our UI to make it interactive mobile + desktop enable website, even developer can create a full furnished jaw dropping website easily.
  • The speed of  development can be increased with the help of Bootstrap.
  • As with increase in mobile first website designer need to work a lot in order to make the UI  adapt with all kind of devices, where as with the help of bootstrap this overhead has been reduced to quite extend.
  • Responsive Grid: As you go in depth of bootstrap and read about Grid you will see that 12 columns are grids are responsive and can adjust them self according to the device.
  • There are huge list of Components Dropdown menu, badges etc. Few have been discussed in this article.
  • Easy to read documentation: I personally believe if you want to learn Bootstrap from scratch http://getbootstrap.com/  documentation is easy and great to start with. I personally appreciate their efforts we can go back to the site whenever we want something needed in our View.
  • Themes: Bootstrap provide free colorful themes that can be used in our Web Application.
  • Support
Agenda: 
  • Installing Bootstrap
  • Grid System
  • Break Points
  • Container
  • Nesting Columns
  • Offsetting Columns
  • Push/ Pull
  • Typography Classes 
  • Alignment Classes
  • Tables
  • Buttons
  • Forms (Horizontal, Inline)
  • List Group
  • Drop Down 

Installing Bootstrap

Go to http://getbootstrap.com/

bootstrap

Image source: getbootstrap.com

Click on download.

download

Image source: http://getbootstrap.com/

If in production you want to use CDN (Content Delivery Network) we can use the following mentioned CDN links:

cdn

Image source: getbootstrap.com

For Bootstrap UI Demo, I am going to use Visual Studio IDE. Visual studio is Microsoft Integrated Development Environment for developing all kinds of applications for Microsoft and other platforms.

Create New Project
new

Select Empty

empty

Add new Item and add HTML page

page

If you are using MVC or Web Forms templates, Bootstrap libraries are by default loaded into script and content folders as shown below. Here I am going to use an empty template as mentioned above.

content

If you are trying without using Visual Studio IDE you need to download bootstrap from the above mentioned links, or else you can download the CDN links as well. So I am going to copy the CDN Links from the website and paste it in my UI view.

code

CDN Links of Bootstrap
  1. <!-- Latest compiled and minified CSS -->  
  2. < link rel = "stylesheet"  
  3. href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  
  4. integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"  
  5. crossorigin = "anonymous" >  
  6.   
  7.     <!-- Optional theme -->  
  8.     < link rel = "stylesheet"  
  9. href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"  
  10. integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"  
  11. crossorigin = "anonymous" >  
  12.   
  13.     <!-- Latest compiled and minified JavaScript -->  
  14.     < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"  
  15. integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"  
  16. crossorigin = "anonymous" > < /script>  
We need one more CDN link that is of JQuery because without JQuery they won’t work as expected.

So I will just copy the CDN link.

Paste the CDN link to the UI
  1. <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>  
Now all the files are present in the Project. Now we will test the same if they are actually working. So now we are going to add some html codes as shown below:

Our View
  1. <html>  
  2.   
  3. <head>  
  4.     <!-- Latest compiled and minified CSS -->  
  5.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">  
  6.   
  7.         <!-- Optional theme -->  
  8.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">  
  9.   
  10.             <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js">  
  11.                 </script>  
  12.   
  13.                 <!-- Latest compiled and minified JavaScript -->  
  14.                 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">  
  15.                     </script>  
  16. </head>  
  17.   
  18. <body>  
  19.     <h2>Index</h2>  
  20.     <input id="btnSubmit" type="submit" value="Click Me" class="btnbtn-danger" />  
  21. </body>  
  22.   
  23. </html>  
So if everything goes  fine we will find our Submit button as Red which is being interpreted from class="btnbtn-danger".
 
Let’s run our Web Page ctrl + f5,

index

We can see our Bootstrap is working properly;  See Button with background color red.

Let’s check whether Jquery is working or not -- I wrote a simple javascript confirm() method to display a dialog box.
  1. <inputid="btnSubmit"type="submit"value="Click Me"class="btnbtn-danger"onclick="returnconfirm('Getting started with Bootstrap');"  
index

Installing Bootstrap Offline: You can download Bootstrap library from getBootstrap.com if you are not using Visual studio else you can download the same from NUGET package manager as shown below.

nuget

Here I am going to download Bootstrap from Nuget Package manager and now see I have three folders added to my project.

 

  • Content
  • Font
  • Scripts

    content

So now we can easily use the fonts, css, scripts in our UI. Now I am going to use local Bootstrap which we have downloaded.

  1. <html>  
  2.   
  3. <head>  
  4.   
  5.     <linkhref="Content/bootstrap-theme.min.css" rel="stylesheet" />  
  6.     <linkhref="Content/bootstrap.min.css" rel="stylesheet" />  
  7.     <scriptsrc="Scripts/jquery-1.9.1.min.js">  
  8.         </script>  
  9.         <scriptsrc="Scripts/bootstrap.min.js">  
  10.             </script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <h2>Index</h2>  
  15.     <inputid="btnSubmit" type="submit" value="Click Me" class="btnbtn-danger" onclick="returnconfirm('Getting started with Bootstrap');" />  
  16. </body>  
  17.   
  18. </html>  
Let’s run our Web Page.

page

It works as expected.
So let’s start and cover our Basic agendas of the articles one by one:

Grid system:

Bootstrap includes mobile first Grid system which means it has been made out of 12 column responsive grids.

grid

So you can think it as a table as a normal rows and columns that is your content. Here we have 12 columns, the more rows we have the longer our website is from top to bottom. We can use as many columns we want to choose from the 12 columns. But if we increase the count from 12 all the rest columns expect 12 will come to new line.

Eg:
  • One column which takes all 12 columns.

    12 column

  • 2 Columns with take 6 columns each,

    banner

  • 2 Columns with 2 and 10 columns,

    side menu

  • We can create our custom neededversion based upon your need

Note: If we create a 13th column, that will automatically take a new line, you can test the same.

Desktop View

desktop

Mobile View

mobile

BREAK POINTsin Bootstrap

The grid created applies to the devices screen width greater than or equal to the break point sizes. The way we want to display our website to the devices (desktops, tablets and phones) we use Breakpoints. We have 4 sets of Breakpoints:

  • Large Devices Desktop screen >= 1200 px
  • Medium devices (old desktops) >=992px
  • Small devices Tablets >=768 px
  • Extra small devices <768 px

Let get started with sample grid,

  1. <html>  
  2.   
  3. <head>  
  4.     <linkhref="Content/bootstrap-theme.min.css" rel="stylesheet" />  
  5.     <linkhref="Content/bootstrap.min.css" rel="stylesheet" />  
  6.     <scriptsrc="Scripts/jquery-1.9.1.min.js">  
  7.         </script>  
  8.         <scriptsrc="Scripts/bootstrap.min.js">  
  9.             </script>  
  10. </head>  
  11.   
  12. <body>  
  13.   
  14.     <divclass="container">  
  15.   
  16.         <!--class="row" for adding a row -->  
  17.         <divclass="row">  
  18.             <!--class="col-length-1"> col-length-1 depends upon how much of 12 column grid do you want to use depending upon  
  19. your need 1 means it will use 1 column width  
  20. we can add a second css class by giving space   
  21. bg-success will give Green color to this column  
  22. -->  
  23.             <divclass="col-length-1 bg-success">Hey</div>  
  24.                 <divclass="col-length-1 bg-danger">i</div>  
  25.                     <divclass="col-length-1 bg-info">am</div>  
  26.                         <divclass="col-length-1 bg-warning">Bootstrap.</div>  
  27.                             <divclass="col-length-1 bg-primary">Bootstrap</div>  
  28.                                 <divclass="col-length-1 bg-success">is</div>  
  29.                                     <divclass="col-length-1 bg-danger">the </div>  
  30.                                         <divclass="col-length-1 bg-info">most </div>  
  31.                                             <divclass="col-length-1 bg-warning">popular.</div>  
  32.                                                 <divclass="col-length-1 bg-primary">HTML</div>  
  33.                                                     <divclass="col-length-1 bg-warning">CSS</div>  
  34.                                                         <divclass="col-length-1 bg-danger">JSsframework</div>  
  35.                                                             </div>  
  36.                                                             </div>  
  37.                                                             <h2>Index</h2>  
  38.                                                             <inputid="btnSubmit" type="submit" value="Click Me" class="btnbtn-danger" onclick="returnconfirm('Getting started with Bootstrap');" />  
  39. </body>  
  40.   
  41. </html>  
Container

Bootstrap needs Container to wrap site content elements.

There are two types of Container:

 

  1. <divclass="container"> ... </div>: Responsive fixed width
  2. <divclass="container-fluid">full width

    index

  3. <divclass="container-fluid"> ... </div>full width container spanning entire viewport.

    index

As a simple grid content we should follow certain rules,

  • Rows should be placed inside a container as mentioned above i.e.( <divclass="container"> or <divclass="container-fluid">)
  • Use rows to created horizontalcolumns<divclass="row">
  • Columns should be immediate children of rows<divclass="col-length-1 bg-success">Hey</div>
  • If you add more than 12th grid column the 13th and vice versa will automatically take a new line.

    index
    index

  • But we can see the webpage is not showing appropriatly in mobile devices. You might be wondering if I am making a fool of you that it's responsive. Let’s make them Mobile first enable UI.

  • So if we want our columns to simply stack in smaller devices, use the extra small and medium device grid classes col-xs-* col-sm-*to your columns as shown below.

    device

    1. <!--class="row" for adding a row -->  
    2. <divclass="row">  
    3. <!--class="col-length-1"> col-length-1 depends upon how much of 12 column grid do you want to use depending upon  
    4. your need 1 means it will use 1 column width  
    5. we can add a second css class by giving space  
    6. bg-success will give Green color to this column  
    7. -->  
    8. <divclass="col-length-1 col-xs-1 col-sm-1 bg-success">Hey</div>  
    9. <divclass="col-length-1 col-xs-1 col-sm-1 bg-danger">i</div>  
    10. <divclass="col-length-1 col-xs-1 col-sm-1 bg-info">am</div>  
    11. <divclass="col-length-1 col-xs-1 col-sm-1 bg-warning">Bootstrap.</div>  
    12. <divclass="col-length-1 col-xs-1 col-sm-1 bg-primary">Bootstrap</div>  
    13. <divclass="col-length-1 col-xs-1 col-sm-1 bg-success">is</div>  
    14. <divclass="col-length-1 col-xs-1 col-sm-1 bg-danger">the </div>  
    15. <divclass="col-length-1 col-xs-1 col-sm-1 bg-info">most </div>  
    16. <divclass="col-length-1 col-xs-1 col-sm-1 bg-warning">popular.</div>  
    17. <divclass="col-length-1 col-xs-1 col-sm-1 bg-primary">HTML</div>  
    18. <divclass="col-length-1 col-xs-1 col-sm-1 bg-warning">CSS</div>  
    19. <divclass="col-length-1 col-xs-1 col-sm-1 bg-danger">JSsframework</div>  
    20. </div>  
    Let make it little bit more cleared by makingcol-xs-1 col-sm-1 to col-xs-4 col-sm-4,

    device

    1. <divclass="container-fluid">  
    2. <!--class="row" for adding a row -->  
    3. <divclass="row">  
    4. <!--class="col-length-1"> col-length-1 depends upon how much of 12 column grid do you want to use depending upon  
    5. your need 1 means it will use 1 column width  
    6. we can add a second css class by giving space  
    7. bg-success will give Green color to this column  
    8. -->  
    9. <divclass="col-length-1 col-xs-4 col-sm-4 bg-success">Hey</div>  
    10. <divclass="col-length-1 col-xs-4 col-sm-4 bg-danger">i</div>  
    11. <divclass="col-length-1 col-xs-4 col-sm-4 bg-info">am</div>  
    12. <divclass="col-length-1 col-xs-4 col-sm-4 bg-warning">Bootstrap.</div>  
    13. <divclass="col-length-1 col-xs-4 col-sm-4 bg-primary">Bootstrap</div>  
    14. <divclass="col-length-1 col-xs-4 col-sm-4 bg-success">is</div>  
    15. <divclass="col-length-1 col-xs-4 col-sm-4 bg-danger">the </div>  
    16. <divclass="col-length-1 col-xs-4 col-sm-4 bg-info">most </div>  
    17. <divclass="col-length-1 col-xs-4 col-sm-4 bg-warning">popular.</div>  
    18. <divclass="col-length-1 col-xs-4 col-sm-4 bg-primary">HTML</div>  
    19. <divclass="col-length-1 col-xs-4 col-sm-4 bg-warning">CSS</div>  
    20. <divclass="col-length-1 col-xs-4 col-sm-4 bg-danger">JSsframework</div>  
    21. </div>  
    22. </div>  
    bootstrap
    class="col-length-1 col-xs-4 col-sm-4 bg-success" means if it’s is a large screen we want to take it as one column, if it’s small we want it to be 4 and lastly for extra small  also 4 columns.

    Note: If we want our UI to be responsive for all the break points we have to define all sets of break in proper formats.
    1. <divclass="row">  
    2. <!--class="col-length-1"> col-length-1 depends upon how much of 12 column grid do you want to use depending upon  
    3. your need 1 means it will use 1 column width  
    4. we can add a second css class by giving space  
    5. bg-success will give Green color to this column  
    6. -->  
    7. <divclass="col-length-1 col-xs-4 col-sm-2 bg-success">Hey</div>  
    8. <divclass="col-length-1 col-xs-4 col-sm-2 bg-danger">i</div>  
    9. <divclass="col-length-1 col-xs-4 col-sm-2 bg-info">am</div>  
    10. <divclass="col-length-1 col-xs-4 col-sm-2 bg-warning">Bootstrap.</div>  
    11. <divclass="col-length-1 col-xs-4 col-sm-2 bg-primary">Bootstrap</div>  
    12. <divclass="col-length-1 col-xs-4 col-sm-2 bg-success">is</div>  
    13. <divclass="col-length-1 col-xs-4 col-sm-2 bg-danger">the </div>  
    14. <divclass="col-length-1 col-xs-4 col-sm-2 bg-info">most </div>  
    15. <divclass="col-length-1 col-xs-4 col-sm-2 bg-warning">popular.</div>  
    16. <divclass="col-length-1 col-xs-4 col-sm-2 bg-primary">HTML</div>  
    17. <divclass="col-length-1 col-xs-4 col-sm-2 bg-warning">CSS</div>  
    18. <divclass="col-length-1 col-xs-4 col-sm-2 bg-danger">JSsframework</div>  
    19. </div>  

Nesting columns

Nesting your content inside a Grid: Add a new row with col-lg-9. It’s is not required to always use 12 columns.

  1. <divclass="container">  
  2.     <!--class="row" for adding a row -->  
  3.     <divclass="row">  
  4.         <divclass="col-sm-4 bg-danger text-center">  
  5.             <p>1st div </p>  
  6.   
  7.             <divclass="row">  
  8.   
  9.                 <divclass="col-lg-8 bg-success text-center" ">  
  10. <p>Nested div</p>  
  11. </div>  
  12.   
  13. <divclass="col-lg-4 bg-success text-center "">  
  14.                     <p>Nested div</p>  
  15.                     </div>  
  16.                     </div>  
  17.   
  18.                     </div>  
  19.   
  20.                     <divclass="col-sm-4 bg-success text-center" ">  
  21. <p>2nd div </p>  
  22. <divclass="row ">  
  23.   
  24. <divclass="col-lg-8 bg-warning text-center "">  
  25.                         <p>Nested div</p>  
  26.                         </div>  
  27.   
  28.                         <divclass="col-lg-4 bg-info text-center" ">  
  29. <p>Nested div</p>  
  30. </div>  
  31. </div>  
  32. </div>  
  33. </div>  
  34. </div>  
nested

Offsetting columns

What If I want my 2nd div to be on right hand side and 1st div in extreme left? Than we make use of Offset class. Move column to the right using .col-md-offset-4. These classes increase the left margin of a column.
  1. <divclass="container">  
  2.     <!--class="row" for adding a row -->  
  3.     <divclass="row">  
  4.         <divclass="col-sm-4 bg-danger text-center">  
  5.             <p>1st div </p>  
  6.   
  7.             <divclass="row">  
  8.   
  9.                 <divclass="col-lg-8 bg-success text-center" ">  
  10. <p>Nested div</p>  
  11. </div>  
  12.   
  13. <divclass="col-lg-4 bg-success text-center "">  
  14.                     <p>Nested div</p>  
  15.                     </div>  
  16.                     </div>  
  17.   
  18.                     </div>  
  19.   
  20.                     <divclass="col-sm-4 bg-success text-center col-sm-offset-4">  
  21.                         <p>2nd div </p>  
  22.                         <divclass="row">  
  23.   
  24.                             <divclass="col-lg-8 bg-warning text-center" ">  
  25. <p>Nested div</p>  
  26. </div>  
  27.   
  28. <divclass="col-lg-4 bg-info text-center "">  
  29.                                 <p>Nested div</p>  
  30.                                 </div>  
  31.                                 </div>  
  32.                                 </div>  
  33.                                 </div>  
  34.                                 </div>  
nested

Column ordering: Push /Pull

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes. Push and Pull basically means we can swap two columns around as the screen size shrinks (means when we restore down our browser).

Eg:
  1. <divclass="container">  
  2.     <divclass="row">  
  3.         <divclass="col-lg-12">  
  4.             <h2><small>Column ordering in </small>Bootstrap</h2>  
  5.             </div>  
  6.             </div>  
  7.             <divclass="row">  
  8.                 <divclass="col-sm-4">  
  9.                     <imgsrc="Images/bootstrap.png" height="100" width="200" />  
  10.                     </div>  
  11.                     <divclass="col-sm-8"> Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</div>  
  12.                         </div>  
  13.                         </div>  
bootstrap
 
And on Web page shrink we want to change the order text going above and image going below we make use of push and pull.
  1. <divclass="container">  
  2.     <divclass="row">  
  3.         <divclass="col-lg-12">  
  4.             <h2><small>Column ordering in </small>Bootstrap</h2>  
  5.             </div>  
  6.             </div>  
  7.             <divclass="row">  
  8.                 <divclass="col-lg-4 col-lg-push-8">  
  9.                     <imgsrc="Images/bootstrap.png" height="100" width="200" />  
  10.                     </div>  
  11.                     <divclass="col-lg-8 col-lg-pull-4"> Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</div>  
  12.                         </div>  
  13.                         </div>  
bootstrapTypography Classes in Bootstrap:

Headings

All the normal Headings (<h1> to <h6>) are available through classes as shown below:
  1. <divclass="container">  
  2.     <divclass="row">  
  3.         <!--Here This is a Header 1 will be appear as a Heading while (with small text) will appear as a Secondaary text -->  
  4.         <divclass="col-lg-12">  
  5.             <h1>This is a Header 1<small>with small text</small></h1>  
  6.             <h2>This is a Header 1<small>with small text</small></h2>  
  7.             <h3>This is a Header 1<small>with small text</small></h3>  
  8.             <h4>This is a Header 1<small>with small text</small></h4>  
  9.             <h5>This is a Header 1<small>with small text</small></h5>  
  10.             <h6>This is a Header 1<small>with small text</small></h6>  
  11.             </div>  
  12.   
  13.             </div>  
  14.             </div>  
header

We also have a heading classes that we can use to append that css to other paragraphs or other elements as shown below:
  1. <divclass="container">  
  2.     <divclass="row">  
  3.         <!--Here headings style added to p -->  
  4.         <divclass="col-lg-12">  
  5.             <pclass="h1">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>  
  6.                 <pclass="h2">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>  
  7.                     <pclass="h3">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>  
  8.                         <pclass="h4">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>  
  9.                      <pclass="h5">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>  
  10.                 <pclass="h6">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>  
  11.             </div>  
  12.      </div>  
  13. </div>  
bootstrap
Del: For indicating that text no longer exist and have been deleted.
  1. <del>Deleted TEXT</del>  
This will appear as deleted text (just like a crossed word).

Mark: Highlighting a text
  1. <p>my name is <mark>Saillesh PAWAR</mark></p>  
Ins: forindicating newly added document.
  1. <ins>Added to the content.</ins>  
header

Alignment Classes : Alignment classes are used to align the text.

Example:
  1. <divclass="container">  
  2.     <divclass="row">  
  3.         <divclass="col-lg-12 h1 text-center">Alignment Classes</div>  
  4.             </div>  
  5.             <divclass="row">  
  6.                 <!--Here style for paragraph -->  
  7.                 <divclass="col-xs-12">  
  8.                     <pclass="text-left">Left Text</p>  
  9.                         <pclass="text-center">Centered Text</p>  
  10.                             <pclass="text-right">Right Text</p>  
  11.                                 <pclass="text-justify">Justified Text</p>  
  12.                                     <pclass="text-nowrap">No Wrap Text</p>  
  13.                                         </div>  
  14.                                         </div>  
  15.                                         </div>  
alignment

Block quotes: quoting block of another source content into your content

Use a Footer tag for naming the source
  1. <divclass="container">  
  2.     <divclass="row">  
  3.         <divclass="col-lg-12 h1 text-center">Blockquotes and Footer</div>  
  4.   
  5.             </div>  
  6.             <divclass="row">  
  7.                 <!--Here style for paragraph -->  
  8.                 <divclass="col-xs-12">  
  9.                     <blockquote>Learning Bootstrap Step by Step</blockquote>  
  10.                     <footer>- http://getbootstrap.com/css</footer>  
  11.                     </div>  
  12.   
  13.                     </div>  
  14.                     </div>  
blockquote

Tables in Bootstrap:

Let’s take sample table

  1. <divclass="container">  
  2.     <divclass="row">  
  3.         <divclass="col-lg-12 h1 text-center">Tables in Bootstrap</div>  
  4.   
  5.             </div>  
  6.             <divclass="row">  
  7.                 <!--Here style for paragraph -->  
  8.                 <divclass="col-xs-12">  
  9.                     <table>  
  10.                         <tr>  
  11.                             <th>First Name</th>  
  12.                             <th>Second Name</th>  
  13.                             <th>Address</th>  
  14.                             <th>Age</th>  
  15.   
  16.                         </tr>  
  17.                         <tr>  
  18.                             <td>Saillesh</td>  
  19.                             <td>Pawar</td>  
  20.                             <td>Mumbai</td>  
  21.                             <td>26</td>  
  22.                         </tr>  
  23.                         <tr>  
  24.                             <td>Ankit</td>  
  25.                             <td>Negi</td>  
  26.                             <td>Dehradun</td>  
  27.                             <td>27</td>  
  28.                         </tr>  
  29.                         <tr>  
  30.                             <td>Nishant</td>  
  31.                             <td>Negi</td>  
  32.                             <td>Lonavla</td>  
  33.                             <td>26</td>  
  34.                         </tr>  
  35.   
  36.                         <tr>  
  37.                             <td>Ashish</td>  
  38.                             <td>Negi</td>  
  39.                             <td>Dehradun</td>  
  40.                             <td>27</td>  
  41.                         </tr>  
  42.                     </table>  
  43.                     </div>  
  44.                     </div>  
  45.                     </div>  
tables
 
How unprofessional our table looks. In Bootstrap we don’t have any default class for the table, so if we want to style our table we need a class called table. So let’s add the same.

Eg: <tableclass="table">

tables
 Now looks pretty decent as compared to the previous table view. We can distinguish the rows and columns easily. Let’s add other classes and make our tables more attractive.

Class: table-stripped:add zebra-striping to any table row.

Eg: <tableclass="table table-striped">

tables
You can easily see every alternate row has the zebra striping color.

Class:.table-bordered: for borders on all side of the table

Eg: <tableclass="table table-striped table-bordered">

tables
We can see border on all side of the table.

Class: .table-hover: usedto enable a hover state on table rows

Eg: <tableclass="table table-striped table-bordered table-hover">

table
As soon as I hover the mouse to Nishant 3rd row the color automatically changes.

Condensed table

.table-condensed: to make table more compact by cutting the padding by half(make the table smaller)

Eg: <tableclass="table table-striped table-bordered table-hover table-condense">

table
We can also add different classes to the rows as well that are called Contextual classes as shown below:

Active Shows the hover color to a particular row/ display active by default
Success Indicates successful action
Info Indicating a neutral change
Warning Indicates warning
danger Indicate a dangerous action


These classes are also available in button, bg etc. classes. Let’s use the same practically.

table
Buttons: Normally we have three ways of creating a button.

 

  • <inputid="Button1"type="button"value="button"/>
  • <inputid="Reset1"type="reset"value="reset"/>
  • <inputid="Submit1"type="submit"value="submit"/>

In bootstrap we have 4 different ways to create a button.

  • <aclass="btnbtn-default"href="Bootstrap.com">Bootstrap link</a> link to be looked like button
  • <buttonclass="btnbtn-default"type="submit">Button</button> running a script
  • <inputclass="btnbtn-default"type="button"value="Input">
  • <inputclass="btnbtn-default"type="submit"value="Submit">

Applying contextual classes to the button i.e. danger, default, success etc.

  1. <divclass="row">  
  2. <!--Here style for paragraph -->  
  3. <divclass="col-xs-7">  
  4. <buttontype="button"class="btnbtn-default">Click me</button>  
  5. <buttontype="button"class="btnbtn-danger">Click me</button>  
  6. <buttontype="button"class="btnbtn-success">Click me</button>  
  7. <buttontype="button"class="btnbtn-primary">Click me</button>  
  8. <buttontype="button"class="btnbtn-warning">Click me</button>  
  9. <buttontype="button"class="btnbtn-info">Click me</button>  
  10. <buttontype="button"class="btnbtn-link">Click Link</button>  
  11. </div>  
button
Great isn’t it? We have created a button to be like Link and one link to be like button. We can see how interactive the buttons look. We can decide where to use them.


Sizes:

Let’s go and walk throw the button sizes classes and how easy it is to use these classes and create user interactive fancy button sizes.

.btn-lg: for large button size
.btn-sm: for small button size
.btn-xs: for extra small button size.

button
We can see the Buttons as mentioned above in Button sizes in Bootstrap, how interactive they look and we can use them according to our need.

Forms:

Let’s start and learn how to create a basic and interactive form and how to add input elements.
We create a normal form tag and use the class “form-group” for optimum spaces.

class="form-control"to add to html elements to make them good look all the <input>, <textarea>, and <select> are set to width 100%.

class="help-block"> to create help text to the User to display some information to the User.

  1. <html>  
  2.   
  3. <head>  
  4.     <style>  
  5.         .imagestyle {  
  6.             background-size: cover;  
  7.         }  
  8.     </style>  
  9.     <linkhref="Content/bootstrap-theme.min.css" rel="stylesheet" />  
  10.     <linkhref="Content/bootstrap.min.css" rel="stylesheet" />  
  11.     <scriptsrc="Scripts/jquery-1.9.1.min.js">  
  12.         </script>  
  13.         <scriptsrc="Scripts/bootstrap.min.js">  
  14.             </script>  
  15.   
  16.   
  17. </head>  
  18.   
  19. <body>  
  20.   
  21.   
  22.     <divclass="container">  
  23.         <divclass="row">  
  24.             <divclass="col-sm-12">  
  25.                 <h1>Form</h1>  
  26.                 <formaction="controller/action" method="post">  
  27.                     <divclass="form-group">  
  28.                         <labelfor="inputName">Customer Name</label>  
  29.                             <inputid="txtName" class="form-control" placeholder="Enter your Name" type="text" />  
  30.                             </div>  
  31.                             <divclass="form-group">  
  32.   
  33.   
  34.                                 <labelfor="exampleInputEmail1">Email address</label>  
  35.                                     <inputtype="email" class="form-control" id="InputEmail" placeholder="Email">  
  36.                                         </div>  
  37.                                         <divclass="form-group">  
  38.   
  39.                                             <labelfor="exampleInputPassword1">Password</label>  
  40.                                                 <inputtype="password" class="form-control" id="InputPassword1" placeholder="Password">  
  41.                                                     </div>  
  42.                                                     <divclass="form-group">  
  43.                                                         <labelfor="exampleInputFile">File input</label>  
  44.                                                             <inputtype="file" id="InputFile">  
  45.                                                                 <pclass="help-block">*.txt,*.zip files are allowed</p>  
  46.                                                                     </div>  
  47.                                                                     <divclass="checkbox">  
  48.                                                                         <label>  
  49. <inputtype="checkbox"> Check me out  
  50. </label>  
  51.                                                                         </div>  
  52.                                                                         <buttontype="submit" class="btnbtn-default">Submit</button>  
  53.                                                                             </form>  
  54.                                                                             </div>  
  55.                                                                             </div>  
  56.   
  57.                                                                             </div>  
  58. </body>  
  59.   
  60. </html>  
form
We can have the width  be 100% as we apply class="form-control"to the input elements. So that's a  pretty awesome basic Form with the help of Bootstrap.

Horizontal Forms:

Let’s start creating inline and horizontal forms.

Inline form: 

So we already have an above form with us which now we want to convert into inline form. Bootstrap easily converts a normal form into inline form by simply associating the class with the form to make the form inline form. Simple add class class="form-inline"insideform control. Let’s run our web page with the changes:

inline
You can look at that we have an Inline form all elements next to each other.

Horizontal Forms:

Change the class class="form-inline" to class="form-horizontal" that is the class we need to create Horizontal form.

Now in order to create a horizontal form we need to define grid classes to label and forms elements as shown below:
  1. <divclass="form-group">  
  2.     <labelfor="inputName" class="col-lg-2">Customer Name</label>  
  3.         <divclass="col-lg-10">  
  4.             <inputid="txtName" class="form-control" placeholder="Enter your Name" type="text" />  
  5.             </div>  
  6.             </div>  
  7.   
  8.   
  9.             <html>  
  10.   
  11.             <head>  
  12.                 <style>  
  13.                     .imagestyle {  
  14.                         background-size: cover;  
  15.                     }  
  16.                 </style>  
  17.                 <linkhref="Content/bootstrap-theme.min.css" rel="stylesheet" />  
  18.                 <linkhref="Content/bootstrap.min.css" rel="stylesheet" />  
  19.                 <scriptsrc="Scripts/jquery-1.9.1.min.js">  
  20.                     </script>  
  21.                     <scriptsrc="Scripts/bootstrap.min.js">  
  22.                         </script>  
  23.   
  24.   
  25.             </head>  
  26.   
  27.             <body>  
  28.   
  29.   
  30.                 <divclass="container">  
  31.                     <divclass="row">  
  32.                         <divclass="col-sm-12">  
  33.                             <h1>Horizontal Form</h1>  
  34.                             <formaction="controller/action" method="post" class="form-horizontal">  
  35.                                 <divclass="form-group">  
  36.                                     <labelfor="inputName" class="col-lg-2">Customer Name</label>  
  37.                                         <divclass="col-lg-10">  
  38.                                             <inputid="txtName" class="form-control" placeholder="Enter your Name" type="text" />  
  39.                                             </div>  
  40.                                             </div>  
  41.                                             <divclass="form-group">  
  42.   
  43.   
  44.                                                 <labelfor="exampleInputEmail1" class="col-lg-2">Email address</label>  
  45.                                                     <divclass="col-lg-10">  
  46.                                                         <inputtype="email" class="form-control" id="InputEmail" placeholder="Email">  
  47.                                                             </div>  
  48.                                                             </div>  
  49.                                                             <divclass="form-group">  
  50.   
  51.                                                                 <labelfor="exampleInputPassword1" class="col-lg-2">Password</label>  
  52.                                                                     <divclass="col-lg-10">  
  53.                                                                         <inputtype="password" class="form-control" id="InputPassword1" placeholder="Password">  
  54.                                                                             </div>  
  55.                                                                             </div>  
  56.                                                                             <divclass="form-group">  
  57.                                                                                 <labelfor="exampleInputFile" class="col-lg-2">File input</label>  
  58.                                                                             <divclass="col-lg-10">  
  59.                                                                         <inputtype="file" id="InputFile">  
  60.                                                              </div>  
  61.                                                        <pclass="help-block">*.txt,*.zip files are allowed</p>  
  62.                                                    </div>  
  63.                                              <divclass="checkbox">  
  64.                                         <labelclass="col-lg-2">  
  65.                                     <inputtype="checkbox"> Check me out  
  66.                                </label>  
  67.                                </div>  
  68.                           <divclass="col-lg-10 col-lg-push-2">  
  69.                         <buttontype="submit" class="btnbtn-default">Submit</button>  
  70.                       </div>  
  71.                       </form>  
  72.                    </div>  
  73.                    </div>  
  74.   
  75.                    </div>  
  76.             </body>  
  77.   
  78.             </html>  
horizontal

List Group:

Now I am going to talk about really cool Bootstrap components; i.e., list Group components:

What list group does is to allow us to enclose a list in a box of item or a kind of table. We will use badge class badges are numerical indicator defining how many items are present in the list.

  1. <divclass="container">  
  2.     <divclass="row">  
  3.         <divclass="col-sm-12">  
  4.             <h1>LIST Group</h1>  
  5.   
  6.             </div>  
  7.             <divclass="col-sm-4">  
  8.                 <ulclass="list-group">  
  9.                     <liclass="list-group-item">  
  10.                         <spanclass="badge">1</span> Cricket  
  11.                             </li>  
  12.                             <liclass="list-group-item">  
  13.                                 <spanclass="badge">2</span> Football  
  14.                                     </li>  
  15.                                     <liclass="list-group-item">  
  16.                                         <spanclass="badge">3</span>BasketBall  
  17.                                             </li>  
  18.                                      <liclass="list-group-item">  
  19.                                  <spanclass="badge">4</span> Volleyball  
  20.                               </li>  
  21.                            </ul>  
  22.                     </div>  
  23.                  </div>  
  24.               </div>  
list
We can see how interactive it seems as compared toa normal List. We can add other classes also to make it more interactive as shown below:

list-group

DropDown Menu in Bootstrap

If we want to create a dropdownjust create a div and add a class.

Create div with class= dropdown
  1. <divclass="dropdown">  
  2.   
  3.     Creating a button  
  4.     <!--dropdown-toggle for showing drop down -->  
  5.     <!-- data-toggle="dropdown" To open the dropdown menu  
  6. <buttonclass="btnbtn-default btn-danger dropdown-toggle"typeof="button"id="dropdownmain"data-toggle="dropdown">  
  7.   
  8. Create unordered list with class class="dropdown-menu"aria-labelledby="dropdownmain">  
  9.   
  10. <!-- aria-labelledby="dropdownmain"> ties this id button to this unordered list   
  11.   
  12. <ulclass="dropdown-menu"aria-labelledby="dropdownmain">  
  13. <li><ahref="">India</a></li>  
  14. <li><ahref="">Pakistan</a></li>  
  15. <li><ahref="">Australia</a></li>  
  16. <li><ahref="">USA</a></li>  
  17. </ul>  
So let’s run our program and check our Dropdown list created using bootstrap.

drop down
You can download templates for your mobile first website from the Bootstrap official website or bootswatch.com and checkout the coolness.

I hope this basic article towards learning Bootstrap will be helpful to understand the basic concepts of Bootstrap and how effective and easily we can create our mobile first responsive website with the help of Bootstrap.

Read more articles on Bootstrap:


Similar Articles