front-end-developer_1_

Front-End-Developer - Level 1
Grid system and responsive design
Embedded Video: https://www.youtube.com/watch?v=j2zAyX4TCEY?rel=0
One of Bootstrap's most powerful features is its grid system, which lets you create rows and
columns on your pages. Check out the Bootstrap CSS documentation. The documentation is
all put in a with class row; the sidebar is in a with class col-md-3, and the
documentation itself is in a with class col-md-9. Bootstrap's grid has a 12-column
layout, and you can choose how many columns each vertical section of the page takes up.
So you could divide a row up into 4 columns of col-md-3, or a column of col-md-4 and a
one of col-md-8, and so on.
If you resize the Bootstrap homepage to make the window skinnier, you'll see something
really cool: the page layout changes as the window gets narrower. More and more websites
are using responsive design to make pages that work well on desktop, tablet, and mobile
devices, regardless of screen size. Some websites serve a special page when they detect
that the visitor is using a mobile browser, but the advantage of responsive design is that you
don't have to maintain a separate version of your site for desktop and mobile (and tablet,
and all of the different size variations of tablet and mobile and desktop) - you have a single
website that works well regardless of screen size.
To understand how responsive design works its magic, right-click and use Inspect Element
on the sidebar, and make sure the tag is selected. You should see
a CSS rule that looks something like:
@media (min-width: 992px)
.col-md-3 {
width: 25%;
}
When you resize the page so that it is less than 992 pixels wide, the sidebar will snap up to
the top of the row. The CSS rule also disappears from the Chrome inspector.
The @media bit is a media query that tells the CSS rule to only apply when certain criteria
are met; in this case, that the screen is no narrower than 992 pixels.
If you want to write a rule yourself, it's pretty simple. Here's an example:
Grid system and responsive design
72