Structure the Layout

Learn how to use containers to quickly structure the layout.

Containers in layout

We have two options for Bootstrap CSS classes to use containers: 

  • container

  • container-fluid 

The fluid container spans the entire page width, while the regular container gets centered on the page, and by default, has a maximum width of 1140 pixels. These facts are important for our layouts because we should think about Bootstrap layouts as layers of containers. Let’s see what that means. 

Bootstrap layouts as layers of containers

Bootstrap is very modular. We can add and replace components (code) to get a new look. We saw this approach earlier in the chapter when we replaced the default navbar with a custom one. However, this modularity goes even further. We can think of our entire layout as a layer cake. 

Get hands-on with 1400+ tech skills courses.