Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

After an extensive search, I have come across numerous outdated questions and answers regarding my issue. With Bootstrap continuously evolving, I am hoping someone can help me with my specific requirement.

I am in need of a carousel of cards that adjusts based on the viewport size. For example:

  • By default: 3 items displayed
  • On mobile: only 1 item shown

The code snippet found here seems to be ideal for what I want: . However, I have been unsuccessful in implementing it as desired.

I have also experimented with the Slick carousel, which does meet my needs but is outdated and buggy. I would prefer to stick with just using Bootstrap if possible.

My project utilizes Webpack, so I have the option to utilize SCSS if necessary.

If anyone knows how I could achieve my goal using plain Bootstrap 5, please share your insights. Thank you!

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

If you want to achieve this using basic bootstrap, you can create two carousels. Below is the code snippet that demonstrates how to implement this feature.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner d-none d-sm-block"> //This will hide on screens smaller than sm (width < 768px)
        //Carousel loop starts
        <div class="carousel-item active">
            <div class="container">
                <div class="row">
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                </div>
              </div>
        </div>
        //Carousel loop ends
      </div>
    <div class="carousel-inner d-sm-none">//This will hide on screens wider than sm 
      <div class="carousel-item active">
          <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

Best of luck with your implementation!

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

Having trouble extracting text from a webelement using Python's Selenium

I've encountered an obstacle with Python Selenium when trying to extract text from a web element. My system is running Python 3.6.8 and Selenium 3.141.0. Using the xpath method, I locate a web element and store it in a test variable (testvar). This v ...

htmlpython-3.xseleniumtext

Leveraging AJAX to assist in PHP for data parsing

I am currently exploring the world of AJAX and grappling with a unique situation. I am in the process of developing an HTML app that will be integrated into a mobile application using PhoneGap. The main objective of my project is for the HTML page to con ...

javascriptjqueryajaxhtmlcordova

Customizing Bootstrap SCSS Styles: Using SASS to Override Defaults

This is the content of my styles.scss file: // Custom variables and mixins @import "variables.scss"; @import "mixins.scss"; // Global CSS @import 'bootstrap/scss/bootstrap.scss'; @import "global.scss"; @import "nav.scss"; @import "resume-item.sc ...

twitter-bootstrapsassbootstrap-4

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

Below is the HTML content: <div class="wrapper"> <figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>RESPONSIVE HTML5 WEBSITE FOR <br> OR LEDS COMPANY</span></fig ...

css

Why is the format incorrect when the Angular 7 (Change)-Function on Input of type Date isn't functioning?

I am facing an issue with updating the date using key input and assigning the selected date to a property of my object. Below is the code I'm currently working with: <input type="date" [value]="dateTime()" (change)="setDate($event)"/> The dat ...

htmlangulartypescripthtml-input

String object causing jQuery selector to malfunction

const newHTML = '<html><head><title>Hello</title><link rel="apple-icon-touch-precomposed" href="image.jpg" /></head><body></body></html>'; alert($(newHTML).find('link[rel="apple-icon-touc ...

javascriptjqueryhtmlstring

Execute the function when the control becomes visible

Currently, I possess an input control: <input id="someID" class="form-control" type="text" name="SomeData" data-ng-model="vm.SomeData"> I have a requirement to set the initial value of vm.SomeData upon user scrolling down to this control. As a begi ...

htmlangularjs

The grid columns are not utilizing the entire space of the rows and are extending beyond to the next line

I'm currently designing a card layout with images and aiming for uniformity in size. The plan is to have 4 columns in each row, with one card per column. Each subsequent row will also contain 4 cards. However, there seems to be an issue where the ca ...

htmlcsstwitter-bootstrapbootstrap-5card

Turning text into clickable links using JavaScript

I am faced with a scenario where I need to detect phone numbers within a string and convert them into clickable links. At the moment, using an external library is not an option. Here's the progress I've made so far: String: "This is my phone nu ...

javascripthtmlreactjs

Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

I am struggling to align 5 inputs in a single row on a page with custom widths. For example, I want the amount input to be smaller than the offer input. I attempted to use columns and apply different classes for size, but the submit button ended up not bei ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Is there a way to remove the bold styling from text next to JavaScript?

I recently launched a website at www.mvscaccounting.com, and I added a search engine made from javascript at the bottom of the page. Next to it, I wanted to put a "all rights reserved" notice. However, whenever I try to add any text next to the search engi ...

javascripthtmldreamweaver

A single Modal, Ajax, and data that is continuously refreshed

I'm currently facing a challenge in my project as I try to implement Ajax functionality. Although I'm relatively new to using it, I believe I have a basic understanding of its workings. My website involves collecting form data, posting it to a d ...

javascriptphphtmljqueryajax

Is there a way to determine the app bar height within a React Material UI application?

I'm trying to create a full-screen image for the opening of my website using React and Material UI. Here's a snippet of my JSX code with the default Material UI theme: <AppBar> //code in between </AppBar> <Container sx={{margin: ...

javascriptcssreactjsmaterial-ui

Looking to retrieve HTML elements based on their inner text with queryselectors?

I am looking to extract all the HTML divs that contain specific HTML elements with innerText = ' * ' and save them in an array using Typescript. If I come across a span element with the innerText= ' * ', I want to add the parent div to ...

javascripthtmltypescriptqueryselector

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

javascriptjqueryhtmlcss

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

Does the color of the item change as it gets older?

How can I smoothly transition a color as it ages using a dynamic time scale? I want to calculate the age based on the difference in time rather than triggering an animation after an event. I aim for a seamless gradient transition between two colors over a ...

javascriptjqueryhtmlcss

"Combining the powers of Ajax, jQuery, and PHP

I have developed a jQuery form that looks like this <div data-role="page" id="page3" data-theme="d" > <div data-role="header"> <h1 style="font-family: 'Open Sans Condensed', sans-serif;font- size:23px">LetsAllSave</h1> ...

phpjqueryajaxhtmljquery-mobile

Guide to repairing a CSS ball animation

I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving from top right -> bottom center -> top left (/). #stage { height:300 ...

htmlcss

Having trouble transmitting parameters through ajax

I have been attempting to use ajax to send variables to a php page and then display them in a div, but unfortunately, it's not functioning as expected. Below is the HTML code: <div id="center"> <form> ...

javascripthtmlajax