Portfolio - grid is out of control

I’m working on my portfolio and trying to create a grid for my projects section. I’m having issues getting the grid organized. I put them in container-fluid and and assigned the class col-md-2 and I can’t figure out why the grid is still all over the place. Any help would be very much appreciated. A link to my portfolio is here http://codepen.io/gotbassoon/pen/rjjdGV

Thank you

here is how I have mines http://codepen.io/dboston528/full/oBZZMP/

hope this helps a little.

1 Like

thanks @dboston528 I looked at your code and it looks like you used row instead of container. I tried making that change in my code and it didn’t change my grid. I’ll just come back to it tomorrow. Thanks for the reply

1 Like

you have to use row class when doing a grid in bootstrap … any div that require the col- class has to be inside a div with the class of row

        <div class = "col-md-6"></div>
        <div class = "col-md-6"></div>
      </div>```
1 Like

Hi
You should add a class “img-responsive” to your images, they’ll fit their width and height container divs.
Also only the first two “col-md-2” are contained into your “row” div. I guess the closing tag of your “row” is misplaced.

You should really care about indenting your html, this would make these kind of issues jumping to your eyes
ie:

<div id="that-div">
  <div id="div-into-that-div">
    <p id="p-into-div-into-that-div">
      ....
    </p> //closing p
  </div>
</div>

Hope this helps. Cheers!

1 Like

I redid the top.

I think the proper way to do it (from what I’ve seen online) is

<div class="cotainer">
   <div class="row">

      <div class="[column size]">
         Content
      </div>

   </div>
</div>

Here’s clickable: http://codepen.io/fuqted/pen/jyBRjM

2 Likes

You were right about the closing tag of row being misplaced adding “img-responsive” made them do exactly what they needed to do. I will definitely keep that in mind, about indenting.

Thanks so much for your response, Cheers!

Do you then have to link declare them in CSS and if so how do you do that?