CODEWITHSUNDEEP
twitter-bootstrap
Novocaine
Novocaine

Reputation: 4786

Column layout logic bootstrap 3

Take the following example bootstrap layout.

<div class="col-xs-7">
  <div class="row">
    <div class="col-md-3 a">col 3</div>
    <div class="col-md-9 a">col 9</div>
  </div>
</div>
<div class="col-xs-5 a">
  col 5
</div>


<div class="col-xs-7">
  <div class="row">
    <div class="col-md-3 b">col 3</div>
    <div class="col-md-9 b">col 9</div>
  </div>
</div>
<div class="col-xs-5 b">
  col 5
</div>

The first row here is exactly what I need, and Ideally must not change. (If I can achieve a similar result with a more efficient layout I'm all ears.)

The second row however I want to only have 2 sections. The col 4 on the far left needs to essentially be empty space. Everything to the right of that needs to be a single column - so col 9 and col 5 on the second row need to be merged. I'm not sure how to achieve this...

The reason I need this is so that the right hand side lines up with the start of col 9 on the first row. Like this manually edited example pic;enter image description here The red section is what I want to be a single column.

Upvotes: 0

Views: 503

Answers (2)

iurii
iurii

Reputation: 4230

Maybe it can be simplified to this

<div class="row">
  <div class="col-md-2 a">col 2</div>
  <div class="col-md-5 a">col 5</div>
  <div class="col-md-5 a">col 5</div>
</div>


<div class="row">
  <div class="col-md-2 b">col 2</div>
  <div class="col-md-10 b">col 10</div>
</div>

Upvotes: 1

oliveromahony
oliveromahony

Reputation: 471

I think the following is what you want, replace the 2nd col-xs-7 with this:

<div class="col-xs-7">
   <div class="row">
       <div class="col-md-3 b">col 3</div>
       <div class="col-md-9 b">col 9</div>
   </div>
</div>

Upvotes: 0

Related Questions