Bootstrap responsive grid layout (3 columns) with collapsed/hidden col-12 beneath each grid element

Question

I'm trying to make a 100% column appear beneath an element inside a coloumn of a bootstrap grid. Since it's easier to understand with pictures, here what I am trying to achieve:

When selecting one of the images (1 to x), a hidden div (with each different content) should appear beneath the image in the full 12 column size:

I managed to do this, however, when using a smaller resolution, this hidden div is displayed beneath the third element, and not beneath element 1. This is how it should be:

Would be glad for some help!

Here the code snippet of the actual version:

// hide all
 $('.descriptions .panel').hide();

  // handle img click
 $('#grid img').click(function() {

   // get index of the img that was clicked
   var idx = $(this).parent().parent().parent().index();

   var row = $(this).parent().parent().parent().parent().next('.row');

   // remove special style from all others
   $('#grid img').removeClass('highlight');

   // add a special style to the clicked image
   $(this).addClass('highlight');

   // hide all others
   $('.descriptions .panel').hide();

   // show desc for clicked img
   row.find('.descriptions .panel').eq(idx).show();

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.img-responsive{
 margin: 0 auto;
}
</style>
<!-- row 1 -->
<div class="row" id="grid">
 <div class="col-sm-4 portfolio-item">
  <figure class="gallery-item">
   <div class="img-title-text">
    <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
    <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
   </div>
  </figure>
 </div>
 <div class="col-sm-4 portfolio-item">
  <figure class="gallery-item">
   <div class="img-title-text">
    <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
    <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
   </div>
  </figure>
 </div>
 <div class="col-sm-4 portfolio-item">
  <figure class="gallery-item">
   <div class="img-title-text">
    <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
    <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
   </div>
  </figure>
 </div>
</div>

<!-- hidden row for images -->
<div class="row">
  <div class="col-md-12 descriptions">
 <div class="panel panel-default">
  <div class="panel-body flex-grow">Content here for image 1.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis 
   dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-body flex-grow">Content here for image 2.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis 
   dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-body flex-grow">Content here for image 3.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis 
   dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
 </div>
    
  </div>
</div>

<!-- row 2 -->
<div class="row" id="grid">
 <div class="col-sm-4 portfolio-item">
  <figure class="gallery-item">
   <div class="img-title-text">
    <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
    <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
   </div>
  </figure>
 </div>
 <div class="col-sm-4 portfolio-item">
  <figure class="gallery-item">
   <div class="img-title-text">
    <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
    <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
   </div>
  </figure>
 </div>
 <div class="col-sm-4 portfolio-item">
  <figure class="gallery-item">
   <div class="img-title-text">
    <img class="img-responsive" src="http://placehold.it/250x250" style="opacity:0.1;" alt="">
    <span style="position: absolute; top: 25%; text-align: center;width: 95%; font-size: 20px;">text</span>
   </div>
  </figure>
 </div>
</div>

<!-- hidden row for images of row 2 -->
<div class="row">
  <div class="col-md-12 descriptions">
 <div class="panel panel-default">
  <div class="panel-body flex-grow">Content here for image 1.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis 
   dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-body flex-grow">Content here for image 2.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis 
   dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-body flex-grow">Content here for image 3.. Blah blah blah, blah blah. That is very interesting stuff. Aenean sit amet felis 
   dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. </div>
 </div>
    
  </div>
</div>
[...]

Carol Skelly · Accepted Answer · 2016-09-28T18:41:06.653

2

First, I would place the full width column under the appropriate image column in your markup so you get the desired layout on smaller screens.

Then you can adjust hidden row accordingly on larger screens using a @media query so that it's full width and overlays the parent row. For example, give the hidden rows the overlay class.

@media (min-width:992px) {
    .row {
        position:relative;
        padding: 30px;
    }
    .overlay {
      position: absolute;
      z-index:1;
      width: 100%;
      bottom: 0;
    }
}

You can use Bootstrap's collapse component to show/hide the hidden content.

Demo http://www.codeply.com/go/qhVNyUFOvj

edited Sep 28 '16 at 18:41

answered Sep 28 '16 at 18:30

Carol Skelly

351,302
90
710
624

That's exactly what I needed! Thanks for the clean and simple solution – jmd Sep 29 '16 at 06:15
any Idea how I could make the hidden row bigger (like 400px) and move the row of the elements 4-6 by this size down? Here a fork of your code: http://www.codeply.com/go/e1XIJn564r – jmd Sep 29 '16 at 07:20
I managed it by adding to the @media query a margin to the bottom of the image: `a[data-toggle=collapse]:not(.collapsed)>img { margin-bottom: 280px; }` – jmd Sep 29 '16 at 12:25

score 1 · Answer 2 · answered Sep 28 '16 at 16:21

1

Have you tried putting a hidden div for each image directly underneath that image? If you use a Bootstrap collapsible underneath/right after each image, and you hide it, and then apply the functionality that you want, you should get what you're looking for. Is there a reason you can't/didn't want to use a separate <div> for each description?

answered Sep 28 '16 at 16:21

Trevor Yokum

152
1
10

If I put a div directly underneath the image, this div has the same width as the image (so only 1 column when on a desktop), only on a mobile this approach would work. If you have an Idea to solve than the desktop version I would be glad to do it like your way – jmd Sep 28 '16 at 16:34
The collapsible div doesn't have to be right after the trigger div. You can place it after all three columns, on its own separate line. – Rachel S Sep 28 '16 at 16:54

Bootstrap responsive grid layout (3 columns) with collapsed/hidden col-12 beneath each grid element

2 Answers2

Linked