There is a lot of poorly written bootstrap out there. Much of it revolves around the most fundamental aspect of boostrap: the grid.
This is a basic guide to the Bootstrap grid, mostly for Bootstrap v3, but also applicable to v4.
- there are three fundamental elements:
- containers: container and container-fluid. Container will only expand to a max-width, while container-fluid will go to full width of screen. Container should never be nest inside other containers.
- rows: A row is a column wrapper. Without columns, no need for a row.
- columns: to divide content into 2 or more horizontal sections. Columns should typically be directly need inside a row. A single column doesn’t need to be a column at all. Columns are mobile-first.
Bootstrap grid examples:
Full-Width BG Example
Full-width backgrounds are popular in web-design. Here’s a common situation where the header and footer and full width: