Is there a way to prevent cards in a carousel slide from wrapping onto two lines?

Currently, I am utilizing Bootstrap 5 to develop a website and an accompanying carousel. My objective is to align all the items in the carousel vertically. Unfortunately, I am encountering some difficulties in achieving this layout. Can anyone provide assistance?

Here is the current appearance: https://i.sstatic.net/lgUgI.jpg

This is the desired look: https://i.sstatic.net/BJzyP.jpg

.crd {
  background: hsl(233, 47%, 96%);
  transition: all;
}

.crd:hover {
  background: hsl(216, 90%, 44%);
  color: #fff;
  transition: 0.5s;
}

.card img {
  margin: auto;
}

body {
  background: hsl(233, 47%, 96%);
  font-family: 'Poppins', sans-serif;
}
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="..." />

  <!-- <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb1acb2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/index.css" />
  <link rel="stylesheet" href="" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101746f736f72">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" data-purpose="Layout StyleSheet" title="Default" disabled href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d">
  <link rel="stylesheet" data-purpose="Layout StyleSheet" title="Web Awesome" href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d">

  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">

  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css">

  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css">

  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908d908e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  <!-- <script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script> -->
</head>

<body>
<!-- OUR CLIENTS SECTION START -->
<section class="bg-dark text-center">
    <div class="container">
        <div class="row text-white py-5">
            <h2 class="display-6"></h2>
            <div class="col-12">
                <a class="btn btn-primary" href="#carouseldemo1" role="button" data-bs-slide="prev">
                    <i class="fa fa-arrow-left"></i>
                </a>
                <a class="btn btn-primary" href="#carouseldemo1" role="button" data-bs-slide="next">
                    <i class="fa fa-arrow-right"></i>
                </a>
            </div>
            <div class="col-12">
                <div class="carousel slide" data-bs-ride="carousel" id="carouseldemo1">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="card text-center p-4 mb-2">
                                        <i class="fa-solid fa-camera-cctv fa-3x"></i>
                                            <div class="card-body">
                                                <h4>CCTV Services</h4>
                                                <p class="p-2">
                                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
                                                </p>
                                            </div>
                                    </div>
                                </div>
                                ...

htmlcssvisual-studiofrontendbootstrap-5

Answer №1

Your card layout in the panel is set to col-4, which means each card takes up 1/3 of the width. If you want each card to take up 1/4 of the width instead, use col-3 or just col.

For styling purposes, here is some CSS code:

.crd {
  background: hsl(233, 47%, 96%);
  transition: all;
}

.crd:hover {
  background: hsl(216, 90%, 44%);
  color: #fff;
  transition: 0.5s;
}

.card img {
  margin: auto;
}

body {
  background: hsl(233, 47%, 96%);
  font-family: 'Poppins', sans-serif;
}

And here are some links to external stylesheets and scripts that you may find useful for your project.

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

Exploring new classes with jQuery's .not() and :not()?

I am working on a memory game where I need to flip cards and check if two are equal. My issue is that I do not want the function to run when clicking on a card that is already flipped, or on another flipped card. I tried using jQuery's .not() and :no ...

javascripthtmljquery

using node-sass with several different starting points

I am currently working on a project where my main entry point is structure.scss, and each platform has its own second entry point. Here is the folder structure: scss/ | |-- components/ # Modular Component Files | |-- login.scss ...

cssnpmsassscss-lintnpm-scripts

Implementing multiple content changes in a span using javascript

Having an issue with a pause button where the icon should change on click between play and pause icons. Initially, the first click successfully changes the icon from a play arrow to a pause icon, but it only changes once. It seems like the else part of the ...

javascripthtml

The optimal method for designing a select menu to ensure it works smoothly on various web browsers

Recently, I encountered an issue with customizing a select menu using CSS and jQuery. After some work, I was able to achieve a result that I am quite pleased with: So far, the styling works perfectly in Mozilla, Opera, Chrome, and IE7+. Below is the curr ...

javascriptjqueryhtmlcss

What steps should be taken to empty a table before adding new rows to it?

After conducting thorough research, I am still unable to find a solution to my issue. I have a table that I am populating using JQuery and while it populates properly, I cannot seem to clear it before populating it again. Below is the HTML code: $("#sea ...

jqueryhtmlhtml-table

The second post request is encountering an issue where Request.body is not defined

After researching for similar symptoms, I couldn't find a case that matches mine. I have body-parser properly installed and app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})) configured accordingly. However, when handl ...

htmlmysqlnode.jsexpress

Issue encountered while trying to play sound on PhoneGap

Greetings! I am attempting to integrate sound into various buttons and components of a game. I found this code on the PhoneGap website which works perfectly fine during testing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "h ...

androidhtmlaudiocordova

Ajax activates a slider

One element I have is a menu div, along with a content div Initially, when the slider (which is a jquery plugin) is placed in the index.php, everything appears to be working well, as shown in the image below However, my objective is to have each page&apo ...

jqueryhtmlajaxslider

What is the best way to insert more rows into a mat-table without disrupting the existing layout?

Having trouble adding 2 additional columns (status and buttons) after the ngfor. It seems to be disrupting the entire structure, as shown in the image below: View the Broken Table Screen Shot I am making modifications based on code from material.angular. ...

angularwebfrontend

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

javascripthtml

What is the functionality of the keydown event?

Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...

javascriptjqueryhtmlcss

Guide to creating a dynamic illumination using CSS, HTML, and JS

Can you help me create a unique lighting effect for a specific section of my webpage? I'm curious about the techniques needed to achieve a similar effect as seen on another webpage. Is it feasible to create this effect using only CSS and HTML, or are ...

htmlcsslighting

Use the .replace() method to eliminate all content on the page except for the table

Extracting a table from a page that has been loaded through .ajax() in queue.htm has proven to be challenging. I am attempting to utilize .replace(regex) in order to isolate the specific table needed, but the process is unfamiliar to me. $j.ajax({ ...

javascriptjqueryhtmlregexreplace

How to capture text outside of a HTML tag using Selenium with Python?

I need help extracting the specific text inside a div element that is not enclosed by a label. <div style="color:red;"> <label> Total Amount Due:</label> $0.00 </div> Only interested in retrieving the $0.00 amount from th ...

pythonhtmlselenium-webdriverweb-scrapingdom

"Bootstrap 4 introduces a new feature where adjusting the spacing between columns causes them to wrap underneath one another

My goal is to create two divs that each take up 6 columns with a space of 1px between them. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoA ...

htmlcssbootstrap-4css-grid

Tips for aligning text to the right within a div using the "justify" text-align property

I want the final sentence of my content to be aligned to the right side while the rest remains justified. I attempted using a <span> within a <p> tag, but it did not work as expected: span.activity-conclusion { font:22px 'Open Sans ...

css

The update of the attribute in jQuery on a checkbox is not causing the change event to trigger

I am working on a feature where there are multiple checkboxes along with a status box that indicates if at least one of the checkboxes is checked. Additionally, I have included a Check All/None checkbox that can toggle all the checkboxes. However, althoug ...

jqueryhtmlcheckbox

Is there a way to trigger an ajax call specifically on the textarea that has been expanded through jQuery?

Whenever I expand a textarea from three textareas, all three trigger an ajax call. Is there a way to only call the ajax for the specific expanded textarea? I tried using $(this).closest('textarea').attr('id'), but it didn't work. A ...

javascriptjqueryhtmlajax

The Popover style from React-Bootstrap seems to be missing when applied to my component

Attempting to incorporate a Popover with overlay trigger from React - Bootstrap has proven to be quite the challenge. If you check this image, you'll see what it's supposed to look like. This is the code I used: var {Button, Overlay, OverlayTr ...

csstwitter-bootstrapreact-bootstrapbootstrap-popover

What is the best way to toggle the visibility of a div when a button is clicked?

I have a container with a registration wizard, and I want to toggle the visibility of this container when a button is clicked. How can I achieve this? Check out the code snippet below. Thank you :) <div id="wizard" class="swMain"> <ul> ...

htmlbuttonhideshow