Search code examples
csstwitter-bootstrapgridscaffolding

Bootstrap grid offset

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?

Solution

  • 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>