What's The Difference Between Bootstrap Spans & Columns

I working with bootstrap but trying to understand the difference between Spans and columns, example

...

or

Solution 1:

<div class="span4">...</div>

is old Bootstrap syntax up until version 2.3.2 ,

<div class="col-md-4"></div>

is Bootstrap version 3 syntax.

The main difference is that the new bootstrap is build on "mobile first" approach, while the old one used the typical 960gs approach to construct the grid and than had the responsivness handled separately.

You now have 4 different values that will scale the element differently based on screen size and wanted behaviour:

.col-md-* 

is the equivalent of span*, while:

.col-xs-* 
.col-sm-* 
.col-lg-* 

are used to solve the vertical stacking of elements on smaller devices (enabling you to achieve three column layouts on small screen devices by default, without having to overwrite bootstrap default classes with your own).

Solution 2:

Spans were used in BS 2 - Scaffolding

Cols are used in BS 3 - CSS

They are, for all intents and purposes, the same thing.

Share