Scrollable horizontal card list using Bootstrap

Looking to design a unique layout featuring a horizontal list of cards where 3 cards are displayed simultaneously, with the ability to horizontally scroll through the rest, like this:

https://i.sstatic.net/KgX27.png

While achieving this using CSS is straightforward, my goal is to implement it using Bootstrap. Bootstrap 4 introduces cards, inspired by material design, which seamlessly integrate into Bootstrap projects. Instead of cards, regular divs can also be utilized for this example.

The challenge I'm facing involves creating a scrollable container for X number of cards (or divs), showing 3 at a time while allowing the overflow to be scrolled horizontally. Unsure on how to use Bootstrap to set the width of the cards (or divs) so that 3 are visible at once with the remaining ones positioned next to them on the right.

csstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

Latest Update on Bootstrap 5 in 2021

The flexbox utilities continue to be a part of Bootstrap 5, as demonstrated here: 

<div class="container-fluid py-2">
    <h2 class="font-weight-light">Creating Horizontal Scrolling Cards with Flexbox in Bootstrap 5</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 for Bootstrap 4.3+ in 2019

Even in the latest versions of Bootstrap 4, the flexbox method remains effective. The flexbox utilities can still be utilized within the container of the cards:

Original Answer for Bootstrap 4 alpha

With Bootstrap 4 Alpha 6 adopting flexbox, creating a horizontal scrolling layout is now much simpler. Just 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>

Answer №2

To effectively address the issue, implement the solution presented below. In addition to utilizing the flex-nowrap property, it is crucial to incorporate the overflow attribute in order to prevent the entire page from expanding uncontrollably.

Utilizing the 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>

In the absence of the 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>

Answer №3

If you're looking to achieve horizontal scrolling in Bootstrap, check out bootstrap-horizon

Steps for Installation:

To get started, make sure to include the bootstrap-horizon.css file after your bootstrap.css file.

<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">

Remember to add the .row-horizon class to any .rows that need horizontal scrolling. This tweak adjusts the column width behavior from 100% to 90%, allowing a small portion of the last column to remain visible for better user experience.

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

Check out this Example:

https://i.sstatic.net/RwiWE.gif

Answer №4

Bootstrap 4.3
SCSS file

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

  & > .card{
    @extend .mx-3;
    flex: 0 0 40% !important;/*Adjust size as needed*/
    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>

For a horizontal scroll, ensure all cards have the same height by using @extend .card-deck;.

Answer №5

Expanding on @ikonuk's response, if your layout includes columns and you want to incorporate a horizontally scrollable list of cards within a column, each with a minimum length requirement, you may encounter the issue of the 'container' column breaking out of the grid system when resizing your browser window by dragging it.

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

To prevent this column breakage, consider using a percentage value for the minimum width of each card or utilize bootstrap's w-xx classes to specify the percentage for individual cards.

(This could also apply to bootstrap 5, although I haven't verified this as I discovered it while working on a project using bootstrap 4)

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

Answer №7

Upon reviewing the top answer, I found it slightly confusing. Here is a simplified explanation:

<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>

Please note that this code snippet is not executable. All you need to do is include the 'flex-nowrap' class in the row div, and possibly 'overflow-scroll' as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS media query specifically for mobile devices regardless of screen width

I've been trying to use a dragscroll plugin to scroll through content, but I've run into an issue where it doesn't work on mobile devices. By mobile devices, I mean those without a mouse cursor, like smartphones and tablets with touchscreen ...

cssmedia-queries

CSS: Problem Arising from Line Connections Between Tree Elements

I'm currently working on connecting tree nodes with lines in a drawing. I've managed to achieve it to some extent, but there are a few issues like dangling lines that I need to fix. You can find the implementation on codepen here: https://codepe ...

javascripthtmlcssvue.jssass

Updating and managing the CSS style for button states

In my asp.net application, I have 5 list items functioning as tabs on a Masterpage. When a user clicks on a tab, I want to redirect them to the corresponding page and visually indicate which tab is active by changing its class. What is the most effective ...

cssbutton

Aligning the second heading alongside pictures and a lightbox

My issue is that I am struggling to center the "See More" link directly under each title link. Currently, it is pushed to the right and I can't seem to find a solution. Any help with this problem would be greatly appreciated. I attempted using display ...

javascriptjqueryhtmlcsslightbox

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

webkitcss

The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below: // JavaScript var countries = [ { name: 'Thailand', link: 'www.google.com' }, { name: 'Tanzania', link: '' }, { name: &ap ...

javascripthtmlcss

Stopping individuals from engaging in the act of spamming a picture upload form

I am currently developing an innovative Image hosting platform, and I am faced with a crucial challenge – how can I effectively prevent users from continuously refreshing the form, causing the image to be repeatedly uploaded until my disk space allocat ...

phphtmlcssimageupload

Troubles with Bootstrap's navbar dropdown menu functionality

I seem to be encountering a problem with the dropdown list in my navigation bar. It was functioning correctly yesterday, but something seems to have gone awry as Bootstrap is no longer working for the dropdowns only. I'm puzzled as to why this sudden ...

htmlcss

arranging elements within a container

<td id="name_3869-0_0" style="position: relative; " colspan="4"> <div style="float:left;width:100%"> <img src="/img/1.gif" align="middle" style="margin-right: 10px;" class="company_symbol" border="0"> <strong style= ...

jqueryhtmlcsspositioning

Achieving a single anchor link to smoothly scroll to two distinct sections within a single page using React

There is a sidebar section alongside a content section. The sidebar contains anchor links that, when clicked, make the corresponding content scroll to the top on the right-hand side. However, I also want the sidebar link that was clicked to scroll to the ...

javascriptcssreactjs

Is the menu not appearing in the header section of the HTML/CSS?

Hey there, I'm a new student diving into the world of HTML/CSS. I've been working on creating a page layout, but for some reason my menu links are appearing under the header section instead of within it. I'm a bit confused and could really u ...

htmlcsscss-selectors

Are inline styles being utilized in a Styled component?

I'm currently utilizing styled-components within a React project and I am having trouble finding documentation regarding whether or not a styled component can accept inline styles on the "style" property. For example: The Text component has been styl ...

cssreactjsnext.jsstyled-components

After reducing the size of the table, the data spills over

Hey there, amazing individuals of the internet! Hope you're all doing well today. I've encountered a rather perplexing issue that's got me stumped. So, here's the situation - I have this table full of data and I want it to initially be ...

javascripthtmljquerycss

Aligning list items with Bootstrap

I am struggling with aligning Sheet3 and Science vertically left in a list with checkboxes. Currently, Science goes below the checkbox and I need a solution to fix this alignment issue. https://i.sstatic.net/bxoBT.png Any guidance on how to adjust the al ...

htmlcssbootstrap-5

Implementing a Jquery check based on a checkbox

Hey, I'm having an issue with a condition. When I uncheck the checkbox, it doesn't uncheck. I've tried to make a block display, but the JavaScript isn't working. I attempted to add: document.getElementById("Reload").style.display = "b ...

javascriptjqueryhtmlcssbootstrap-4

Utilizing JQuery's printThis Plugin in Combination with the Style Attribute

I am currently working on a JavaScript app and I am trying to implement a button that will allow users to print a specific div. To achieve this, I am utilizing a jQuery plugin called printThis (github link) as well as attempting to use window.print(). $(" ...

javascriptjqueryhtmlcss

The duplication of rows occurs when using the vue3 v-for directive on columns

It may seem trivial but I am struggling to prevent the row from being duplicated. Here is the code snippet in question: <div class="row" v-for="(column, index) in columns" :key="index"> <Column :columnName=" ...

vue.jsvuejs3bootstrap-5

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?

My current goal is to achieve the following task... I aim to position a square perfectly in one or both corners of the top right section of a div, ensuring it never exceeds the boundaries regardless of the div's size or dimensions that necessitate th ...

htmlcssgradient

How can I determine if a page is being rendered in Standards mode or Quirks mode by IE7?

Having some issues with CSS on a webpage. The code is valid and adheres to Strict HTML standards. It displays correctly in most browsers, but I'm experiencing problems in IE (specifically version 7). Is there a way to determine if the page is being re ...

htmlcssstandardsquirks-mode

Encountering an issue when trying to use SVG clip-path in Safari

I'm currently experimenting with creating a unique hexagonal border around a button. My approach involves enlarging the container element by a few pixels compared to the button size and using the same clip-mask on both elements to achieve a bordered e ...

htmlcsssvgsafariclip-path