I'm trying to add Bootstrap offset class in my code to achieve diagonal alignment like this:
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.
This question is related to
html
css
twitter-bootstrap
The answer is
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.
In bootstrap 3 the format is
col-md-6 col-md-offset-3
For the same grid in Bootstrap 4 the format is
col-md-6 offset-md-3
Where's the problem
In your HTML all h2s have the same off-set of 4 columns, so they won't make a diagonal.
How to fix it
A row has 12 columns, so we should put every h2 in it's own row.
You should have something like this:
<div class="jumbotron">
<div class="container">
<div class="row">
<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
</div>
<div class="row">
<h2 class="col-md-4 col-md-offset-2">create.</h2>
</div>
<div class="row">
<h2 class="col-md-4 col-md-offset-3">share.</h2>
</div>
</div>
</div>
An alternative is to make every h2 width plus offset sum 12 columns, so each one automatically wraps in a new line.
<div class="jumbotron">
<div class="container">
<div class="row">
<h2 class="col-md-11 col-md-offset-1">Browse.</h2>
<h2 class="col-md-10 col-md-offset-2">create.</h2>
<h2 class="col-md-9 col-md-offset-3">share.</h2>
</div>
</div>
</div>
Bootstrap 4 offset classes have been removed in Beta 1, but will be restored in Beta 2 - topic reference
Should be :
<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
<h2 class="col-md-4 col-md-offset-2">create.</h2>
<h2 class="col-md-4 col-md-offset-3">share.</h2>
It works in bootstrap 4, there were some changes in documentation.We don't need prefix col-, just offset-md-3 e.g.
<div class="row">
<div class="offset-md-3 col-md-6"> Some content...
</div>
</div>
Here doc.
Kindly use offset-md-4 instead of col-md-offset-4 in bootstrap 4. It's little changes adopted in bootstrap 4.
<div class="jumbotron">
<div class="container">
<div class="row">
<div>
<h2 class="col-md-4 offset-md-4">Browse.</h2>
<h2 class="col-md-4 offset-md-4">create.</h2>
<h2 class="col-md-4 offset-md-4">share.</h2>
</div>
</div>
</div>
</div>
You can try this.
Changing col-md-offset-* to offset-md-* worked for me
For now, If you want to move a column over just 4 column units for instance, I would suggest to use just a dummy placeholder like in my example below
<div class="row">
<div class="col-md-4">Offset 4 column</div>
<div class="col-md-8">
//content
</div>
</div>
If you are ok with small tweak - we know that bootstrap works with a width of 12
<div class="row">
<div class="col-md-1">
Keep it blank it becomes left offset
</div>
<div class="col-md-5">
</div>
<div class="col-md-5">
</div>
<div class="col-md-1">
Keep it blank it becomes right offset
</div
</div>
I am sure there is a better way to do this, but i was in a hurry so used this trick
check this bootply
this is wrong because bootstrap using margin-left:**%
.jumbotron h2:first-child {
margin: 120px 0 0;
}
Source: Stackoverflow.com