Containers & Rows

  • Containers and rows only have width properties by default.
  • They have no height of their own unless customised with css.
  • Their height is determined by the height of their columns' content.

Containers

  • There are two container classes in the bootstrap library
    1. container
    2. container-fluid
  • The difference between these two classes is the width of the screen that the container takes up.
  • Containers can be nested inside other elements, in this case their width will be relative to the width of the element they are inside.

container

container-fluid

Rows

A row determines a vertical block that columns will live inside

You can have multiple columns within a row.

column 1

column 2

column 3

You can have multiple rows within a container.

column in row 1

column in row 2

column in row 3

And you can even put rows within columns.

column

column

row nested inside a column

col

col