Make your grid easily expandable with full width capabilities using the power of Bootstrap 4

Question

Make your grid easily expandable with full width capabilities using the power of Bootstrap 4

I am currently working on creating a grid for a gallery that features an expanding preview to showcase more details. I found some helpful code in this informative article: https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/ Everything is functioning well, but I am interested in making the design responsive by integrating Bootstrap 4. The challenge I'm encountering is that the expansion feature is confined within the column, restricting it to the same width instead of spanning the entire page width. Is there a way to extend the expansion to full width or position it outside the column?

<section class="films">
    <div class="container-fluid"> 
        <div id="og-grid" class="og-grid row">
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
          <div class="movie col-md-4">
            <a class="portfolio-box" href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/portfolio/fullsize/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
              <img class="img-fluid" src="images/portfolio/thumbnails/1.jpg" alt="img01"/>
            </a>
          </div>
        </div>
     </div>
</section>

The initial CSS styling can be found here: https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/css/component.css

And JavaScript resources are available at: https://github.com/codrops/ThumbnailGridExpandingPreview/blob/master/js/grid.js

javascript css bootstrap-4 flexbox grid

Answer 1

Answer №1

The example from Codrops is intricate, making it a challenge to ensure responsiveness.

To achieve the desired responsiveness using Bootstrap, you can utilize the Collapse component along with some JavaScript logic to organize the details column as needed. This approach simplifies the jQuery/JS code and works seamlessly with Bootstrap's grid breakpoints. No additional CSS (besides Bootstrap) is necessary...

// initialize all cols with their natural order
$('.col-md-2').each(function(i,ele){
    let idx = $(ele).index('.col-md-2')
    $(this).css('order',idx)
})

// set the flexbox order of the details col in each row
var calcOrder = function(perRow){
    $('.collapse').each(function(i,ele){
        var idx = $(ele).index('.collapse')
        var modIdx = idx % perRow
        var posi = parseInt((perRow-modIdx) + idx)
        $(this).css('order',posi)
    })
}

// determine number per row based on window width
var breakpoints = function(width) {
      if (width >= 776) {
          //md
          calcOrder(6)
      }
      else if (width >= 567) {
          //sm
          calcOrder(3)
      }
      else {
          //xs
          calcOrder(2)
      }
}

// reset order on window resize
$(window).on('resize', function(){
    var win = $(this)
    breakpoints(win.width())
})

Demo:

Further reference: Bootstrap Expanding Grid

Answer 2

The example from Codrops is intricate, making it a challenge to ensure responsiveness.

To achieve the desired responsiveness using Bootstrap, you can utilize the Collapse component along with some JavaScript logic to organize the details column as needed. This approach simplifies the jQuery/JS code and works seamlessly with Bootstrap's grid breakpoints. No additional CSS (besides Bootstrap) is necessary...

// initialize all cols with their natural order
$('.col-md-2').each(function(i,ele){
    let idx = $(ele).index('.col-md-2')
    $(this).css('order',idx)
})

// set the flexbox order of the details col in each row
var calcOrder = function(perRow){
    $('.collapse').each(function(i,ele){
        var idx = $(ele).index('.collapse')
        var modIdx = idx % perRow
        var posi = parseInt((perRow-modIdx) + idx)
        $(this).css('order',posi)
    })
}

// determine number per row based on window width
var breakpoints = function(width) {
      if (width >= 776) {
          //md
          calcOrder(6)
      }
      else if (width >= 567) {
          //sm
          calcOrder(3)
      }
      else {
          //xs
          calcOrder(2)
      }
}

// reset order on window resize
$(window).on('resize', function(){
    var win = $(this)
    breakpoints(win.width())
})

Demo:

Further reference: Bootstrap Expanding Grid

Make your grid easily expandable with full width capabilities using the power of Bootstrap 4

Answer №1

Similar questions

Error encountered when attempting to insert data into database due to incompatible data types

A different approach to splitting strings

Slightly puzzled by the declaration of `var app = express()`

Tips for hiding the bottom bar within a stackNavigator in react-navigation

Every time I try to reload the page in my comment app, all the comments mysteriously

What is the best approach to connecting a listener to a date selection in the Django admin interface?

Leverage Pinia store in Vue helper functions

Conceal a Tag with CSS

Flexbox: Arrange two items horizontally without setting a maximum width

Struggling to update local state with response data when utilizing hooks in React

Issue with jQuery function not recognizing escaped double quotes in PHP script

Removing White Spaces in a String Using JavaScript Manually

What steps should I take to fix an error in my code?

Issue with ngModel being undefined after data has finished loading in Ionic 3

Why is my "npm install" pulling in unnecessary libraries that I didn't even mention?

"Encountering a "404 Error" while Attempting to Sign Up a New User on React Application - Is it a Routing or Port Problem

Generating a fresh instance of a class that mirrors an already existing instance, all without relying on eval()

Sending information from React JS to MongoDB

Vue is refusing to display information for a certain API call

Tips for inserting a jQuery snippet into a universal file