Bootstrap or Skeleton Column Widths - How their Widths Decided

Question

In Bootstrap or Skeleton, how are the various column widths decided?

For eg: In Bootstrap, .col-md-1 has width 8.33333333%.

And in Skeleton width of 1 column is 4.66666666667%.

Are they taken just randomly just by thinking or there is some science behind it?

Thank you

Answer 1

The reasoning behind the 8.33% is maths. Bootstrap by default has 12 columns so:

100/12 = 8.3333333

If you visit the Bootstrap website and customise the number of columns, that percentage will change. For example, if you choose 10 columns (i.e. change the @grid-columns value) the width will instead become 10%.

Answer 2

I've been answering this question a lot recently so I made this which might help explain what's going on: https://github.com/mattdell/bootstrap-grid-demo

But essentially it depends on whether you're using a container or a container-fluid. If you are using a container it then depends on your screen size. Assuming you have the default settings a col-xs-12 works out to

• x-small: between 1px and 34px depending on screen width
• small: 32.5px
• medium: 50.8333px
• large: 67.5px

The calculation comes out simply to (container width - (number of columns * (gutter width * 2))) / number of columns