Bootstrap is another javascript library to help us making our websites better and simpler. It’s main core is to be a handful set of CSS styles to make your website automatically responsive, this is, the stlysheet has already covered the media queries required to make the styles responsive so that on using those styles all your website will.
Let’s see it in action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="../../Content/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
There are a few things required to make Bootstrap work apart from calling your generated-by-less bootstrap.css file. You need to use HTML5, so make sure you declare the document as html5. You also need to add the meta “viewport” to help with the responsiveness. To make this browser-compatible, you will need to add that hack for older IEs than IE9.
Once that’s done you will already notice some changes on your page styling, but now to make it responsive you have to set the rules, this is, establishing the page layout, its boxes, its headers, its columns, etc. and how will they behave depending on screen size (remember we are following an approach which consists on solving the problem for network, cpu, gpu and screen, not the device, so it won’t react depending on the device but on the screen).
To do that we need first of all a container, so we added a div with the class container. Then we need to set the rows of content and inside those rows we can add columns. Rows and columns have different sizes depending on how much padding you want to give them, also, the layout uses a 12 columns approach so that you can divide your page easily into a 2 column, 3 column, 4 column or any other combination you want between those 12 columns.
Once you have that done, you will see how it reacts to the screen size, just resize your window on your desktop to see how it works. That’s Responsive!
But Bootstrap has that and more, it has some default styles for your page forms, inputs, headers, etc. it also has some plugins to add new features like accordions or texturing, it works fine with LESS in case you want to change your styles using the precompiler, and combines all that with jQuery, as it requires jQuery to run it’s plugins.
Bootstrap is easy and quick to learn how it works, but learning all the possible classes and features that it has can take some time, though, the counterpart of that is that when moving from one company to another or when having a new developer, the styles used are going to become a like-standard allowing the developer to get his hands on the code much quickly.
