BestBite Task 2 - Understanding Rows/Columns and Offset


#1

Hello all!

I'm having trouble understanding how the rows vs. columns works in bootstrap because the way I have been trying to implement it made sense to me till I ran into "offset" and it threw a wrench in my understanding.

So Bootstrap rows have a 12 column with grid I get that from this section of the bootstrap explanation here: http://getbootstrap.com/css/#grid-example-basic

So I understand how something like this:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

-will have three columns across that single row. So the below code has all three items listed in one vertical column. I noticed some others have posted their code like this and then fiddled with the offset. But wouldn't this just move around the items on that ONE row?

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

So I thought that each item should have it's own row as it is in the BestBite example, like so:

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

I believed that having each row start with the first column being the 4 width would have them all aligned to the left. Then it would simply be a matter of sliding each row to the right by one offset each. Of course... this didn't work which is why I am posting here. I'm not understanding the offset and column/row relations right. Can anyone point me to some good reading? Or help me better understand the code above?

Update: I was able to achieve the effect I wanted without using the Bootstrap Offset Columns just fine. Also inspecting the example it doesn't look like they are using offset columns either. So what gives?

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

Then in the CSS I created this:

h1 {
text-align: right;
}

That seemed to achieve the desired effect, but not the effect the project wanted or wanted to teach me...


#2

i would never add the col-md-4 class to a heading element. The col-md are the structure of your page, then you add the class to an element (h1 heading) which can only hold inline elements. To me, that doesn't make much sense.

i put your code in a bin, and it gives the desired result? you can clearly see the col offset

one of the biggest problems, was here:

<div class="row>">

you create a class row> instead of row


#3

Hrmm...

But even in the example you posted the periods are not aligned as they are in the BestBite example.

How do you align them to periods, while keeping them on the left side of the screen in that first column?


#4

do you understand offset now?

Oh, that is simply:

<div class="row">
    <div class="col-md-4">
        <h2>browse.</h2>
        <h2>create.</h2>
        <h2>share.</h2>
    </div>
</div>

then simply use text-align property to align the text on the right side of the col


#5

Well yes that is what I did to make it work like in the example. However, the instructions clearly state that I am supposed to achieve this same result using Bootstrap's offset columns to achieve the same effect in the example. I've tried several iterations and I can't seem to get that particular result using only Bootstrap's offset columns. In what way can this be done?


#6

aha, right, well looking at the website which shows the example i clearly see them use text-align:

and then you are suppose to do this with coll offset? that is simply impossible.


#7

Right?

Am I reading this wrong then?

It clearly says in step 2:

In the jumbotron section, add headings that say Browse. Create. Share.. Use margins and Bootstrap's offset columns to achieve the alignment shown in the design.


#8

No, you are reading it right. The instructions are just misleading.

it is impossible to align the headings like in the example with offset.


#9

Ok. So then where in this design should I be applying offset columns? It sounds like this project has steps in it that don't belong, if so they should definitely be taken off, it's super confusing.


#10

Nowhere. I will report this, i hope have cleared up some confusion.


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.