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.
-
Also, when creating the body, do I just put it in class container? Because there are so many different ways, I was wondering, after creating a navbar, whats the correct way to create the body and add stuff in it. And is there a way to center a text in lets say <h1></h1> tags?– GrigorJul 30, 2012 at 9:24
-
To use the grid system you should choose a layout, add at least one row (see DavePs example) and create a span for any element you want to position in the grid. You don't need to use the grid system though, it would also be ok to just use set some width manually, especially if you don't need many columns. I think additional styles like center text should be done in another css file after bootstrap is loaded. Like put the
h1
in adiv
withspan12
, give it an id or additional class and style usual css withtext-align: center;
– kapexJul 30, 2012 at 9:32 -
kapep is right about additional styles - I think the download includes an application.css file, but if it doesn't, put your styles in it so that an upgrade to Bootstrap keeps your changes intact.– DavePJul 30, 2012 at 9:36
-
The Bootstrap Scaffolding page is quite confusing to me. For a start it appears the spanx classes are in bootstrap-responsive.css, but there is nothing written about including it, and it doesn't appear in the standard download. Why does this never get explained? Sep 5, 2013 at 3:36
-
@BenPower The default grid with spanX is included in bootstrap.css. The other spanX in bootstrap-responsive.css just override these to provide different widths for small tablet displays or even a columnless layout for for the very small mobile displays. This responsive part is explained at the bottom of the scaffolding page, it's optional though and the basic grid should work without it.– kapexSep 5, 2013 at 9:58
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.
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?
-
That is for bootstrap 3. span1 to span12 ---- that is bootstrap 2. Jun 4, 2015 at 17:11