Html - Bootstrap 5 "row" turn into "flex-row" with horizontal scroll bar in Mobile devices only

Bhadresh
August 3, 2024
48 views
3 votes
3 Answers

I have some images in bootstrap "row" & "col" div. For Mobile devices I want to turn this into flex-row with horizontal scroll bar.

The caveat is it need to preserve "col" & "row" for desktop devices

Here is sample code for desktop devices
Desktop cols

    <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 cols 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 any css solution available.

First option is two separate "div" for mobile & desktop, It contains images and I don’t know if both the "div" download images twice ?

Second option is to use javascript to detect device type and swap "row" class to "d-flex flex-row flex-nowrap" on load, if there is no css solution.

Here is snippet

.setwidth {
      min-height: 100px;
      min-width: 100px;
      margin : 15px;    
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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">Turn 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>

Answers

Chosen as BEST ANSWER

I got "css only" solution after some findings. Adding media query for small device solved my problem.

Here is the snippet

@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/[email protected]/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>

Thanks all

(Edit)

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

The above one is css and the bottom is html in small screen

<div class="d-flex d-lg-none d-xl-none d-xxl-none horizontal-scroll">
    <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>

The bottom is in large screen

<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>

To achieve the desired layout for both desktop and mobile devices using a single set of HTML elements, you can utilize CSS media queries to change the layout based on the screen size. This approach avoids duplicating HTML content and ensures that images are only loaded once.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        .setwidth {
            min-height: 100px;
            min-width: 100px;
            margin: 15px;    
        }

        /* Default layout for desktop */
        .row-wrapper {
            display: flex;
            flex-wrap: wrap;
        }

        /* Override for mobile devices */
        @media (max-width: 767.98px) {
            .row-wrapper {
                display: flex;
                flex-direction: row;
                overflow-x: auto;
            }

            .row-wrapper .col-2 {
                flex: 0 0 auto; /* Make columns not shrink and align horizontally */
            }
        }
    </style>
    <title>Responsive Layout</title>
</head>
<body>
    <div class="container pb-5">
        <h2 class="font-weight-light">Responsive Layout</h2>
        <div class="row-wrapper">
            <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>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Bootstrap 5 "row" turn into "flex-row" with horizontal scroll bar in Mobile devices only

Answers