Horizontally scrollable list of cards in Bootstrap

Question

I am trying to create a horizontal list of cards where 3 cards are shown at a time and the other ones are horizontally scrollable, like this:

This can be done with CSS pretty easily, but I want to do this using Bootstrap. Bootstrap 4 ships with cards as popularized by material design and they are as easy to use as anything else in Bootstrap. For this example instead of cards it could also be regular divs.

The thing I am struggling with is creating a scrollable container of X cards (or divs) where 3 of them are shown at a time and the others overflow to the right and are scrollable. I am not sure how to use Bootstrap give the cards (or divs) a width so that 3 are shown at a time and the other ones lie next to them on the right.

Stopple

Answer 1

Update 2021 Bootstrap 5

The flexbox utils still exist in Bootstrap 5: https://codeply.com/p/Vo13PAGO7e

<div class="container-fluid py-2">
    <h2 class="font-weight-light">Bootstrap 5 Horizontal Scrolling Cards with Flexbox</h2>
    <div class="d-flex flex-row flex-nowrap">
        <div class="card card-body">Card</div>
        <div class="card card-body">Card</div>
        <div class="card card-body">Card</div>
        ...
    </div>
</div>

Update 2019 Bootstrap 4.3+

The flexbox method still works, so you can use the flexbox utils in the container of the cards: https://codeply.com/go/PF4APyGj7F

Original Answer Bootstrap 4 alpha

Now that Bootstrap 4 Alpha 6 uses flexbox, this horizontal scrolling layout is much easier. You can simply use flex-row and flex-nowrap:

<div class="container-fluid">
    <div class="row flex-row flex-nowrap">
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        ...
    </div>
</div>

https://codeply.com/go/GoFQqQAFhN

Zendah

the codeply link doesn't show your example... Can you anyway update to bootstrap 4-beta2 if any change is necessary? – Suzette

It would be more helpful to show the updated code for the second example here, rather than having to click through to the link. – Casas

Adding the overflow-auto to the above solution adds a scrollbar to slide (BS 4.0). <div class="d-flex flex-row flex-nowrap overflow-auto"> – Fountainhead

@Zim This solution is not effective since you don't control the overflow. You have to add another class to set overflow state otherwise the whole page width will be expanded. – Astigmatism

@Astigmatism I don't understand what you mean by "control the overflow". the OP asked for horizontal scrolling cards which is what this answers. – Zendah

I meant that if you don't set overflow the whole page width will be the same as the horizontal card group length and horizontally scrollable. – Astigmatism

@Astigmatism any idea how to resolve the whole page scrolling issue? I am stuck at that point, no matter what i do, i am not able to get it done. – Crim

Answer 2

The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.

With overflow property:

 <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

 <h6>Bootstrap 4 horizontally scrollable card groups</h6>
 <div class="d-flex flex-row flex-nowrap overflow-auto">
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
      <div class="card card-block mx-2" style="min-width: 300px;">Card</div>            
</div>

Without overflow property:

     <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

     <h6>Bootstrap 4 horizontally scrollable card groups</h6>
     <div class="d-flex flex-row flex-nowrap">
          <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
          <div class="card card-block mx-2" style="min-width: 300px;">Card</div>
          <div class="card card-block mx-2" style="min-width: 300px;">Card</div>            
    </div>

Astigmatism

Columns should always be placed in .row. This doesn't work since the columns stack vertically and there is no display: flex – Zendah

@Zim I quoted most voted answer and added overflow-auto class to emphasize it is necessary, but you are right, columns should be placed in row and also row should be placed in container. I updated the answer, thank you. – Astigmatism

Answer 3

You can use bootstrap-horizon

Installation

Include bootstrap-horizon.css after bootstrap.css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css">

Add the .row-horizon class to .rows that require horizontal scrolling. In order to improve the UX, bootstrap-horizon overrides bootstrap's .col-*-* classes to make the baseline width 90% instead of 100% which allows for a small portion of the last column to be displayed.

<div class="row row-horizon">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    ...
  </div>
</div>

Example

Jackqueline

Thanks! I am not accepting your answer yet because I found a way to do it "natively" in Bootstrap 4 which I will post later. Dear googlers who are annoyed that I never posted my solution: The idea is it put a card deck into a hor. scrollable container and scale the carddeck so that the correct number of cards will be shown. – Stopple

@Stopple Hello ! I have the same problem as you, can you post our native solution please ? Some code would be awesome if you still have it – Nolin

@VivienAdnot use the new flexbox utilities as explained in my answer – Zendah

Using classes 'list-group list-group-horizontal text-nowrap overflow-auto' achieves the same, why are we going to install a new lib only for this? – Experimentalism

Answer 4

Bootstap 4.3
Scss file

.card-deck-scrollable{
  @extend .card-deck;
  flex-direction: row;

  & > .card{
    @extend .mx-3;
    flex: 0 0 40% !important;/*Change to any size you want*/
    max-width: 40%;
  }
}

html file

<div class="card-deck-scrollable flex-nowrap overflow-auto">
  <div class="card">
    <div class="card-body">
      <div class="card-title">Name</div>
    </div>
  </div>
</div>

Since you are implementing a horizontal scroll I am sure that all the cards have to be the same for all the cards thus @extend .card-deck; this will ensure all the cards are the same height.

Adrastus

Answer 5

To add to @ikonuk's answer, if you have a layout using columns and would like to add a horizontally scrollable list of cards in a column where each card has a minimum length, you might find that the 'container' column breaks out of the grid system when you resize your browser window by dragging, when you use

style: min-width: 300px // (or any other value in pixels)

to set the minimum width of the cards.

In order to nòt let the columns break, simply use a percentage value for the minimum width of each card, or use bootstrap's w-xx classes to set the percentage for each card.

(this may also hold for bootstrap 5, but haven't tested it yet since stumbled upon this currently in a project that's using bootstrap 4)

Lani

Answer 6

html:

<div class="d-flex ms-lg-5 scro mb-3 "
style="max-height: 320px;max-width: 100%;overflow-y: hidden; overflow-x: scroll;scrollbar-width: none;-ms-overflow-style: none;">


<div class="card " style="min-width: 150px;" name="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text" style="text-overflow: ellipsis;overflow: hidden;width: 140px;height: 1.2em;white-space: nowrap;">title</p>
    
  </div>
</div>

css:

.scro::-webkit-scrollbar {
display: none;
}

now you can scroll by shift+wheel

Amazed

Answer 7

I felt like the #1 answer was a little confusing, so here's the simplest way of explaining:

<div class="row overflow-scroll flex-nowrap">
  <div class="col-4">1</div>
  <div class="col-4">2</div>
  <div class="col-4">3</div>
  <div class="col-4">4</div>
  <div class="col-4">5</div>
  <div class="col-4">6</div>
</div>

This is not a runnable snippet, but all you gotta do is add the 'flex-nowrap' class to row, and potentially 'overflow-scroll' as well.

Puri