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

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

cssreactjsmaterial-uinext.jsjss

One problem with placing Bootstrap columns inside another column

Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized ...

htmlcsstwitter-bootstrappositioncss-position

Differences in functionality across various browsers when dealing with complex subgrid structures

After nesting a subgrid inside a padded subgrid within a grid, I noticed varying behavior across different web browsers. Chrome/Edge (Windows) Firefox (Windows) Safari MacOS https://i.stack.imgur.com/uHlto.png https://i.stack.imgur.com/SGxuC.png ht ...

csscross-browsersubgrid

Using a JavaScript if statement to check the height of a specific HTML element

I have been struggling to figure out how to insert an if-else statement in JavaScript that references data about an HTML element. My objective is to create an "onclick" function that enlarges an image with a 200ms delay and another function that returns th ...

javascriptjqueryhtml

When using Material UI GridTile, the actionIcon will not be shown if there is no title present

In my React application, I am utilizing Material-UI GridList to showcase some images. I am interested in adding an IconButton on top of the image in my GridTile component. Currently, I can achieve this by providing the button to the actionIcon prop. Howeve ...

cssreactjsoverlaymaterial-ui

Struggling to find solutions for debugging HTML codes in Visual Studio Code and linking my CSS page to my HTML page

I ran into some issues with linking my CSS stylesheet to my HTML pages. I tried using the <link rel="stylesheet" href="style.css"> command, where style.css is the name of the file. However, for some reason, it wasn't working ...

htmlcssdebugginglinker

Delete the initial double line break and then switch the remaining double line breaks to single line breaks

I am facing an issue with some HTML content fetched from an external source. My aim is to specifically target instances of double br tags using jQuery. I want to delete the first occurrence of double br and convert all subsequent occurrences into single br ...

jqueryhtml

The hyperlink does not display any text indicating an issue in the Wave accessibility evaluation tool

On my HTML page, there is a certain code snippet: <a href="example.com"><i class="myclass"></i></a> <a href="http://www.google.com" class="cart visible-xs"><i class="t-icon t-icon-cart-xs-2"></i></a> Des ...

htmlhyperlinkaccessibility

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

Prerender is running independently of the dynamic page title and meta tags rendering process

As part of a POC, I was integrating prerender.io with an angular-node application for SEO purposes. My application can be found HERE. The good news is that all three links are being crawled successfully, as confirmed by receiving a 200 OK status for all li ...

javascripthtmlangularjsseoprerender

Leveraging HTML Web Workers with the power of Jquery Ajax for seamless

I was wondering if it's possible to utilize jQuery within the web worker file. I encountered an error in Google Chrome saying: "Uncaught ReferenceError: $ is not defined". Below is the code snippet: The main file: var loader = new Worker(BASE_URL + ...

jqueryajaxhtmlweb-worker

Revive the design of a website

As I work on creating my own homepage, I came across someone else's page that I really liked. I decided to download the page source and open it locally in my browser. However, I noticed that while the contents were all there, the style (frames, positi ...

javascripthtmlcss

Ajax is able to fetch the URL without any issues, but the page is not being updated as expected. Instead,

I am currently working on implementing next/prev buttons using JavaScript, and have utilized a DynamicPage script for testing purposes. The only modification I made was to the beginning of the URL variable in pagenumber.js, although it essentially delivers ...

javascripthtmljqueryajax

Display navigation bar upon touch or lift

In the mobile version of a website, there is a fixed navigation bar at the top. The positioning of this navbar is achieved using position:absolute: .navbar-fixed-top{position:absolute;right:0;left:0;z-index:1000; The goal is to make the navbar invisible ...

javascriptjquerycss

CSS creates captivating image hover transitions with span elements

<a href=""><img src=""><span>content</span></a> When I hover over the image, the content within the span appears using relative positioning with display set to none and absolute positioning in the span tag. My query is regard ...

htmlcsscss-transitions

Collect the text shown in an alert message created with JavaScript

I'm currently unsure if this is achievable or not. In one of my scenarios, I aim to extract text that appears in alert boxes on external websites by including my JavaScript file. Is there a method to obtain the text content shown in an alert message ...

javascripthtml

What is the best way to conceal the border and background color of the dropdown arrow in an HTML <select> tag?

Upon browsing the Mozilla homepage, I noticed a peculiar element in the center - a <select> option with an arrow lacking border and background color. In contrast, when visiting the Facebook sign-up page, the drop-down arrow adheres to the Windows sta ...

csswindowsfirefoxfirefox4

How can I design a versatile button in HTML/CSS3/jQuery/Javascript that utilizes images for borders and corners for maximum scalability?

Is there a way to create a completely scalable button in HTML/CSS3/jQuery+Plugins using images for borders and corners? I have attempted a messy method, but I am confident that there are more effective solutions available. The approach I considered invol ...

javascriptjqueryhtmlcss

Is it possible to incorporate varied icon images for every item in an unordered list?

While I'm not an CSS expert, I do have a decent understanding of it. My current project involves creating an unordered list with unique icons for each item, along with changing the background color upon hover. I wonder if there's a way to achiev ...

htmlcsshtml-lists

Using a loop to format the <ol> tag

After creating an HTML script using angular, I was able to successfully display the names in an array as shown below. <div ng-repeat="namep in names"> <li>Name : <span ng-bind="namep.name"></span></li> <li>Age : ...

htmlangularjs