Bootstrap Spans

I recently started using Twitter Bootstrap and I can't seem to grasp what spans do and why are there different numbered spans, like span4, span12? And what are offsets and when are they used? (Sometimes used with spans) I tried to search it online, but only found specific questions about bootstraps.

3 Answers

The Bootstrap "span" classes are used in the bootstrap grid system.

The documentation shows columns labelled with numbers, each number represents the span class used for this container. Offset are shown right in the next section, they define how many empty columns should be to the left of the span.

You can read span4 offset2 as "extend this block over 4 columns, leave two columns empty to the left".
By default there are 12 columns. If you have a span12, it will be as wide as the container (which may be fluid).

This is relevant for v3.2.2, which is no longer supported. The up-to-date version of Bootstrap can be found here.

If you are looking for the 'span' class in Bootstrap in v4 (which refers to badges and labels instead of the grid system), this can be found here.

First of all, they are not <span> tags. (I mention this because I have started typing <span> a few times!) They are column widths within a row.

From :

<div> <div>...</div> <div>...</div>
</div>

The docs also discuss offsets.

22As far as I know, if you want to style a responsive page layout, you can also use col-lg-2 or some classes like that, when writing a div markup, like

<div> some content </div>

which would define how many columns some content occupies on-screen, for large, small and extra small screens. point is, you have 12 columns max per a row, so all your content in one row has to respect that. You cant have

<row>
<div>content1 </div>
<div>content2 </div>
<div>content3 </div>
</row>

because there is 14 large columns here. Only xs classes add to 24, though

So, does span do the same trick?