How can I create a design that adjusts to show 5 columns on larger screens and 2 columns on smaller screens using Bootstrap 4?

I am working on a responsive column layout for an online store. I need to display 5 columns on large screens and 2 columns on mobile screens using Bootstrap4. However, on screens below 576px width, only one column is being rendered instead of two. How can I fix this issue? I tried using the .d-block .d-sm-none class, but it's not working as expected. Here is the code snippet:

<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe7.png" alt="adidas 1">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>It is inspired by two icons of big Air: the Air Max 180</h5>
      </div>
    </div>
    ...
    <div class="card mb-4">
      <img class="card-img-top img-fluid" src="images/shoe2.png" alt="Card image cap">
      <div class="card-body text-center">
        <h5><b>MRP:</b> <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;800</span></h4>
          <h3><b>WSP: <span class="orangeText"><i class="fas fa-rupee-sign"></i>&nbsp;350</span></b></h2>
            <h5>Limnos CAT 3 IDP Shoes. Black-Barbados Cherry.</h5>
      </div>
    </div>
  </div>
</div>
htmltwitter-bootstrapcssbootstrap-4

Answer №1

In order to display 5 cards across on screens medium size and larger, you should implement the following code:

<div class="w-100 d-none d-md-block">
    <!-- wrap every 5 over md -->
</div>

For displaying 2 cards in a row on screens smaller than medium size, use this code:

<div class="w-100 d-block d-md-none">
    <!-- wrap every 2 under md -->
</div>

To ensure that the cards do not stack into one column on extra small screens, you can override the Bootstrap card-deck like so:

@media (max-width:576px){
    .card-deck .card {
        flex: 1 0 0%;
        margin-left: 15px;
        margin-right: 15px;
    }
}

Check out the demo here:

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

Struggling to get a basic HTML form to function with JavaScript commands

In my form, there are two input fields and a button. Upon clicking the button, a JavaScript function is triggered which multiplies the values entered in the inputs. The result is then displayed in a <p> element and evaluated through an if else statem ...

javascripthtml

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...

htmlcss

What is the impact of a floated element on vertical spacing?

I have come across an article discussing the usage of CSS, but I am puzzled as to why image number four is not positioned below image number one. Instead, it appears below image number three. Can someone please explain this to me? Here is the HTML code sni ...

javascriptjqueryhtmlcss

:selected element malfunctioning

I've been struggling to make the following code work: html <div class = "col-md-4 video text-center wrapper-q1"> <p class = "no-padding"> <input class="question1" id = "vraag1" type="radio" name="q1" value="Moon"> < ...

htmlcssinputradio-buttonchecked

What is the point of the horizontal scroll bar in WP Thesis?

There seems to be a horizontal scroll bar appearing at the bottom of my site, even though there is no content extending beyond the visible area. Can anyone provide guidance on how to fix this issue? My website is built on Wordpress 3.0 and utilizes the Th ...

htmlcsswordpresswordpress-thesis-theme

Is there a way for the React select component to adjust its width automatically based on the label size?

After defining a React select component, it looks like this: <FormControl> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id=&quo ...

javascripthtmlcssreactjsmaterial-ui

Developing a Multi-Stage Pop-Up with Jquery

I am interested in creating a custom multi-step modal This particular div has dynamically generated classes $('.modal-content').append('<div class="modal-body step step-' + key + '" data-step="'+key+'"></div> ...

javascriptjqueryhtml

Display the output based on checkbox selection using JavaScript

I am working on a feature where I need to capture checkbox inputs using JavaScript and then store them in a PHP database. Each checkbox corresponds to a specific column in the database. If a checkbox is checked, I want to insert its value into the databa ...

javascriptphphtmlcheckbox

Reformat an input number by substituting commas with periods

Here's the code I'm working with: <input type="number" tabindex="3" placeholder="Item Price" step="0.01" min="0.10" max="999.99"> An example value inside this input is 1,95. I need to replace the comma with a dot. Can this be done using ...

jqueryhtmlformsformat

Troubleshooting Guide: Issues with Bootstrap 3 Modal Window Implementation

This question is so simple that it's embarrassing. I attempted to copy the code from http://getbootstrap.com/javascript/#modals directly into a basic page setup, but it's not functioning. It seems like I'm making a very silly mistake. Here i ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal

Select the send all text option when making a request

Using ajax, I can dynamically fill a drop-down select menu. My next step is to include all the text from the selected options in my request. <select name=".." > <option value="0"> ... </option> <option value="1"> xxx </option ...

javascriptjqueryhtmlajaxspring-mvc

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

My button group looks like this: HTML <div class="btn-group"> <button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button> <button type="button" class="btn btn-default btn-xs gold-outline-button" da ...

htmlcsstwitter-bootstrap

HTML experiences confusion as JSON tosses undefined data

Can someone assist me with API integration? I am new to this and trying to display the Poster, Title, and Year from an API URL. Here is the code I have been working on. When I log in, it shows JSON in an array but throws "undefined" in front-end. Your help ...

javascriptjqueryhtmljson

Tips for arranging HTML image sources to prepare for future updates

Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a n ...

htmlcss

Issues with Google Chrome truncating the end of lengthy pages

While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the pr ...

htmlcssruby-on-railsgoogle-chrome

Issue with IE7 causing div elements to slide off the screen on specific WordPress pages

Encountering a strange IE7 bug on two pages of a WordPress site I'm currently developing. Some divs are shifting to odd positions, with one completely off the screen: and another here: Additionally, possibly related or not, the "created by" link in ...

htmlcsswordpressinternet-explorer-7

Develop a persistent overlay with HTML and CSS

I've been working on a project (HTML and CSS page) that features a navbar at the top of the page, a main container below the navbar, and a menu on the left side. The menu is initially hidden, but when I move my mouse to the left edge of the window, i ...

htmlcssoverlaysticky

When the parent element has a fixed position, the child element will no longer maintain its floating property

I'm currently working on a fixed navigation panel that sticks in place while scrolling down. Here is the code I have so far: <header> <a class="logo" href="/">Logo_name</a> <nav> <a href="#">Menu_1</a& ...

htmlcss

Using jQuery to arrange information from an API into a table

Currently, I am in the process of learning jQuery as it is a new concept for me. I have attempted to make a request to an example API and received an array of objects that need to be listed in a table. However, I am facing difficulty in sorting it within t ...

javascripthtmljqueryjsonajax

HTTrack displays an error message indicating that the file cannot be located

After downloading a website using HTTrack with the command below: /usr/local/bin/httrack https://www.website.com -O /Users/mainuser/Desktop/website -n -j I located the index.html file in the website folder and attempted to run it. However, Chrome display ...

htmlhtml-parsinghttrack