Swiping cards in bootstrap

Hi,

I’ve been trying for a few hours to make a list of swipeable cards in bootstrap 4, and I can’t find a solution.

On mobile it needs to be something like this.

On larger screens will be with 4 cards and buttons.(i can’t post two pictures, I uploaded it on imgur)

I don’t have any idea how to make it. I tried with the carousel, with the grid system… nothing.
Can someone help me?

I’ve managed to do this at this point, but my brain is complaining right now, so I’am going ot take a brake before implementing the solution in the real template.

<div class="container-fluid">
  
  <div class="row flex-row flex-nowrap">
    
    <div class="upcomingfestivals col-6 col-sm-3">
        
      <div class="card card-block">post</div>
      
    </div>
    
    <div class="upcomingfestivals col-6 col-sm-3">
        
      <div class="card card-block">post</div>
      
    </div>
    
    <div class="upcomingfestivals col-6 col-sm-3">
        
      <div class="card card-block">post</div>
      
    </div>
    
    <div class="upcomingfestivals col-6 col-sm-3">
        
      <div class="card card-block">post</div>
      
    </div>
    
    <div class="upcomingfestivals col-6 col-sm-3">
        
      <div class="card card-block">post</div>
      
    </div>
    
    <div class="upcomingfestivals col-6 col-sm-3">
        
      <div class="card card-block">post</div>
      
    </div>
    
    <div class="upcomingfestivals col-6 col-sm-3">
        
      <div class="card card-block">post</div>
      
    </div>
    
    <div class="upcomingfestivals col-6 col-sm-3">
        
      <div class="card card-block">post</div>
      
    </div>
    
  </div>
  
</div>
.upcomingfestivals{
  
  flex-basis: 42%;
}

Hi, I don’t know if this helps but I took the example carousel from here and made it 4 in a row as shown here:

http://www.pmob.co.uk/temp2/boot4slider.html

At smaller screens the panels become a fixed width and you will need to scroll to see the 4 items in a row. It’s not actually a swipeable menu as that’s beyond me but does allow you to scroll sideways on touch due to the normal scroll action.

I’ve also added it to a codepen so its easier to fork.

It’s probably not what you want but may help in your task. :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.