Swiping cards in bootstrap

HTML & CSS
1

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)

[Album] imgur.com

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

2

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%;
}
3

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
4

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