To implement responsive web-page design Bootstrap employs
Grid System,
with predefined screen sizes xs (< 576px), sm (≥ 576px), md (≥ 768px), ...
For a given screen size, there are 12 columns that you can utilize to build your layout.
Since we have multiple screen sizes you often need to have multiple layouts.
The idea is to implement column system for selected screens.
Since we have limited time we implement support only for two breakpoints: 768px and 1200px.
This leave us with three screens: xs < 768px, md ≥ 768px, and xl ≥ 1200px.
Try to resize the windows to see the change.
Should be finish you can take a read about
CSS Units
.
Demonstration: Responsive Web Design
Browsers on those devices scaled down the entire web page to fit the screen.
If the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.
We already talked about
Bootstrap Grid system
, but how we can use it and how it is implemented?
The container we have implemented provide us effectively with three screen sizes to take care of.
In the next step we can have separate layout for each of them, for example:
Implementing all 12 columns for all screen sizes is too labour intensive for us.
A solution would be to employ CSS preprocessor but you are not allowed to do so ...
Exercise: Grid system
Download
this HTML document
and fix TODOs in the source code.
In order to test try resizing the window.
The results should look like this on screen:
[0, 767>
<768, 1199>
<1200, inf >
Once done add the .container class to the div element with .row class.
Try to resize window again.
Grid
There is
A Complete Guide to Grid
.
Just remember you do not have time to read it.
Should you use it during seminar just search for the information you need.
Grid is now pretty common, yet there is a way to check in CSS whether a broswer
@support
something.