Carousel displaying multiple cards with only one card visible per slide

I am currently using Bootstrap 5 to create a carousel with multiple cards, but I am facing an issue where only one card is displayed per slide. How can I modify it so that 3 cards are shown per slide?

Should I utilize rows and columns for this purpose?

Alternatively, is there a way to integrate Bootstrap 4 and Bootstrap 5 together? I tried using both but encountered compatibility issues.

Below is the modified carousel code using Bootstrap 5:

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="media-container">
        <div class="course">
          <div class="media-preview">
          </div>
          <div class="media-info">
            <h6 class="tanggalMedia1">20 MARET 2023</h6>
            <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
            <div class="btnRead">
              <a href="#">&#8594;</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="media-container">
        <div class="course">
          <div class="media-preview">
          </div>
          <div class="media-info">
            <h6 class="tanggalMedia1">20 MARET 2023</h6>
            <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
            <div class="btnRead">
              <a href="#">&#8594;</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="col">
        <div class="media-container">
          <div class="course">
            <div class="media-preview">
            </div>
            <div class="media-info">
              <h6 class="tanggalMedia1">20 MARET 2023</h6>
              <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
              <div class="btnRead">
                <a href="#">&#8594;</a>
              </div>
            </div>
          </div>
        </div>
        <div class="media-container">
          <div class="course">
            <div class="media-preview">
            </div>
            <div class="media-info">
              <h6 class="tanggalMedia1">20 MARET 2023</h6>
              <h5 class="descBerita1">Lorem ipsum dolor sit <br> amet consectetu</h5>
              <div class="btnRead">
                <a href="#">&#8594;</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

CDN Scripts:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa7baa4b9f5f8e4fcf5a5">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f021f011c505d41595000">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
htmlcssbootstrap-5bootstrap-cards

Answer №1

Here is a suggestion:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6a6c7f6e33777d71706d5e2f302f2e302c">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee3e3f8fff8fedfccb9a2bea2bf">[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="c0a2afafb4b3b4b2a1b080f5eef2eef3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>


...

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

Rotating arrows enhance the functionality of the accordion menu

I have successfully implemented a basic accordion with rotating arrows on click. Everything is working smoothly except for one issue: When I collapse one item and then try to collapse another, the previous arrow does not return to its default state. Is ...

javascriptjqueryhtmlcssaccordion

Each time I attempt to alter the color based on the count, an error is thrown: "TypeError: Cannot read property 'style' of null"

If the count is equal to zero, I want to change the color to black in the code below: if(Count === 0){ document.getElementById('value').style.color = 'black'; } return( <div className='container_new'> < ...

htmlcssreactjs

How to retrieve an anchor element from a list using JavaScript

My current code loops through each <li> within a <td> cell and adds a class to the <li>. I have now inserted <a> tags between each <li> and am facing challenges in accessing the <a> tags. What I actually want is to assig ...

javascripthtmliteration

Displaying the content of a modal window

I am working on a modal that needs to print only the content within it, nothing else. Here is the setup for the button inside the modal: This should not be printed... <button id="btnPrint">Print (this btn should not be printed!)</button> ...

htmlcssangularjsbootstrap-modalangularjs-ng-click

Achieve perfect alignment of Bootstrap checkboxes

Is there a way to vertically align checkboxes in a column with their labels? My goal is to have these elements centered on the page, but I want the checkboxes themselves to be aligned vertically. <div class="row"> <div class="span12 paginatio ...

htmlcsstwitter-bootstrapcheckboxvertical-alignment

Utilize HTML layout with Express.js framework

Recently delving into NodeJs, I managed to craft a single HTML page complete with Header and Footer. My next task is to utilize this as the main layout for other HTML pages without resorting to Jade. Is it possible to define and implement layouts using H ...

htmlnode.jsexpress

How can you leverage Beautiful Soup to extract data from a specific CSS class on a webpage?

In the process of scraping this html with code, my main objective is to extract the link from it using Selenium driver. html = driver.page_source soup = BeautifulSoup(html) file_link = soup.select(".inpfilelink") return file_link print file_upload("/hom ...

pythonhtmlbeautifulsoup

Place elements at the bottom of a webpage on any browser or device with just a single page

I am in the process of creating a website that features a top menu and a background image with text on the home page, covering the full screen. However, I also need to include 3 blocks at the bottom of the screen that should display consistently across all ...

htmlcss

Expanding your selection capabilities using BeautifulSoup

My objective is to harness the power of BeautifulSoup in a unique way. Within my HTML files, there are two specific tags that catch my interest. The first one, which I'll refer to as TagA, is <div class ="A">...</div> The second tag, k ...

pythonhtmlbeautifulsoup

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

javascriptjqueryhtmlcss

In VB.NET, one can easily detect the HTML tag and update its content

I currently have some data stored in a database, which looks like this: <p><font style="BACKGROUND-COLOR: gold" size="+2" face="Arial Black"><strong>test</strong><u> test1</u> </font>< ...

htmlcssasp.netvb.net

Ways to grab attention as a visitor leaves a website

My company specializes in creating web surveys. Occasionally, we are asked if it is possible to conduct an exit survey on a website. This would involve displaying a "popup" to visitors as they are about to leave the site, prompting them to take a quick sur ...

javascripthtmlajax

Bootstrap4: What could be causing the adjacent row cell to remain left-justified instead of being centered as intended with mx-auto?

I've been working on creating a responsive header using Bootstrap4. The main goal is to have the logo displayed as left-justified text and the menu items as right-justified when the viewport is large, then transition to both being centered in a "small ...

htmlcssbootstrap-4flexbox

Undefined will be returned if the data in AngularJS is not set within the $scope

I have developed a factory that contains a list of functions which are called when the state changes. On page load, I am calling dtoResource.rc1Step1DTO(). Although the function executes, when I check the result in the console, it returns undefined. Below ...

javascriptjqueryhtmlangularjs

Update the src attribute in an HTML document

I am looking to dynamically change the size of an image on an HTML page using a dropdown list. Here is my code: <html> <head> </head> <body> <select id="selectbox" name=""> <opti ...

javascriptphphtmljquery

The font size on my website fluctuates up and down every time I refresh the page or navigate to a different one

I am currently in the process of updating my research lab's website using a Jekyll framework with Bootstrap. However, I have encountered an issue where the font size grows slightly whenever I navigate to a new page or refresh the current one, before r ...

htmlcsstwitter-bootstrapjekyll

Detecting key press events with extended duration using the DOM keydown event

Is there a way to receive notification when a key is pressed down, but not until it is released? It seems that using keydown continuously triggers the onkeydown callback while the key is held down. ...

htmldomw3c

What is the best method to prevent next.js components from overlapping one another?

I recently created a website using next.js and noticed an issue in my index.js file. There is a div that houses the main components of the site: class Page extends Component { render() { return ( <div className={styles.container}> ...

javascripthtmlreactjsnext.js

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

I have a basic HTML file with a Bootstrap form, along with a simple API coded within. In my server.js file, I've specified that when I request /about, it should redirect me to the about.html page. However, instead of redirecting, I'm encountering ...

javascripthtmlnode.jsexpressejs

How I disabled scrollbars in my HTML/CSS while implementing the Progid Microsoft gradient

IMPORTANT: Please read the latest update at the end of the question! Check out this snippet from my HTML/CSS code: html { height: 100%; } body { height: 100%; margin: 0px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699 ...

htmlcssinternet-explorer