On mobile devices, Bootstrap 5's "row" class is changed to "flex-row" to include a horizontal scroll bar

I have a bunch of images inside bootstrap's "row" and "col" div. On mobile devices, I'd like to switch this layout to a flex-row with a horizontal scroll bar.

The challenge is maintaining the "col" and "row" structure for desktop devices.

Here's an example code snippet for desktop devices Desktop columns

    <div class="row">
        <div class="col-2 setwidth bg-success">Card</div>
        <div class="col-2 setwidth bg-danger">Card</div>
        <div class="col-2 setwidth bg-info">Card</div>
        <div class="col-2 setwidth bg-warning">Card</div>
        <div class="col-2 setwidth ">Card</div>
    </div>

For mobile devices (with horizontal scrollbar) Mobile columns with horizontal scrollbar

    <div class="d-flex flex-row flex-nowrap">
        <div class="col-2 setwidth bg-success">Card</div>
        <div class="col-2 setwidth bg-danger">Card</div>
        <div class="col-2 setwidth bg-info">Card</div>
        <div class="col-2 setwidth bg-warning">Card</div>
        <div class="col-2 setwidth ">Card</div>
    </div>

Is there a CSS solution available?

The first option is to have two separate "divs" for mobile and desktop, but I'm unsure if both will download the images twice.

The second option is to use JavaScript to detect the device type and swap the "row" class to "d-flex flex-row flex-nowrap" on load if a CSS solution isn't feasible.

Here's a snippet:

.setwidth {
      min-height: 100px;
      min-width: 100px;
      margin : 15px;    
    }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c59425f425f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container pb-5">
        <h2 class="font-weight-light">For PC/wider screen</h2>
        <div class="row">
            <div class="col-2 setwidth bg-success">Card</div>
            <div class="col-2 setwidth bg-danger">Card</div>
            <div class="col-2 setwidth bg-info">Card</div>
            <div class="col-2 setwidth bg-warning">Card</div>
            <div class="col-2 setwidth ">Card</div>
            <div class="col-2 setwidth bg-success">Card</div>
            <div class="col-2 setwidth bg-danger">Card</div>
            <div class="col-2 setwidth bg-info">Card</div>
            <div class="col-2 setwidth bg-warning">Card</div>
            <div class="col-2 setwidth ">Card</div>
        </div>
    </div>


<div class="container pb-5">
    <div class="position-relative overflow-auto py-2">
        <h2 class="font-weight-light">Adjusting above code for Mobile/small devices</h2>
        <div class="d-flex flex-row flex-nowrap">
            <div class="col-2 setwidth bg-success">Card</div>
            <div class="col-2 setwidth bg-danger">Card</div>
            <div class="col-2 setwidth bg-info">Card</div>
            <div class="col-2 setwidth bg-warning">Card</div>
            <div class="col-2 setwidth ">Card</div>
            <div class="col-2 setwidth bg-success">Card</div>
            <div class="col-2 setwidth bg-danger">Card</div>
            <div class="col-2 setwidth bg-info">Card</div>
            <div class="col-2 setwidth bg-warning">Card</div>
            <div class="col-2 setwidth ">Card</div>
        </div>
    </div>
    </div>

javascripthtmlcssbootstrap-5

Answer №1

I managed to find a solution using only CSS by incorporating a media query for small devices. This approach effectively resolved the issue I was facing.

Check out the code snippet below:

@media only screen and (max-width: 600px) {
  .set_if_mobile {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    position: relative !important;
    display: flex !important;
    overflow: auto !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
}

.setwidth {
  min-height: 100px;
  min-width: 100px;
  margin : 15px;    
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e031e03">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container pt-5 pb-5">
    <h2 class="font-weight-light">Only css solution</h2>
    <h4> Just set @media query for small devices </h4>
    <div class="row set_if_mobile">
        <div class="col-2 setwidth bg-success">Card</div>
        <div class="col-2 setwidth bg-danger">Card</div>
        <div class="col-2 setwidth bg-info">Card</div>
        <div class="col-2 setwidth bg-warning">Card</div>
        <div class="col-2 setwidth ">Card</div>
        <div class="col-2 setwidth bg-success">Card</div>
        <div class="col-2 setwidth bg-danger">Card</div>
        <div class="col-2 setwidth bg-info">Card</div>
        <div class="col-2 setwidth bg-warning">Card</div>
        <div class="col-2 setwidth ">Card</div>
    </div>
</div>

A big thank you to everyone involved!

Answer №2

.scroll-horizontal {
    display: flex !important;
    overflow-x: auto !important;
}

The CSS code above is for horizontal scrolling, while the following HTML code is optimized for small screens.

<div class="d-flex d-lg-none d-xl-none d-xxl-none scroll-horizontal">
    <div class="col-2 setwidth bg-success">Card</div>
    <div class="col-2 setwidth bg-danger">Card</div>
    <div class="col-2 setwidth bg-info">Card</div>
    <div class="col-2 setwidth bg-warning">Card</div>
    <div class="col-2 setwidth ">Card</div>
</div>

For larger screens, use the following HTML code:

<div class="d-none d-lg-flex row">
    <div class="col-2 setwidth bg-success">Card</div>
    <div class="col-2 setwidth bg-danger">Card</div>
    <div class="col-2 setwidth bg-info">Card</div>
    <div class="col-2 setwidth bg-warning">Card</div>
    <div class="col-2 setwidth ">Card</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

Creating an animated time-based scrollable bar chart in javascript

As someone who is new to JavaScript and charting, I am seeking assistance with a specific task. Despite browsing various JavaScript charting libraries and examples, none seem to address my issue: My goal is to generate dynamic stacked bar charts, as depic ...

javascriptangularjscharts

What is the process for reversing the bubble order of elements in JavaScript?

I've developed a custom Slider component that performs flawlessly, with one small hiccup. When the slider is located within a modal, the mouseUp event triggers on elements beneath it (in terms of z-index) before reaching the element itself. This beh ...

javascripthtmlreactjsmodal-dialogevent-bubbling

Utilizing Pagination along with JsonResponse

Currently, I am working on a project called CS50W Network, which is essentially a clone of a social media platform. I have implemented a fetch API request to retrieve different objects, and it was working fine. However, once I added Pagination, I started ...

javascriptdjangodjango-paginationjsonresponse

The promise function resolves with no value

Trying to understand the promise function but struggling with returning the value. Any help would be appreciated. static getTrailer(movieId) { return fetch(`http://api.themoviedb.org/3/movie/${movieId}?api_key=###&append_to_response=videos`) ...

javascriptjsonasynchronouspromisefetch

When given an input, the initial state will rise from 0.00 to 0.01, and with each subsequent input, it will further increase to 0

My question revolves around managing an input field in React. Initially, the input has a value of 0.00. When a user enters a number, such as 1, the new value should be 0.01. Subsequently, if the user enters another number, for example, 1 again, the updated ...

javascriptreactjs

Guide on securely submitting a form to a Django site from an external source

My Django application needs to accept POST requests from another website using HTML and JavaScript. For example, I have mydjangosite.com and smallhtmlsite.com. What I'd like to achieve is: When a user visits smallhtmlsite.com and fills out a form, th ...

javascriptpythondjangoformssecurity

JSON data cannot be transmitted using AJAX

I created a function that tracks the time spent on a specific page and where the user came from. The data is collected and saved into a JSON object, but I encountered an issue when trying to send this JSON via ajax. Upon successful sending, I receive an em ...

javascriptjqueryjsonajax

What is preventing me from specifying a specific position in my multi-dimensional array?

My goal is to create a 3D version of an L-System, but I'm having trouble declaring elements in my multidimensional array. Even when I try to assign values to specific positions, the elements don't seem to update properly. For instance, if I write ...

javascriptthree.js

The navbar-toggler-icon in Bootstrap 5 is not displaying

In my Rails 7 application, I'm utilizing Bootstrap 5 and trying to implement the Dashboard example from Bootstrap's documentation. However, when I resize the browser window in my application, the navbar-toggler-icon doesn't display or functi ...

htmlbootstrap-5

Unable to click on element in Firefox browser

Encountering an issue with the following error message: Element is not clickable at point (791, 394). Other element would receive the click: Command duration or timeout: 66 milliseconds Any ideas on what's causing this? Using selenium web driver ve ...

htmlcssseleniumselenium-webdriverselenium-firefoxdriver

Is there a way to delete specific information from a JSON response?

Received the service response in the following format: Temp([ { XXX: "2", YYY: "3", ZZZ: "4" }, { XXX: "5", YYY: "6", ZZZ: "7" }, { XXX: "1", YYY: "2", ZZZ: "3" } ]); I need to manipulate this response in J ...

javascriptjson

Splitting the screen into four sections using Bootstrap 4 Flexbox

Is there a way to split my screen into four sections with equal width and height using bootstrap 4 and flexbox? Each section should occupy 50% of the screen's width and height. Additionally, I need these sections to be responsive in terms of their c ...

htmlcssflexboxbootstrap-4

converting a CSV string into a JSON array using AngularJS

My data is in a comma-separated format: "HotelName","Remained","Date" "Maxx","4","Jun 26 2016" "Voyage","3","Jun 24 2016" I am looking to convert this into a JSON array as shown below. How can I achieve this using my JavaScript code? [ { HotelName ...

javascriptjsoncsv

Implementing checkboxes before the label text using jQuery

Below is the code for a function I am working on: addCheckbox: function (name, parent, value, text) { var div = jQuery("#" + parent); var input = jQuery(document.createElement('input')).attr({ id: "cbid_" + value, name: n ...

jqueryhtmlcheckbox

The current CLI version is exclusively designed for Angular 5.0.0 or above and may not be compatible with other versions

I encountered an issue with my Angular project that was originally running on version 4. I mistakenly installed version 6 of Angular CLI while setting up a new project, resulting in an error message stating 'Your global Angular CLI version is greater ...

javascriptangularangular-cli-v6

Creating a CSS-only carousel - Ensuring its correctness (especially in terms of height)

Just stumbled upon this amazing CSS-only carousel. Any hints on how I could make it responsive and display two carousels side by side? Click here to view the carousel. /* ***************************************************** */ /* SLIDER 1 */ /* ****** ...

htmlcss

Issue: The serializer is receiving more than one value for the 'instance' argument

Recently, I started working with Django My current project involves performing CRUD operations using serializers, but I encountered this particular error: Here is the function in question: def updateemp(request, id): Updateemp = EmpModel.objects.get( ...

pythonhtmldjangobootstrap-4

Using a function to send multiple child data in Firebase

I am trying to figure out how to save data to a Firebase multi-child node structure: --Events ----Races -------Participants Below is some dummy data example that represents the type of data I need to store in Firebase: var dummyData = [ { ...

javascriptangularjsfirebaseangularfire

Having trouble incorporating custom elements with the document.execCommand function

I have been attempting to insert a custom element into an editable div using the document.execCommand method as described in detail on https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand. However, when I try to add a custom polymer eleme ...

htmlpolymer

"Exploring databases with MySQL and displaying dynamic outcomes with PHP

I am a beginner in PHP and I am attempting to create a basic search engine. My goal is to display a summary of the search results on an HTML page after each search, showing all the items that match the query. Each item summary should include a link to a sp ...

phphtmlmysqlsearch-engine