Introduction

Introducing components in Bootstrap

In the first two chapters of this course, we learned about containers, rows, column grids, and utility classes. We’ve got enough basics to start using all that Bootstrap 4 offers. Components in Bootstrap are the result of the fast evolution of layouts on the web. In his book Don’t Make Me Think, Steve Krug writes about how users come to expect certain norms and patterns in design. For example, we wouldn’t expect to have a steering wheel on a laundry machine, just like we wouldn’t expect a lid to cover up the top of a dashboard in a car.

Krug argues that we shouldn’t build layouts that leave our users scratching their heads. While the examples above might seem a bit silly, they point to the fact that as soon as the novelty wears off, website designers generally start using and reusing some patterns in design more often than others. After enough time has passed, those patterns become the norm.

In web design, the essence of this norm can be seen in Bootstrap components. There are not many of them. The official documentation for Bootstrap version 4.3 lists 24 components altogether.

Let’s divide these components up by splitting them into two broad groups: primary layout components and secondary layout components. 

Note: These two terms are just something we came up with as a learning aid. There are no primary and secondary components in the official docs.

Primary layout components 

Primary layout components include components that fit the following criteria.

They represent an entire content of a layout. For example, Bootstrap’s navbar is a primary layout component. It is a full solution for the main navigation on a web layout. Here is the full list of Bootstrap 4 components that could be considered primary layout components: 

• Breadcrumb

• Card

• Carousel

• Jumbotron

• Navbar

• Pagination 

Secondary layout components 

Secondary layout components are components that can't be used for an entire section of a website layout.