Aisha Salman Aisha Salman - 4 months ago 153
CSS Question

Bootstrap col-md-offset-* not working

I'm trying to add Bootstrap offset class in my code to achieve diagonal alignment like this:

Image

But I don't know what offset should I use. I've tried couple of offsets to achieve this but no use.Text is covering whole jumbotron.Here is my code

Html:

<div class="jumbotron">
<div class="container">
<div class="row">
<div>
<h2 class="col-md-4 col-md-offset-4">Browse.</h2>
<h2 class="col-md-4 col-md-offset-4">create.</h2>
<h2 class="col-md-4 col-md-offset-4">share.</h2>
</div>
</div>
</div>
</div>


CSS:

.jumbotron {
height: 500px;
width: 100%;
background-image: url(img/bg.jpg);
background-size: cover;
background-position: center;
}

.jumbotron h2 {
color: white;
font-size: 60px;
}

.jumbotron h2:first-child {
margin: 120px 0 0;
}


Please guide me.Thank you in advance.

Answer

I would not recommend utilizing the Grid system in this instance, as much as simply adding an increased padding for each <h2>. That being said, the way you would achieve this using col-*-offset-* would be as follows:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>One</h2>
            </div>

            <div class="col-md-11 col-md-offset-1">
                <h2>Two</h2>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <h2>Three</h2>
            </div>
        </div>
    </div>
</div>

Essentially the first line must span the entire row (so -12). The second line must be offset by 1 column, so you offset by 1 and give it a total width of 11 columns (11+1 = 12) and so forth. Your offset is always enough to ensure that the total column count equals 12.