7

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';
      }
       ?>">
1
  • Do you want to be dynamic? I mean is col-sm-4 changing?
    – HTTP
    Sep 16, 2014 at 17:18

4 Answers 4

6

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>
2
  • @Sébastien It's working (I think) look at this Jul 17, 2015 at 11:31
  • Not stupid but Smart :-) Feb 22, 2022 at 10:49
4

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>
1

When using Bootstrap v4 and v5 you should make use of the 'equal-width' column class col:

.col{
    flex: 1 0 0%;
}

I needed this for edge cases where the last column was pushed to the next line caused by rounding errors when the browser calculates the with in pixes using the percentage based column styles. So in some situations my last column with col-2 was pushed down, using just col solved it.

A fiddle like the earlier given example with blue and red cells: http://jsfiddle.net/o14qh386/

0

I would do it like that, to keep code dry

<div class="row">
<div class="<?php if($something){echo 'col-md-push-4 col-md-8'}else{echo 'col-md-12'}">
</div>
</div>

I now noticed that you might want to put something if is in 4. in this case this might not be useful. If you just want to fulfil the space this is your solution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.