CSS.POCE.3: Bootstrap Columns


  1. 2.
    We should be able to use Bootstrap CSS classes for almost everything. We should only need to write custom CSS in Exercise 2, to change background colours.
  2. 3.
    Refer to the Bootstrap documentation here.

Base Columns

  1. 1.
    Create a set of 3 Bootstrap columns.
  2. 2.
    Put the 3 paragraphs of text here from cat ipsum into the 3 columns respectively.

Mobile Collapse

  1. 1.
    Add custom CSS classes with different background colours to each column so that each column is more recognisable.
  2. 2.
    Update column proportions such that when the screen is tablet-size or larger, the centre column should be twice as large as the others.
  3. 3.
    Add mobile-first styling to the columns. In mobile view the columns should stack vertically.

Full Responsive

  1. 1.
    Add a laptop layout to this design and rearrange the columns by adding more HTML.
  2. 2.
    In mobile view, the columns should all stack vertically, the same as the layout in the previous exercise.
  3. 3.
    In tablet view the 1st and 2nd columns should stack vertically and take up half the space. The 3rd column should take up the other half of the space.

Reference solutions

Click here to view the solution for the mobile collapse post class.
Click here to view the reference solution for the full responsive post class.