Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Nick Wilson
Nick Wilson
5,060 Points

Layout (bootstrap) question

I am making a layout that I needs a certain kind of responsive design and I can't seem to figure out how to do this. This is what I am trying to achieve using bootstrap. I need a column on the left that's about 25% of the screen. A column in the middle that's 50% BUT this middle content needs to have MORE content below it one after another.

Then a right column that's 25%.

So column left (25%) column middle (50% and not affecting any other column when adding more content) and a column right (25%).

I tried this...

<div class="container section1">
   <div class="col-md-3">
       <content>
   </div>
</div>

<div class="container section2">
   <div class="col-md-9">
        <div class="row">
            <content>
        </div>
        <div class="row">
            <content>
        </div>
        <div class="row">
            <content>
        </div>
        <div class="row">
            <content>
        </div>
   </div>
</div>

<div class="container section3">
   <div class="col-md-3">
       <content>
   </div>
</div>

1 Answer

Stephen Urena
Stephen Urena
705 Points
Stephen Urena
Stephen Urena
705 Points

Since bootstrap uses the 12 column grid system, I would just have one container to wrap the entire content, then the row and then the divs that add up to 12 i.e.

<div class="container">
  <div class="row">
    <div class="col-md-3 leftColumn">
      <!-- Content Left -->
    </div>
    <div class="col-md-6 middleColumn">
      <!-- Content Middle -->
    </div>
    <div class="col-md-3 rightColumn">
      <!-- Content Right -->
    </div>
  </div>

</div>
Nick Wilson
Nick Wilson
5,060 Points

I originally had it like this but the middle section has much more content and it doesn't line up to the left of the column. I wish I had the documents with me I could just show what it's doing. I will have to wait until i get back to work...