Impress your friends when you show them a page that looks fantastic across any and all devices and screens! Start the timer! You’ll be a maker of responsive pages in 15 minutes!
For Bootstrap, you can either download it and include it or use the code below to pull it from Bootstrap’s CDN buddy, MaxCDN.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Same story with jQuery. You can use Google’s hosted library or download your own copy. Here is the Google option:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2. Create an HTML grid layout
Your page must use the HTML5 doctype so make sure it uses the same doctype listed below.
<!DOCTYPE html>
<html>
... jQuery/Bootstrap scripts/css from above...
<body>
<!-- responsive layout -->
</body>
</html>
Responsive frameworks usually work within some sort of grid. For Bootstrap, your layout is separated into 12 %-based columns equaling 100% of the container. You can divvy up your content however you see fit within those columns via the different column css classes.
There are 3 main column classes. There is .col-sm-n for 768px and up, .col.md-n for 992px and up, and .col.lg-n for 1200px and up. Keep in mind, in the class names above, n is the number of columns. So .col-sm-3, .col-md-8, .col-lg-4 are all valid examples.
You can apply multiple column classes to get different layouts based on the width of the screen. To use the same layout across the board, you would use one of the lowest column classes, .col-sm-n.
For example, if you want your layout to have a left nav that takes up 3 columns and the rest of the content to take the remaining 9 columns. 9 + 3 = 12.
<div class="container">
<div class="row">
<div class="col-sm-3">Left Content</div>
<div class="col-sm-9">Right Content</div>
</div>
</div>
If you want the left content and right content to both take up the width of the screen that is 992px or less (.col-sm-n), but maintain the 3 and 9 column layout for anything above (.col-md-n and .col-lg-n).
<div class="container">
<div class="row">
<div class="col-md-3">Left Content</div>
<div class="col-md-9">Right Content</div>
</div>
</div>