Columns

  • Bootstrap columns come in 12 sizes.
  • A column width is set by giving it a number between 1 and 12.
  • A col-1 is one 12th of the width of its container.
  • A col-6 is six 12ths (one half) of the width of its container.
  • A col-12 is twelve 12ths and so full width of its container.
  • As you can see, having 12 different size choices gives you a multitude of different ways to arrange your columns on the screen.

col-1

col-2

col-3

col-4

col-5

col-6

col-7

col-8

col-9

col-10

col-11

col-12

Displaying columns together

Columns will display next to each other, until their total width adds up to 12.

col-9

col-3

col-2

col-8

col-2

col-4

col-4

col-4

col-3

col-6

col-3

col-6

col-4

col-2

col-1

col-11