Spacing

  • You might have noticed in the last page, that when column widths do not add up to 12 we are left with a space on the right side of our columns.
  • Having your column(s) up against the left side of the screen is not great user experience most of the time.
  • So what can we do to fix that?

Creating space with flex

  • We can use the justify-content classes
  • We apply these classes to the row that our columns are contained in
  • Each of these rows has 3 col-2 elements inside
  • Look at the ways the different justify-content classes effect their layout.

justify-content-start

col-2
col-2
col-2

justify-content-end

col-2
col-2
col-2

justify-content-center

col-2
col-2
col-2

justify-content-between

col-2
col-2
col-2

justify-content-around

col-2
col-2
col-2
  • You can also apply the sm md lg xl sub-classes to these!
  • For example: justify-content-sm-center justify-content-md-around justify-content-xl-end etc

Change the width of your browser window to see how the position of the columns change

row justify-content-sm-center justify-content-md-around justify-content-xl-end

col-2
col-2
col-2

Further reading

  • Now that you have a grasp of the basics, you can learn much more about the power of Bootstrap in their own documentation:
  • Search for what you are looking for in the Bootstrap 4 documentation search bar
  • Bootstrap 4 documentation: Grid system
  • Bootstrap 4 documentation: Spacing
  • An excellent YouTube video on understanding the bootstrap grid: Here