r/Codecademy • u/siingleton • Aug 25 '15

BestBite bootstrap col-md-offset

The use of bootstrap to offset the text "Browse. Create. Share" isn't working for me in step 2.

Here's the code I'm using for the jumbotron

<div class="jumbotron">
 <div class="container">
  <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">Browse. Create. Share</div>
  </div>
 </div>
</div>

The text is displayed, but doesn't appear to be adhering to the columns.

1 Upvotes

66% Upvoted

7 comments sorted by

2

u/factoradic Moderator Aug 25 '15

If you want to align your column to the right you do not have to use two columns, just increase value of offset.

In the instructions you were asked to add headings to the column.

And to align text in the column to the right just use text-align.

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <h2>Browse.</h2>
                <h2>Create.</h2>
                <h2>Share.</h2>
            </div>
        </div>
    </div>
</div>

And now you have to style your headings, this is good base:

.jumbotron h2 {
    color:#fff;
    text-align: right;
}

2

u/siingleton Aug 25 '15

This worked, thanks.

2

u/factoradic Moderator Aug 25 '15

You're very welcome :)

2

u/noonesperfect16 Aug 25 '15

I struggled with this as well. I ended up just making the same effect with margins, but I felt like that defeated the purpose of the project. I guess I didn't quite understand the bootstrap tutorial for offsetting. I thought I had to add another <div class="col-md-4 col-md-offset-8"> before EACH <h2> haha.

While this also worked for me, do you think you could explain how that actually works? I can't quite grasp the concept, so knowing the resolution doesn't help much. I would really appreciate it. Does the sum of 'col-md-x' and 'col-md-offset-y' always have to equal 12 since that is the size of the "grid"? I've tried playing around with the numbers since seeing this post and I still don't get how it works exactly.

3

u/noonesperfect16 Aug 25 '15

After playing with it a bit more and viewing the colors of the margins, padding, containers of it when I change some of the numbers around, I think I have an understanding of it. Basically, the first number, "x" is just the size of the container. Adding offset, "y" just puts a margin to the left side to shift it to the right however many spots on the 'grid' you put into offset. I think my brain was trying to over-complicate it when it was actually really simple. Thanks for helping /u/siingleton out or I would have never went back and attempted to actually understand that better and thank you siingleton for creating the post!

1

u/factoradic Moderator Aug 25 '15

Hi :)

Perfect explanation, you got this, but I just want to clarify one aspect. Number of col units in a single row does not have to sum to 12. This would be impractical, because we usually use Bootstrap to create responsive sites. Take a look at this exemplary code:

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

In sm and higher resolutions this code creates one row with three columns. As you see in xs resolution we have 18 col units in a single row and it's a perfectly fine solution. In result we will get two rows with two columns in the first and one column in the second one.

And please remember that Bootstrap is an framework. Popularity of a framework depends on two things:

  1. Usefulness

  2. Ease of learning

Second point is usually achieved by great documentation and bootstrap is not an exception :) If you do not understand something, there is a high chance that you will find great explanation here -> http://getbootstrap.com/css/

1

u/noonesperfect16 Aug 25 '15

Thanks for the reply! I see that you post a lot helping people out on the sub. I have only been doing this for 2 weeks and I am only 10 of 13 on those html website projects, so I've yet to get to anything with xs or sm resolution. I would be lying if I pretended to know what that is! Haha. Seeing your posts and how knowledgeable you are is a humble reminder how far I have to go before I reach your level of expertise. Working on it though! Thanks again.