What's the difference between Bootstrap Spans & Columns

Question

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

example

<div class="span4">...</div> or  <div class="col-md-4"></div> 

What's the difference between them or do they do same thing?

Answer 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).