On the way of responsive web-designing BootStrap is a popular Framework. Bootstrap is open source & maintained in Github. It comes with many in-built classes. BootStrap is easy to use & saves programmer time to implement device optimized web. Whether it’s a mobile device or laptop BootStrap is capable to deal with any resolution. BootStrap supports all devices across the globe. You can download BootStrap from getbootstrap.com. To Getting Started with BootStrap read our Learn Bootstrap Tutorial.
BootStrap File Structure & How to Use them?
Downloaded version of BootStrap comes with CSS, Fonts & JS files. CSS Folder contains bootstrap.css, bootstrap-theme.css & their minified versions. Fonts folder contains glyph icons & JS folder contains bootstrap.js & it’s minified version. To Getting Started you can also use BootStrap CDN links. Look at the example below.
CDN link for BootStrap – CSS, JavaScript & Theme.
BootStrap Hello World!
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Hallo World!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Getting Started with BootStrap</h2> <div class="row"> <div class="col-sm-6"> Hallo World! </div> <div class="col-sm-6"> This screen is divided into two sections. </div> </div> </div> </body> </html>
While writing your first BootStrap application don’t forget to add viewport meta tag with initial-scale value to 1. Here 1 means 100% or you can say the original resolution.
BootStrap Grid System
To design a fluid layout Bootstrap divides each row in to 12 columns. For each column there is a specific class defined in BootStrap. For an example if you want to divide your screen into two panel left (25%) & right (75%). You can declare col-md-3 & col-md-9 to respective parallel div’s. As a basic rows must need to be inside a .container (fixed-width) or .container-fluid (full-screen) class. Followed by row columns need to declare inside.
<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-9">.col-md-9</div> </div>
In BootStrap Grid system Columns are in 4 Categories col-xs-* (Extra Small for phones), col-sm-* (Small for tablets), col-md-* (Medium for desktops) & col-lg-* (Large for larger desktops).
For an example if you want to implement 4 equal columns you can do the following.
<div class="row"> <div class="col-md-3">Column i</div> <div class="col-md-3">Column ii</div> <div class="col-md-3">Column iii</div> <div class="col-md-3">Column iv</div> </div>
BootStrap Table
From the classical days of web programming we do implement table to present data. Do you remember to adjust a table with various of resolution what we do. Generally we declare table width 100%. Similarly to alternate row colors we add some odd or even CSS classes. Like this many problems related to table is addressed in BootStrap. By simply declaring the class table you can make your table responsive. Look at the example below.
<div class="container"> <h2>BootStrap Table Demo</h2> <table class="table"> <thead> <tr> <th>Employee Name</th> <th>Email ID</th> </tr> </thead> <tbody> <tr> <td>Somanath Pradhan</td> <td>pradhan@demoemailid.com</td> </tr> <tr> <td>Rakesh Srivastab</td> <td>rakesh@demoemailid.com</td> </tr> <tr> <td>Supriti Kabi</td> <td>supriti@demoemailid.com</td> </tr> </tbody> </table> </div>
Other BootStrap Classes for Table
| .table-striped | This class helps to highlight alternate rows. |
| .table-bordered | Using this class you can add border to your table. |
| .table-hover | On mouse over of each row this class help to highlight that row. |
| .table-condensed | This class make tables more compact by cutting cell padding in half. |
To add these classes you need to follow parent class table. I mean if you want to add border to your table you can add class=”table table-bordered”.
Contextual classes to color table rows or individual cells
| .active | Using class active you can put hover color to a particular row or cell. |
| .success | Using class success you can highlight a positive action. |
| .info | Using info class you can neutral informative change or action. |
| .warning | Helps highlight warning data in a table. |
| .danger | Using this class you can show indication for negative actions. |
Text Related BootStrap Classes
| .text-left | Using this class you can align text to left. |
| .text-center | Using this class you can align text to center. |
| .text-right | Using this class you can align text to right. |
| .text-justify | Using this class you can justify you paragraph text lines. |
| .text-nowrap | Using this class you can protect your text to break into new line. |
| .text-lowercase | This class will convert all text to lower case. |
| .text-uppercase | This class will convert all text to upper case. |
| .text-capitalize | Using this class you can capitalize text. |
Button Related BootStrap Classes
| .btn | This is the parent class. |
| .btn-default | Using this class you can show Standard button. |
| .btn-primary | Provides extra weight to the button. |
| .btn-success | In case of a positive action will take place we can use this button class. |
| .btn-info | Contextual button for informational alert messages. |
| .btn-warning | In case of some warning need to show you can use this button class. |
| .btn-danger | If something will happen negative in that case you can use this. |
| .btn-link | This class will show link in place of button. |
These are the basics to Getting Started with BootStrap. If you are looking more in depth please refer getbootstrap.com
