Tips for arranging cards in columns without causing vertical scrolling to be triggered

I am working with Bootstrap 5 and have created a column with multiple cards:

https://jsfiddle.net/fzxc1v69/

Currently, all the cards are displayed one below the other, but I want them to be lined up horizontally instead.

In my code, the .section class is set to occupy the entire browser window (height: 100vh).

The issue is that vertical scrolling is enabled, whereas I would prefer horizontal scrolling so that the cards align like this:

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

Can someone guide me on how to achieve this layout?

htmlcssbootstrap-5

Answer №1

To address this issue, one possible solution is to distribute the cards across multiple columns, as shown below:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bca1bc">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021f021f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="section" style="width: auto; height:100vh; overflow:auto">
  <div class="container" style="width: 1200px;">
    <div class="row" style="width: 1200px;">
      <div class="col-3">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 1....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 2....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 3....
          </p>
        </div>
      </div>
      <div class="col-3">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 4....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 5....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 6....
          </p>
        </div>
      </div>
      <div class="col-3">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 7....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 8....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 9....
          </p>
        </div>
       </div>
      <div class="col-3">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 10....
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

(Please note that I made adjustments to the row width to accommodate for four times the column width and set the section div width to automatic)

Answer №2

To achieve the desired outcome, simply set the direct parent of the cards to display: flex. Specify the flow direction as column and enable wrapping in the flex settings.

Additionally, applying flex-grow: 0; flex-shrink: 0 to the cards will prevent them from adjusting their size based on available space, causing them to scroll instead of resizing to fit the viewport.

.horizontal-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 95vh;
}

.card {
  flex-shrink: 0;
  flex-grow: 0;
}
<div class="section" style="width:100%; height:95vh; overflow:auto; overflow-y: hidden">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-12 col-lg-12 col-xl-12 horizontal-container">
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 1....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 2....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 3....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 4....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 5....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 6....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 7....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 8....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 9....
          </p>
        </div>
        <div class="card" style="width:300px; height:122px; border:1px dashed green;">
          <p>
            Item 10....
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

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

The functionality of List.js is currently not optimized for use with tables

I'm currently experimenting with list.js in order to create a real-time search feature for a table. I have successfully tested it on lists (similar to the example provided at ). However, I am facing difficulty replicating this functionality for tables ...

javascripthtmlsearchlistjs

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

I am currently facing the challenge of managing multiple pages within a single document and I would like to utilize jQM 1.3's Panel widget to control navigation between these pages. However, the issue arises from the requirement that Panels must be co ...

javascriptjqueryhtmljquery-mobilenavigation

Incorporating rounded corners to an embedded YouTube video

Check out this JSFiddle link. The border-radius property appears to be working correctly at first, but then the rounded corners suddenly disappear shortly after loading. Is there a way to apply rounded corners to YouTube videos that are embedded on a webp ...

cssyoutube

Refresh a Div using JSON content with Struts2 Jquery Plugin

Is there a way to dynamically reload the content of a div with just a specific part of a JSON object in it? The code provided works perfectly, but it displays the entire JSON object within curly braces. I want only one variable from the object to be shown ...

jqueryjsonhtmlstruts2reload

Guide to pre-populate a text field within a WKWebView on a website with the use of Swift

I am a beginner in the world of coding, specifically with Swift. My goal is to allow users to input their username and password in the settings section, which will then automatically populate the login page on a WKWebView that I have created. Currently, I ...

htmlswiftxcode

If I create an App with Phonegap, HTML5, and Websql, what happens to the app's data when the user restarts their mobile device?

My application utilizes HTML5's WebSQL to store temporary notes and bookmarks, which will later be synchronized with the server. I am curious whether data stored in WebSQL will be lost upon mobile restart or cache clear, similar to how browsers on ph ...

androidiphonehtmlcordovaweb-sql

Expanding the visual in a spacious display with the help of ng-carousel from the Bootstrap framework

I have created a slider with multiple images on a website using Angular 4. The slider is displayed in a small area of the webpage and I would like to add a feature where the user can click on an image to view it in a larger screen or window. This could i ...

javascripthtmlangularbootstrap-4angular5

Javascript addClass and removeClass functions are not functioning as expected

Can you help me figure out why the icon still goes into the "startSharing" section even when it is turned off? In my html file, I have the following code for the icon: <div class="startSharing"></div> And in my javascript file, I have the fo ...

javascriptjqueryhtml

Creating a seamless design with a navigation brand and login button on the same row within a navbar

I am trying to create a fixed navbar at the top of my webpage. The goal is to have the company's logo and name on the left side, with a log-in button on the right side. After reviewing multiple examples online, I found that most of them use a navbar- ...

htmlbootstrap-4nav

ERB failing to interpret Ruby script

Hello, my index.html.erb file looks like this: <h1>Bookmarks</h1> t <% @books.each do |b| %> <div class="book"> e <div class="row"> s <div class="col-md-1"> t <p class="rank-this ...

htmlruby-on-railsrubyerb

Adjustments to make for custom span and gutter width in Bootstrap's values

Looking to design a fixed layout with Bootstrap? Want to set span3 to 278px and gutter width to 12px for a total width of around 1142px? I tried the Customize tool on the Bootstrap site, but didn't get the desired result. Any advice on the correct val ...

csstwitter-bootstrapless

Issues arising from script tags causing disturbances in CSS

As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes ...

csstwitter-bootstraphead

Tips for adjusting the color of a row when hovering

Can I modify the row color on hover in material-table using props? Similar to this example. Appreciate your help. ...

cssreactjsmaterial-uimaterial-table

Ways to eliminate spacing between two select boxes?

Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...

htmlcss

Using jQuery to load content into a jQuery UI dialog box

I am looking to implement a pop-up that displays content from another asp page. To achieve this, I am using jquery.load to load the page into a div and jquery-ui.dialog. This is my code: <div id="dialog"></div> Inside the document ready fun ...

jqueryhtmlasp.netajaxjquery-ui

Retrieving specific HTML data without the need to download the entire webpage

Is there a way to extract data from an HTML table on a webpage without downloading the entire HTML content? In my Delphi XE2 application, I am using TWebBrowser and TEmbeddedWB to load the webpage and then parse the Table element. However, due to the heav ...

htmldelphibrowserextractindy

What is the best way to perfectly center my CSS menu in a fluid style layout?

Can you assist me with this issue? I am trying to center my CSS menu precisely in the middle of the user's screen, both vertically and horizontally. Since users have varying screen resolutions, I need a fluid example to achieve this. Below is the HT ...

htmlcss

Flexible design for your website content wrapper

When I display the content on my website, it sometimes overlaps the footer because the wrapper does not adjust its size based on the content. I set the height to an absolute value and now I need to find a more flexible option to prevent this issue. I' ...

htmlcssresponsive-design

Media queries for Tailwind CSS in a Node JS application do not function properly when viewed on a mobile device

I recently developed a Node JS app using EJS templates and Tailwind CSS. Check it out live here: If you're curious, feel free to explore the code on Github. While the media queries function well on desktop devices, they seem to be ineffective on mo ...

cssnode.jsmedia-queriestailwind-cssejs

Selecting list items using the up and down keys in JavaScript/jQuery

As the search terms dynamically populate a list of items, I am looking for a way to make the list items selectable/focused using the up/down keys and hide the dropdown with ESC key. <form> <div> <div class="field"> & ...

javascriptjquerybootstrap-5popper.js