Bootstrap · CSS · Viking Code School

Bootstrap with Viking Code School

Bootstrap is a powerful tool for building responsive websites quickly. It is a popular framework of HTML, CSS, and JavaScript that works around a grid layout. The Bootstrap course of Viking Code School‘s advanced prep work introduced the basic functionality of Bootstrap and explained the grid based system that it utilizes with a container, rows, and columns. Various widgets, buttons, and other useful features can be incorporated easily within that grid with already defined styles that can be modified if desired. Bootstrap has extensive documentation (found here) outlining how to use the grid and different components that can be utilized.

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?

Bootstrap is an HTML, CSS, and JavaScript framework that uses a 12 column grid based layout. It includes a library of widgets and features that can be implemented within that grid. There is also an icon font, called Glyphicons, that can be used to add standard icons to a site.

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?

Bootstrap includes a large CSS file, a large JavaScript file, and some font files to support them.

How do you include Bootstrap in your projects?

Bootstrap can be included in two ways, either by directly downloading the source code files from the website and including them in your project directory, or by including links within your HTML head tag to the CSS and JavaScript files on their CDN servers.

What other JavaScript library is required to use Bootstrap and how do you get it?

The jQuery JavaScript library is also required to use Bootstrap. You just add a link in your HTML head tag to jQuery from Google’s servers.

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s