Summary
Bootstrap is a CSS framework containing CSS classes and components that you can use in your own projects, which speeds up your development time.
Details
Bootstrap is a CSS framework that allows you to quickly create responsive sites. It is composed of one CSS stylesheet and three JavaScript files (one main Bootstrap file plus two dependencies–jQuery and Popper.js).
Grid system
The most important aspect of Bootstrap and the focus of this course is the grid system. The grid system allows you to create pages that are responsive, meaning the pages will automatically adjust their layouts to fit the screen or window the site is being viewed in. This typically means a layout that spans multiple columns on a desktop will collapse into a one-column layout when viewed in portrait mode on a smartphone. The grid system is made possible through the use of custom CSS classes provided by Bootstrap.
Components
In addition to the grid system, the CSS file contains rules for other custom classes that are focused on custom components or custom styles. The Bootstrap documentation is filled with sample code that demonstrates how to use these classes. By using these classes and the documentation, you can quickly create layouts and style your pages without having to write your own custom CSS. (Note: For many projects you probably will write some custom CSS later on, but in the prototyping stage you can rely mostly on Bootstrap to come up with your layouts and style your pages.)
Here is a Pen that demonstrates using Bootstrap components and the Bootstrap grid. Try clicking on the Edit On CodePen button to see the full page.
Exercises
You can download exercises to go along with these tutorials on our Bootstrap exercises GitHub repo. Just click the green Code button in the corner and click the Download ZIP option.
Each module has a folder. Inside each module folder is a folder for each lesson. The lesson folders usually contain files already where you can put your code, although occassionally you will be asked to create files on your own.
NOTE: You can ignore the instructions included in the folders. The instructions are now listed directly in the lessons.