Bootstrap Essentials

  • The Bootstrap grid is what we use to structure the layout of our website. It tells the browser where to put different elements on the page.
  • And crucially it can tell the browser to arrange elements in different ways depending on the screen size it is rendering on.
  • Bootstrap styling is implemented using the bootstrap library of pre-written css, which is accessed by linking to their library and then using the right bootstrap class names in your html.
  • To use the bootstrap grid, you always need 3 types of bootstrap grid classes:
    1. Container
    2. Row
    3. Column
  • Each of these elements rely on the others to work correctly.
  • Your content goes in the columns.
  • You shouldn't have a column without a row,
  • And you shouldn't have a row without a container
  • Getting them in the wrong order, or missing out, will mess with your layout!

container

row

column

column

row

column

column

Structuring your grid code

Nesting your containers, rows and columns correctly.