Scrolling Horizontally with Bootstrap Cards

I'm trying to implement horizontally scrolling cards using Bootstrap V.5, like this:

 <div class="container-fluid py-2">
    <div class="d-flex flex-row flex-nowrap" style="overflow: auto;">
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>

I've seen many working examples, but for some reason, it's not scrolling on my page. I can't figure out what's wrong! Any assistance would be greatly appreciated.

htmlcssbootstrap-5

Answer №1

<div class="container-fluid py-2" style="overflow: auto;">
    <div class="d-flex flex-row flex-nowrap" >
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        </div>
        </div>

Are you satisfied with the solution?

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 onclick function is malfunctioning within the Node.js environment

Having trouble with Node.js not working with JavaScript code This is my File structure: app.js index.html index.js However, when I run it without Node, it works and the alert shows up. app.js var http = require('http'); var fs = require(&apo ...

javascripthtmlnode.jsdom-eventsonclicklistener

Focusing on a specific div element

I need help selecting the initial div block that contains the word "Target". <div class="box-content"> <div> <div>Target</div> <div>xxxx</div> <div>xxxx</div> <div>xxxx</div> ...

csscss-selectors

Activating text wrapping functionality

My current project involves converting HTML to PDF using jsPDF. In order to ensure that every word appears in the exact location as it does in the original HTML, I decided to wrap each word in <span> tags. Specifically, I have a font tag (not added b ...

javascriptcssword-wrap

What is the purpose of a form that includes a text input field and a button that triggers a JavaScript function when the enter key is pressed?

<form action=""> <input id="user_input" onKeyDown="if(event.keyCode == 13)document.getElementById('okButton').click()" > <input id="okButton" type="button" onclick="JS_function();" value="OK"> </form> I'm trying to a ...

javascripthtmlforms

CSS for a Div with a Subtle Curve at the Bottom

Is there a way to achieve this specific shape using CSS? I attempted to use the following resources, but they didn't provide me with the desired outcome. Curved border with stroke in pure CSS? http://jsfiddle.net/ECHWb/ .banner-img{ height: 661p ...

htmlcss

What is the best method for eliminating underscores from text that is hyperlinked in a locally hosted HTML file?

I recently encountered an issue with my HTML file where the text "Indian" became underlined after saving the file. Here is the code snippet: <a href="file:///G:\work files\project\indian.html" target="_blank"> <div class="button ...

htmlcss

Interacting between frames with jQuery

I have main_page.htm with the following frameset structure: <frameset rows="30,*" frameborder=0 border=0> <frame name="top_frame" src="top.htm"> <frame name="bottom_frame" src="bottom.htm"> </frameset> The content in ...

javascriptjqueryhtmlframe

Two variations of identical descriptions within a single div container

Is there a way for me to use an item, specifically an img, within the same div class but with different definitions? For example: section .row img { margin: 0 0 30px; width: 100%; border: 4px solid #18a00e; } section .row img { margin: 0 ...

htmlcss

Adding text and buttons to the initial image in the slider: a step-by-step guide

I'm facing an issue with my html image slider as I try to add buttons and text to the first image but it keeps getting overridden. <div id="captioned-gallery"> <figure class="slider"> <figure> & ...

htmlcsstextslider

Ways to achieve 8 columns in a single row using Javascript and Bootstrap

Recently, I created a simple function for searching movies and manipulating them in the DOM. The issue arises when a movie name is entered and the API response returns around 20-30 recommendations. I wanted to display this fetched data in 8 columns per row ...

javascripthtmltwitter-bootstrapdombootstrap-4

How can you retrieve input values from a form using a button click but without requiring a

I am facing an issue with the delete button on my form. The form has three buttons - one to edit the form on another page, one to add a value on the existing page, and one to delete a value. While the submit and edit buttons work fine, I am struggling wi ...

phphtmlajax

Tips for automatically displaying user text based on its natural direction

Looking for a way to properly display user inputted text in Unicode based on its general direction, rather than defaulting to left-to-right. An issue arises when dealing with Arabic text as shown below, where the English word (4th) is split apart: اُر ...

csshtmlunicodebidi

What is the best way to reposition a container within another container using bootstrap?

I am new to working with Bootstrap and I am attempting to shift a container to the left within another container, but so far have been unsuccessful. In this image, you can see my attempt at moving the div containing a checkbox to the left I attempted to ...

htmlcssbootstrap-4bootstrap-5

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

Organizing pictures by category

I am currently working on creating an interactive image gallery with sorting options based on different categories such as land, sea, animals, and more. I have created a small example to demonstrate my concept. My objective: is to allow users to select a ...

javascripthtmljquerycsssorting

What is the reason behind Internet Explorer 11 not supporting conditional comments in HTML? Has this feature been dropped?

I'm having an issue trying to show different content on various web browsers. When using Internet Explorer 11 and Google Chrome 39, the message displayed is "Not Internet Explorer" instead of the expected result. Is there a problem with my code? It&ap ...

htmlinternet-explorerinternet-explorer-11conditional-comments

Refreshing the parent page in Oracle Apex upon closing the child window.When the child window

I have created an interactive report with a form where the interactive report is on page 2 as the parent page and the form page is on page 3 as the child page. In the parent page, I have written JavaScript to open a modal window (form page - page 3) using ...

javascriptjqueryhtmloracleoracle-apex

Unlock the innerHTML of a DIV by clicking a button with ng-click in Angular JS

I am curious about something. There is a <div> and a <button> in my code. I am looking to access the inner markup of the <div> within the ng-click function without relying on jQuery. Can you give me some guidance? <div id = text-entry ...

javascriptjqueryhtmlcssangularjs

What is the best way to show all cards in Angular when no filtering input is provided?

I have implemented a filter feature for multiple cards in Angular using Pipes. The filter works well, but I am facing an issue where no cards are displayed when there is no input value provided. I would like all the cards to be displayed when no input is g ...

htmlangulartypescriptselectfilter

Missing dots on owl carousel

Currently, I am working on a project that involves using the owlcarousel library in javascript. Everything was running smoothly until I encountered an issue. Although I have set the dots to true in the code, they are not appearing on the carousel. Below i ...

javascriptcssowl-carousel