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.
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.
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.
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>
2. Then, we have to define the container inside the body tag as follows:
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.