vlrstea
December 30, 2017, 5:57pm
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)
I don’t have any idea how to make it. I tried with the carousel, with the grid system… nothing.
Can someone help me?
vlrstea
December 30, 2017, 8:22pm
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%;
}
PaulOB
January 1, 2018, 2:03pm
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.
1 Like
system
Closed
April 2, 2018, 9:03pm
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.