Designing and coding web page layouts can be tedious, often monotonous work. While the process of designing a good, eye-pleasing design is no doubt a creative act, the actual implementation of the design involves a lot of troubleshooting, testing and more “left-brained” work, much of which is repeated from project to project. To cut down on the labor involved in designing a new web project, many developers utilize what is known as a CSS framework. One of the most popular and well known of these frameworks is Bootstrap, originally created by designers and developers from Twitter.
Bootstrap, as well as most other CSS frameworks, aims to create a starting point for any new project, with CSS rules for the most common site elements and layout you are likely to use, all while keeping your site entirely responsive. This reusability and modular approach means you no longer have to keep writing the same code every time you start a new project — learning the CSS classes and how to apply them is enough to get a new prototype up and running quickly.
There are a few different ways to add Bootstrap to your project.
One of the easiest is to just use the source hosted on MaxCDN, and add to the in your HTML page:
Alternatively, you can also utilize a package manager, such as npm, to install Bootstrap as a project dependency:
npm install [email protected]
Note: Bootstrap 4 is currently available as an Alpha version, although Boostrap 3 is still considered the most stable release, and what you will come across most often, at least for the forseeable future.
The Grid System
One of the core components of any CSS framework is a grid system. Determining where elements should be laid out on the page (and how they should be repositioned responsively, based on device size) is arguably the most important aspect of design layout.
Bootstrap’s grid system is broken down into 12 equidistant columns, all of which fit into a single row. You can mix and match column sizes, though, so long as each row’s columns always add up to 12. So for example, you could have a row of 12 columns taking up 1 space each, a row 2 columns taking up 6 spaces each, etc.
To house the grid system, every row needs to be placed in a
element with the class of either .container or .container-fluid. Use the former for a responsive fixed width container, and the latter for a container taking up the full width of the device viewport:
Once you have the container implemented, add a row:
The columns of your grid will then fit into each row, adding up to 12.
For more information on using the CSS Bootstrap CSS Framework and other emerging web development technologies, visit: https://sunlightmedia.org/web-design-blog/