Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap fill remaining columns

Is there a bootstrap class that will fill however many columns have not already been taken? for example i have this div tag that might be there and it might not if it isnt i want the second div to take up 12 columns, but if it is there only take up 8 columns. like this

<div class="row">
   <?php if(something){ ?>
      <div class="col-md-4">
        <div> </div>
      </div>
   <?php } ?>
   <div class="col-md-fill">
     <div> </div>
   </div>
</div>

other than using

<div class="col-md-<?php
     if($count > 5){
         echo "8";
      } else {
         echo '12';
      }
       ?>">
like image 875
Samuel Thompson Avatar asked Mar 18 '23 11:03

Samuel Thompson


2 Answers

Sometimes I try something very stupid, but this time my stupidity surprises me...

I've seen than if we append to a div.row a div without any class, this no-class div fills herself the empty space....

Fiddle : http://jsfiddle.net/bhgme789/1/

HTML:

<div class="container">
<div class="row">
  <div class="col-md-4 bleu">bleu</div>
  <div class="rouge">rouge</div>  
</div>
    
<div class="row">
  <div class="col-md-1 bleu">bleu</div>
  <div class="rouge">rouge</div>  
</div>
    
      
<div class="row">
  <div class="col-md-9 bleu">bleu</div>
  <div class="rouge">rouge</div>  
</div>
    
</div>
like image 87
BENARD Patrick Avatar answered Mar 28 '23 16:03

BENARD Patrick


You're on the right track. Just finish your if statement with an else. One way, it uses a 4 and 8, the other it uses a 12 and takes up the whole row.

<div class="row">
   <?php if(something){ ?>
      <div class="col-md-4">
        <div> </div>
      </div>
      <div class="col-md-8">
        <div> </div>
      </div>
   <?php } else { ?>
   <div class="col-md-12">
     <div> </div>
   </div>
   <?php } ?>
</div>
like image 33
Tricky12 Avatar answered Mar 28 '23 15:03

Tricky12