skip to Main Content

I have the following code which might or might not give more than 12 columns in a row.
How can I make it look nice if there is more than 12 columns?

<div collapse="gpCollapse">
  <div ng-repeat="item in revealedCtrl.greatPersons" class="thumbnail col-md-3">
    <img ng-src="/images/useritems/{{item.greatperson.image}}" tooltip="{{}}"/>

    <div class="caption">
      <h3 class="text-center">{{}}</h3>

      <p class="text-justify">

enter image description here



  1. The reason your layout does not end up looking nice is the variable height of the column content, specifically in

    <div class="caption">

    use css to give the column divs (.thumbnail)

    position: relative;
    // to make space for absolutely positioned caption
    padding-bottom: 40px;

    and .caption

    position: absolute;
    bottom: 0px;
    Login or Signup to reply.
  2. Define a constant height to “thumbnail” class.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top