CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user2666633
user2666633

Reputation: 340

Bootstrap 3 long columns push others down

The first picture above is exactly what I want, but the other pictures show what I am getting

Using Bootstrap 3:

Trial 1: As seen in the second picture, the side bar col-sm-2 pushes the col-sm-8 down when its height is not the same as the height of its corresponding column:

  <div class="container">
    <div class="row">
       <div class="col-sm-8">1</div>
       <div class="col-sm-2">2</div>
       <div class="col-sm-8">3</div>
    </div>
  </div>

Trial 2: As seen in the third picture, the side bar aligns with the second col-sm-8 but I want it to be aligned horizontally with the first column:

  <div class="container">
     <div class="row">
        <div class="col-sm-8">1</div>
        <div class="col-sm-8">3</div>
        <div class="col-sm-2">2</div>
     </div>
 </div>

If I do something like the following, it works fine, but I want the col-sm-2 to be on the right hand side:

    <div class="container">
       <div class="row">
          <div class="col-sm-2">2</div>
          <div class="col-sm-8">1</div>
          <div class="col-sm-8">3</div>
       </div>
    </div>

Upvotes: 0

Views: 178

Answers (1)

Lee Duckworth
Lee Duckworth

Reputation: 340

You're almost there. Your just missing a couple of divs. 

<div class="container">
   <div class="row">
      <div class="col-sm-10">
         <div class="row">
            <div class="col-sm-12">1</div>
            <div class="col-sm-12">3</div>
         </div>
      </div>
      <div class="col-sm-2">2</div>
   </div>
 </div>

Upvotes: 1

Related Questions