Grigor
Grigor

Reputation: 4049

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.

Upvotes: 18

Views: 85618

Answers (3)

kapex
kapex

Reputation: 29959

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.

Upvotes: 20

marko
marko

Reputation: 11

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 class="col-lg-2 col-sm-3 col-xs-6"> 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 class="col-lg-5">content1 </div>
<div class="col-lg-6">content2 </div>
<div class="col-lg-3">content3 </div>
</row>

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

So, does span do the same trick?

Upvotes: 1

DaveP
DaveP

Reputation: 568

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 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem :

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

The docs also discuss offsets.

Upvotes: 9

Related Questions