Link to demo: http://bootstrap-demo.s3-website-eu-west-1.amazonaws.com
This demo has been created to demonstrate how column widths are calculated using the bootstrap grid system. When using bootstrap I am often asked how wide is a column by clients and designers and there isn't a clear answer, as, well... it depends. The width of a column in bootstrap is determined by several factors.
First, recall that a column in bootstrap must be a child of a row and a row must be a child of a container or a container-fluid. There should only be one container on a page.
The width of a column is the remainder of what's left over after factoring in
containerwidth- gutter width either side of 12 columns (15px by default)
A simple calculation for column size would be (container width - (number of columns * (gutter width * 2))) / number of columns.
By default there are 4 screen sizes in bootstrap
- x-small
- small
- medium
- large
The width of the container is dependent on the screen size of the client device. Most desktop users will fall into medium or large and most mobile devices will fall into x-small or small.
- x-small will have a
containerwidth of 100% screen size, or its parent element. This results in a variable column width. - small will have a
containerof 750px. This results in a column width of 32.5px or roughly 33px. - medium will have a
containerof 970px. This results in a column width of 50.8333px or roughly 51px. - large will have a
containerof 1170px. This results in a column width of 67.5px or roughly 68px.
Taking the calculation above and using a large screen and 15px gutters the calculation is (1170 - (12 * (15 * 2))) / 12 = 67.5
container-fluid disregards page sizes and its width is simply 100% of screen size, or its parent element. This results in a variable column width that changes with the width of the browser window.
- Run
npm install - Run
npm start - Navigate your browser to http://localhost:8080
Hopefully this is clear to anyone wondering how to calculate the width of a column using a bootstrap grid. If there are any errors please let me know!