Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with 

@media only screen and (max-width : 480px)
. I've checked out various resources, such as this one, but none seem to be working for me. One possible issue could be that my current cards are stacked vertically instead of horizontally.

Here is my current setup:

https://i.sstatic.net/7Sac6.png

And this is what I am trying to achieve:

https://i.sstatic.net/gb4HX.png

.mobile-card-container {
  display: block;
}

.card-background {
  background-color: #ffffff;
  border-radius: 6px;
  margin-top: 16px;
  height: 100px;
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="row">
  <!-- Mobile Card Container -->
  <div class="col-12 mobile-card-container">
    <div class="row">
      <!-- Card 48 cuotas -->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">
        Card content
      </div>
      <!-- /Card 48 cuotas -->
      <!-- Card 36 cuotas-->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">
        Card Content
      </div>
      <!-- /Card 36 cuotas -->
      <!-- Card 24 cuotas -->
      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">
        Card Content
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-4horizontal-scrolling

Answer №1

If you want to customize the Bootstrap classes for a specific purpose, you can modify the default behaviors by using the flex-nowrap class on the cards container for small media screens and changing the style of overflow-x to auto. Here are the main changes:

CSS Changes:

@media only screen and (max-width : 576px) {
    .mobile-card-container > .row {
        overflow-x: auto;
    }
}

It's important to note that I used max-width: 576px to align with the current Bootstrap Breakpoints.

Updated HTML structure:

<!-- Mobile Card Container -->
<div class="container-fluid mobile-card-container">
    <div class="row text-center flex-nowrap flex-sm-wrap">
        <!-- Cards go here -->
    </div>
</div>

For extra-small (XS) screen devices, the flex-nowrap class will work alongside the custom style mentioned earlier. For other screen sizes such as small (SM), medium (MD), and large (LG), the default Bootstrap class behavior will be preserved (Note the use of the flex-sm-wrap class).

Finally, you can test the functionality using the following example (resize window in full-screen mode):

.

Answer №2

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    .mobile-card-container {
      display: block;
    }

    .card-background {
      background-color: #ffffff;
      border-radius: 6px;
      margin-top: 16px;
      height: 100px;
      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
    }
 <div class="container">
    <div class="row">
      <!-- Mobile Card Container -->
      <div class="col-md-12 mobile-card-container">
        <div class="row">
          <!-- Card 48 cuotas -->
          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">
            Card content
          </div>
          <!-- /Card 48 cuotas -->
          <!-- Card 36 cuotas-->
          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">
            Card Content
          </div>
          <!-- /Card 36 cuotas -->
          <!-- Card 24 cuotas -->
          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">
            Card Content
          </div>
</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

Attempting to conceal an HTML 'label' element by employing CSS 'hide' properties

Why is it so difficult to hide a checkbox that says "Remember Me" on my membership site login form? The HTML code snippet causing the issue: <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</la ...

css

What is the best way to layer four images in a 2x2 grid over another image using CSS as the background

I am attempting to place 4 images of the same size on a 5th image defined as the background. Currently, it looks like this: It works perfectly when the height is fixed, but in my case, the height may vary causing this issue: This problem isn't surp ...

javascriptcss

Attempting to fill up a database table using a php iteration

My task is to populate a database table with more than 1,000 rows of data consisting of randomly generated numbers. Here is the code I am using: $input = new Card($request->all()); $i = 1; while($i <= 1000 ){ $input->pin = intval( ...

phphtmldatabaselaravel

When I click on "Submit", it redirects me to the PHP page

I've followed a tutorial on creating custom PHP contact forms at this link: and made some modifications to the form for my specific requirements. However, when I click the Submit button on the form, it redirects me to the PHP page. What I actually w ...

phphtmlformsemailsubmit

eliminate the offspring of a component (chessboard)

Hey there! I'm currently working on developing a chess game and I could really use your expertise to help me solve an issue. In my code, when I try to move a piece in the game, this is what happens: 1. First, I remove the existing piece from its cu ...

javascripthtmlcsschess

Here's the secret to completely getting rid of emoji as symbols

I'm facing an issue with using a regular symbol (specifically the up-right-arrow) in a Wordpress menu. When I paste the symbol character into the required field, it shows up correctly on desktop but on my iPhone, it displays as an emoji rather than th ...

htmlwordpresshexsymbolsemoji

Using Rails to display a set of partials generated by a presenter function

Currently engrossed in watching Railscast on presenters, I find myself eager to refactor one of my presenters to incorporate the page template. The specific screencast that caught my attention is 287-presenters-from-scratch Following the suggested method ...

htmlruby-on-railsrenderpresenter

The style of the dataTable can be customized with attributes such as color, background color, border

Is there a way to customize the appearance (such as color, background color, border, hover effects, etc.) of a dataTable using reactjs? Check out this dataTable image for reference. ...

reactjsbootstrap-4datatable

Rendering HTML with Apache Tiles using an empty <a></a> tag

Having encountered a peculiar issue with HTML lately. In my backend, the problematic section looks like this. <div class="content"> <a href="detail.html"></a> <img src="assets/i ...

htmlspring-mvcapache-tiles

Hide the div once it goes off screen, ensuring that the user stays in the same position on the page

On my website, I implemented an effect similar to the Airbnb homepage where there is a "How it Works" button that toggles a Div element pushing down the entire page. However, when the user scrolls to the bottom of the toggled div (#slideDown) and it disapp ...

javascriptjqueryhtmlcss

utilizing the data provided by a user in the "prompt" window within my HTML code

Looking to utilize user input from the prompt window. This is my custom JavaScript form: var answer; function load() { answer=prompt("what is your name?", "Write your name here"); return answer; } function hideNsee() { var HNS = docume ...

javascripthtml

Tips for designing a multi-level dropdown navbar

I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...

javascripthtmlvue.jsvuejs3bootstrap-5

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

javajqueryhtmlcssselenium

Include a link in the email body without displaying the URL

My concern revolves around displaying a shortened text instead of the full link within an email. When the recipient clicks on "Open Link," they should be redirected to the URL specified. The text "Open Link" must appear in bold. My current development fram ...

javascripthtmlangularmailto

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

I have a piece of jQuery code that is not functioning as expected: $("#erase").click(function(){ $("#erase").attr("disabled", "disabled"); // Prevent double-clicking $(this).html("Erasing..."); $.post("erase.php", {target: $("#targ ...

javascriptjqueryhtmlajax

Adjust the background to scroll to the bottom of the image first and then change it to be fixed

Here is the code I have written: body{ margin:0; padding:0; line-height: 1.5em; background-image: url(http://fehlbelichtet.stefanwensing.de/wp-content/uploads/sites/6/2016/04/alte-strasse-endlos.jpg); background-repeat:no-repeat; background-attachment: ...

htmlcss

Which specific file is being requested when a forward slash (/) is placed immediately after the website URL?

Is it just me being clueless, or is there something unusual about this URL format? I've come across URLs like http://www.example.com/?p=1 quite often and I'm curious to know what exactly is being accessed by it. I usually use URLs such as http:// ...

phphtmlurlwebaddress

Getting two child elements to be perfectly centered vertically

I have encountered a similar issue to many others, but despite trying various solutions, I can't seem to identify where I am going wrong. My parent element is supposed to display 3 blocks of information across the screen, each consisting of a large ic ...

htmlcssdisplay

Is it possible to run a Vue file autonomously, similar to an HTML file

When it comes to running html, we can rely on mainstream browsers such as Chrome. But is there a similar tool for vue files, like the browsers designed for html? ...

javascripthtmlvue.js

Trimming Text with JQuery

My goal was to truncate a string and add an ellipsis at the end using jQuery, but my code doesn't seem to be working as intended. Below is the jQuery code I wrote: $(".link-content > h4").each(function(){ var len = $(this).text().length; ...

jqueryhtmlcss