Responsive Web development was conceptualised to make websites look good across the spectrum of devices, ranging from mobiles to desktops to large screens. Bootstrap presupposes that the user has no designing knowledge whatsoever, but merely wishes to write some HTML according to Bootstrap specifications.
The Bootstrap framework is an open source collection of tools used to develop responsive (here, the word means layouts that adapt to desktops as well as for small screen devices like mobiles and tabs) websites. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton in August 2011 to increase consistency across internal tools. It includes HTML and CSS based design templates for typography, forms, buttons, tables, image carousels and many others, as well as an optional JavaScript library. It assumes that we have no designing knowledge, and all we want to do is write some HTML as per the Bootstrap specifications. In short, Twitter Bootstrap has already written a CSS style sheet; we just have to use it.
Grid basics of Bootstrap
Bootstraps grid system is fully responsive and allows us to divide our page into 12 columns. If we dont want to use all 12 columns individually, we can group the columns together to create wider columns using different classes.
This grid system has four classes:
1. xs (for phones)
2. sm (for tablets)
3. md (for desktops)
4. lg (for larger desktops)
These classes can also be combined together to create more dynamic and flexible layouts.
The structure of a Bootstrap grid is as follows:
<div class=row> <div class=col-*-*></div> <div class=col-*-*></div> <div class=col-*-*></div> </div>
First, we have to define the row; then, we have to define columns according to our requirements.
Heres how we replace the first * with the class according to the screens (like xs, sm, md, lg) and the second * with column numbers between 1 to 12, but their total should not exceed 12.
For example:
col-md-4
Styling tables
We have to give the class table to give basic styling to our table:
<table class="table"> </table>
Different classes can be given for table to change the basic styling, like:
1. table-striped class to add zebra-stripes to a table.
2. table-bordered class to add borders on all sides of the table and cells.
3. table-hover class enables a hover effect on table rows.
4. table-responsive class to create a responsive table.
Styling images
We have to give class names to our images, according to requirements, as shown below:
<img class=classname src=our-image.jpg alt=Our Image>
Here we have to replace classname with the classes given below, as per our needs:
1. img-rounded class adds rounded corners to an image.
2. img-circle class shapes the image to a circle.
3. img-thumbnail class shapes the image to a thumbnail.
4. img-responsive class makes the images responsive.
The first responsive layout using Bootstrap
Here is our responsive layout using Bootstrap:
<!DOCTYPE html> <html lang=en> <head> <title>Our First Layout</title> <meta charset=utf-8> <meta name=viewport content=width=device-width, initial-scale=1> <link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css> <script src=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script> </head> <body> <div class=container-fluid> <h1>Our page title comes here..</h1> <p>Our page description comes here..</p> <div class=row> <div class=col-sm-4>first column of width 4 out of 12</div> <div class=col-sm-4>second column of width 3 out of 12</div> <div class=col-sm-4>third column of width 5 out of 12</div> </div> </div> </body> </html>
Description
1. First, we have to link both the CSS and JavaScript files of Bootstrap to our HTML; CSS to http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css, and JavaScript to http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js.
2. Then, we have to define the container inside the body tag as follows:
<div class=container-fluid>
Here, we can use the class container-fluid to get a container without a margin and the class container to get a container with a margin.
3. Then we define our page title.
4. This is followed by defining the page description.
5. Then, before defining our columns, we define our row for them.
6. Last of all, we define three columns of width 3, 4, 5, with a total of 12.
I hope you really liked this exercise. Bootstrap is a great framework, and easy to use and learn. If you do not have a real website to develop right now, you can work with a dummy project. Create a wireframe of your favourite websites and try to rebuild them from scratch using Bootstrap. This is a great method for learning this framework.
