The following are a series of questions that cover some of the topics of the Bootstrap course that I answered to review the material and test my knowledge.
Introduction to Twitter Bootstrap
What is Bootstrap?
Why is Bootstrap called “Twitter Bootstrap”?
Bootstrap was created by engineers at Twitter as an internal tool initially. It was later decided to make it open-source for everyone to use. The creators were re-using styles and widgets so much that they wrote them into a formal framework, Bootstrap.
What files are included in the download?
How do you include Bootstrap in your projects?
Where can you go to find information about the CSS styles and components that are available to you?
Bootstrap has extensive documentation that outlines all of the styles, components, and features of the framework. All of this information can be found at http://getbootstrap.com/
Working with Bootstrap
How does the Bootstrap grid system work?
The grid system is based on 12 columns. The grid begins by a single container div that encompasses everything else. Within that container are placed rows. Rows can only be placed within a container and not columns. Within rows are placed columns. Columns can only be placed within a row. Columns are then given a class such as col-x-y, where x equals a size and y equals the number of columns (out of 12) that particular column should span. The size variable can be xs, sm, md, or lg, which changes the layout depending on the size of the device being used to view the content. An additional class of col-offset-x is added to each column where x equals the number of columns from the left this column should be positioned. All columns have a padding of 15px to the left and right.
What happens to margin/padding and overall width when you enclose everything in a container?
A container always has a padding of 15px to the left and right. The overall width adjusts to the size of the screen.
What happens to margin/padding when you create a new row?
Each row adds a negative margin of 15px, setting things back to even.
What happens to margin/padding when you create a new col (e.g. col-md-8)?
Each column adds back 15px padding, arriving back at the original 15px indentation. Columns side by side will create a 30px gutter between them, while the gutter on the sides of the screen remains at 15px. A col-md-8 will create a column that spans 8 columns of the grid on a medium screen.
What two classes should always wrap a col-md-8?
A column should always be wrapped in a container and a row.
What behavior occurs as the screen is resized from very wide to mobile-sized on a div class=”col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3″?
On a large screen, the column appears 6 columns wide starting 3 columns from the left. On a medium screen, it appears 8 columns wide starting 2 columns from the left. On a small screen, it appears 10 columns wide starting 1 column from the left. On an extra small screen (mobile device) the column stretches the entire width of the screen (aside from the 15px padding on each side) with no offset.