Bootstrap col-md-offset- not working

Question

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    lt div class  jumbotron  gt           lt div class  container  gt               lt div class  row  gt                   lt div gt                       lt h2 class  col-md-4 col-md-offset-4  gt Browse  lt  h2 gt                       lt h2 class  col-md-4 col-md-offset-4  gt create  lt  h2 gt                       lt h2 class  col-md-4 col-md-offset-4  gt share  lt  h2 gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt    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

User · Answer

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    lt div class  jumbotron  gt       lt div class  container  gt           lt div class  row  gt                   lt h2 class  col-md-4 col-md-offset-1  gt Browse  lt  h2 gt           lt  div gt           lt div class  row  gt                   lt h2 class  col-md-4 col-md-offset-2  gt create  lt  h2 gt           lt  div gt           lt div class  row  gt                   lt h2 class  col-md-4 col-md-offset-3  gt share  lt  h2 gt           lt  div gt       lt  div gt   lt  div gt    An alternative is to make every h2 width plus offset sum 12 columns  so each one automatically wraps in a new line    lt div class  jumbotron  gt       lt div class  container  gt           lt div class  row  gt                   lt h2 class  col-md-11 col-md-offset-1  gt Browse  lt  h2 gt                   lt h2 class  col-md-10 col-md-offset-2  gt create  lt  h2 gt                   lt h2 class  col-md-9 col-md-offset-3  gt share  lt  h2 gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

If you are ok with small tweak -  we know that bootstrap works with a width of 12   lt div class  row  gt         lt div class  col-md-1  gt              Keep it blank it becomes left offset        lt  div gt          lt div class  col-md-5  gt         lt  div gt         lt div class  col-md-5  gt         lt  div gt         lt div class  col-md-1  gt              Keep it blank it becomes right offset        lt  div  lt  div gt    I am sure there is a better way to do this  but i was in a hurry so used this trick

User · Answer

check this bootply  this is wrong because bootstrap using margin-left       jumbotron h2 first-child      margin  120px 0 0

User · Answer

It works in bootstrap 4  there were some changes in documentation We don t need prefix col-  just offset-md-3 e g    lt div class  row  gt      lt div class  offset-md-3 col-md-6  gt  Some content        lt  div gt   lt  div gt    Here doc

User · Answer

Kindly use offset-md-4 instead of col-md-offset-4 in bootstrap 4  It s little changes adopted in bootstrap 4   For more info

User · Answer

lt div class  quot jumbotron quot  gt           lt div class  quot container quot  gt               lt div class  quot row quot  gt                   lt div gt                       lt h2 class  quot col-md-4 offset-md-4 quot  gt Browse  lt  h2 gt                       lt h2 class  quot col-md-4 offset-md-4 quot  gt create  lt  h2 gt                       lt h2 class  quot col-md-4 offset-md-4 quot  gt share  lt  h2 gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   You can try this

User · Answer

Should be     lt h2 class  col-md-4 col-md-offset-1  gt Browse  lt  h2 gt   lt h2 class  col-md-4 col-md-offset-2  gt create  lt  h2 gt   lt h2 class  col-md-4 col-md-offset-3  gt share  lt  h2 gt

User · Answer

Changing col-md-offset-  to offset-md-  worked for me

User · Answer

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

User · Answer

Bootstrap 4 offset classes have been removed in Beta 1  but will be restored in Beta 2 - topic reference

User · Answer

I would not recommend utilizing the Grid system in this instance  as much as simply adding an increased padding for each  lt h2 gt    That being said  the way you would achieve this using col- -offset-  would be as follows    lt div class  jumbotron  gt       lt div class  container  gt           lt div class  row  gt               lt div class  col-md-12  gt                   lt h2 gt One lt  h2 gt               lt  div gt                lt div class  col-md-11 col-md-offset-1  gt                   lt h2 gt Two lt  h2 gt               lt  div gt                lt div class  col-md-10 col-md-offset-2  gt                   lt h2 gt Three lt  h2 gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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   lt div class  row  gt         lt div class  col-md-4  gt Offset 4 column lt  div gt         lt div class  col-md-8  gt                content        lt  div gt   lt  div gt

[html] Bootstrap col-md-offset-* not working

Where's the problem

How to fix it

Examples related to html

Examples related to css

Examples related to twitter-bootstrap