Dynamically change bootstrap to centre if less than 3 in a row

2 Views

Currently I have three col-md-4 columns displaying an image in each. If a user only has say 1 or 2 images uploaded it will float the content left as normal but leave the third with wasted space.

Is it possible with CSS to centre the 1-2 columns until a 3rd has been added?

    <div class="container>

     <div class="row">

        <div class="col-md-4 image-1">
         <img>
        </div>

        <div class="col-md-4 image-2">
         <img>
        </div>

        <div class="col-md-4 image-3">
         <img>
        </div>

     </div>

    </div>
Post Views: 2

Related posts

2 comments

  1. I think you should not mix left-aligned items (when 3 or more) with center aligned items. What happens when a group of 2 items follows a group of 4 or 5?

    If you want them all centered, just add a custom class (.centerRows in my case) to the container and use the CSS below:

    .centerRows>.row {
  text-align: center;
}
.centerRows>.row>[class^="col-"] {
  text-align: initial;
  float: none;
  margin: 0 auto;
  display: inline-block;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container centerRows">
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>

    If you only want to center the rows with 2 or less children, add a custom class to the rows you want centered, after counting their children via js. Proof of concept:

    $('.container>.row').each(function(){
  if($(this).children().size() < 3) $(this).addClass('centerMe');
})
    .centerMe {
  text-align: center;
}
.centerMe>[class^="col-"] {
  text-align: initial;
  float: none;
  margin: 0 auto;
  display: inline-block;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>

  2. IMHO you can’t do this with css. It can be done
    using JS. Something like this: 

    if($('.image-3').length === 0){
    $('.row').find('div').RemoveClass('col-md-4');
    $('.row').find('div').AddClass('col-md-6');
}

    But if you’ll add more statement to the algorithm, i mean
    “if it will be only one div, or only 4(with one on next row)”
    you’ll have to get more complicated code.

Comments are closed.