CODEWITHSUNDEEP
phphtmlcsstwitter-bootstraptwitter-bootstrap-3
dilby
dilby

Reputation: 35

Bootstrap row element based on breakpoint

I'm using bootstrap and looping a div - but because bootstrap requires a parent div with the 'row' class, I need to print a row based on the number of divs within that. The only problem is, the examples I can find are all a set number, and I need to do it based on the breakpoint. For example, my code is:

<div class="row">

  <?php foreach($projects as $project): ?>

    <div class="col-lg-4 col-md-6 col-sm-12 project_box">
        <a href="<?= $project->url() ?>" class="project_name"><?= $project->title()->html() ?></a>
          <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->crop(600, 600); ?>
            <a href="<?= $project->url() ?>"><img src="<?= $thumb->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="responsive" /></a>
          <?php endif ?>
          <p class="summary">
            <?php echo excerpt($project->problem(), 200) ?>
          </p>
        </a>
        <a href="<?= $project->url() ?>" class="btn project">Read More</a>
    </div>

  <?php endforeach ?>

</div>

As you can see, the child div in question that needs to be wrapped is 'col-lg-4 col-md-6 col-sm-12' meaning that on large devices the row parent should be printed every 3 divs, on medium every 2 and on small and extra small every 1.

Are there any ideas or examples on this? Such a hard thing to google and I'm out of ideas. Thanks!

Upvotes: 0

Views: 2049

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

You don't need to "print" the row every X cols. Put all of the cols in a single .row.

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div>
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div>
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div>
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div>
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div>
    ...
</div>

This is known as column wrapping.

However, if the content of each col varies in height, you will need to use "clearfix" responsive resets every X cols, OR make the columns the same height. Otherwise you'll have the height problem.

Upvotes: 2

Related Questions