CODEWITHSUNDEEP
htmlcssangularjs
lhoworko
lhoworko

Reputation: 1191

Align element to bottom of previous row

I'm using angular to load in a list of items from the server and displaying them on the page using:

<div class="col-sm-6 col-md-4" ng-repeat="activity in activities">
    <img ng-src="[[ act.icon ]]" height="100" alt="">
    <h3>[[ act.title ]]</h3>
    <a class="btn btn-king small color smooth-scroll" ng-click="joinActivity(activity)">Join</a>
    <p>[[ act.description ]]<br>
        Duration: [[ activity.num_times ]] time<br>
        Points: [[ activity.points ]]<br>
    </p>
</div>

As you can see, a small display should show each row with 2 activities, and medium and up 3 wide. The problem I'm having is that not all rows display the wanted number of activities. What I mean by that can be seen in the image below.

enter image description here

It has to do with the fact that some activities have more text than others, therefore their heights are taller. The row below will insert the next activity in the highest possible spot, often messing up the formatting.

I feel like there is some simple css fix, but I just can't seem to figure it out. The goal is the below image. Any help would be appreciated.

enter image description here

Upvotes: 0

Views: 87

Answers (2)

Nadine
Nadine

Reputation: 559

In your case all you need to do - is to clear row after every 2nd item on md screens and after every 3rd item on sm screens.

Like this:

  <div ng-repeat="activity in activities">

    <!-- your item -->
    <div class="col-sm-6 col-md-4">
      <img ng-src="[[ act.icon ]]" height="100" alt="">
      <h3>[[ act.title ]]</h3>
      <a class="btn btn-king small color smooth-scroll" ng-click="joinActivity(activity)">Join</a>
      <p>[[ act.description ]]<br>
        Duration: [[ activity.num_times ]] time<br>
        Points: [[ activity.points ]]<br>
      </p>
    </div>

    <!-- clear row after every 3rd item on MD screens -->
    <div class="clearfix visible-md" ng-if="($index+1) % 3 === 0"></div> 

    <!-- clear row after every 2nd item on SM screens -->
    <div class="clearfix visible-sm" ng-if="($index+1) % 2 === 0"></div> 
  </div>

Here is plunker for demo

Upvotes: 1

partypete25
partypete25

Reputation: 4413

You'd need to clear the rows and reset and apply these clears again at the different breakpoints.

clearing-bootstrap-3-columns

Upvotes: 1

Related Questions