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.
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.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
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.
<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>
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.
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%.
<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 class="col-md-8 col-sm-6">
<p>take up 66% of screen on a medium screen but 50% on a small screen</p>
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.
<p>this is visible on every screen size except on small screens</p>
<p>this is visible only on small screens</p>
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.