Bootstrap grid offset

Question

I'm having trouble getting one of my bootstrap hero units to respond to an offset command:

<div class="col-xs-6-offset-3 col-md-6-offset-3 col-lg-6-offset-3">
    <div class="center hero-unit">
        <h1>text</h1>
    </div>
</div>

It appears and has css applied to it, so I know Bootstrap is working. But it takes up the entire 12 grids across. How can I get it to only take up 6 and be centered?

please do not use "bootstrap" as tag, use "twitter-bootstrap" instead as they mean different — Daniel Cheung, Oct 22 '14 at 10:51

score 4 · Accepted Answer · answered Oct 22 '14 at 08:37

You are using the wrong classes. First set the column width (or span if you like to think in those terms) and then apply an offset. For example:

<div class="col-xs-2 col-xs-offset-3 
            col-md-6 col-md-offset-3 
            col-lg-6 col-lg-offset-3">
    <div class="center hero-unit">
        <h1>text</h1>
    </div>
</div>

Bootstrap grid offset

1 Answers1