Responsive Web Design with Bootstrap
Bootstrap is the web’s most popular framework for designing responsive web applications. It gives front end developers the ability to quickly build fluid web pages with a set of common HTML and CSS components. Its easy to use because it doesn't require learning a different language just a set of naming conventions applied to HTML class names.
The Basics
Bootstrap’s most basic component is the Grid. The bootstrap Grid is used to define the width that each html component takes up on the page. The Grid divides the screen into 12 equal columns. Content elements can occupy at the least one column and at most 12. The style of your web page will determine the sizes that each content element will take up. you can view the code for generating common grid sizes(shown below) and on this codepen.
Getting started with the Grid.
- Include bootstrap css stylesheet and jQuery in your web project using the HTML code below.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>2. Use the class name .col-*screensize*-*columnsize* to specify the size of your content element. For example col-md-4 stands for a column that scales down to medium screen that takes up 4 columns.
<body>
<div class="col-md-4">this width is 1/3 of the screen size</div>
<div class="col-md-8">this width is 2/3 of the screen size</div>
</body>Screen Sizes
When designing a responsive web page you must consider the different screen sizes that the web page will appear on. A good way to think of this, is to consider the web page as existing in multiple states, where each state is a different screen size. Screen sizes in bootstrap are defined by a range of width sizes in the following schema.
Scaling Content
A responsive web page should scale so that it still looks good on different screens. The challenge there is this; the content layout on a large or normal screen size will not be appropriate when applied to a smaller screen. So content should not only shrink to fit smaller screen sizes, but the content layout should change! This can be achieved in two ways.
1.specify different column sizes based on screen sizes.
use this when you want to change the ratio of the content element as the screen size changes. For example if you want two divs to appear on a medium screen with a ratio of 33% to 66% respectively. But appear on a small screen with a ratio of 50% to 50%. example usage:<div class="col-md-4 col-sm-6">
<p>take up 33% the space on a medium screen but 50% on a small screen</p>
</div>
<div class="col-md-8 col-sm-6">
<p>take up 66% of screen on a medium screen but 50% on a small screen</p>
</div>
view full example on this codepen
The key thing to note about this technique is that the class now consists of two names. The first col-md-4 specifies the column divisions for all screens ≥ 992px indicated by the key value md. Second col-sm-6 and col-sm-12 specify the the column divisions for all screen widths between 768px and 992px indicated by the key sm.
2.alter the content displayed based on screen sizes.
use this when you want to change the content being displayed as the screen size changes. example usage:
<div class="hidden-xs">
<p>this is visible on every screen size except on small screens</p>
</div>
<div class="visible-xs">
<p>this is visible only on small screens</p>
</div>
This technique utilizes the key word hidden-* and visible-*. It works in the following way, hidden-* will hide the element’s content on the specified screen size. Visible will do the opposite and render the content visible only on the specified screen size. Using these two in combination a you can toggle different content for different screen sizes.
Navbar
I’ll end this discussion by going over the navigation bar. The basic UI consideration for the nav bar is to have it collapse when the screen size shrinks to ≤ 768px. Take for example, microsoft.com. The web view contains all of the navigation links aligned horizontally across the page, while as the mobile view is more compact and makes use of a navigation icon which when clicked displays the navigation links aligned vertically. Now we can imagine how this is accomplished. In the full web view designers make use the hidden-xs class name to display a full navbar visible for larger screens. on smaller screens the visible-xs class name is used to display the compact view with a dropdown button that makes use of some javascript to show the menu when clicked. Now this sounds all very tiresome, if only there were some magical tool that could take care of these different views for us? Well thats exactly what bootstrap offers us with the use of the class name navbar. The bootstrap documentation on setting up a navbar is superb so I will refer you to this link for examples.
