How To Change Column To Row On Small Display In Bootstrap 4

Posted By Bajarangi soft , Posted On 13-10-2020

To solve the given task we have to use Bootstrap 4’s grid layout. The grid layout divides the entire visible row into 12 equally sized columns. Once we are in a row we can easily specify the arrangement of rows and columns based on the screen size. This is done by adding the class “col-SIZE-SIZE_TO_OCCUPPY”.

The task is to switch a column of Bootstrap 4 grid layout to row on small screen sizes.
Syntax:

<element class="col-md-4 col-sm-6 ...">...</element>

Example 1: In this example we will make a simple three-column row and shift one column to a new row on smaller screens.

<html>

<head>
    <link href=
                  "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          rel="stylesheet">
</head>

<body>
<center>
    <h1 style="color: darkred;">BAJARANGI SOFT</h1>
    <div class="row">
        <div class="col-md-4 col-sm-6"
             style="background-color: #dcad21;">
            <br>
        </div>
        <div class="col-md-4 col-sm-6"
             style="background-color: black;">
            <br>
        </div>
        <!-- Sum of SM col exceeds 12 so if the screen
            is small (less than 576px) the last column
            will Automatically get aligned in the next row -->
        <div class="col-md-4 col-sm-6"
             style="background-color: rebeccapurple;">
            <br>
        </div>
    </div>
</center>
</body>

</html>

Example 2: In this example we will make a nested layout of grids where we will show the data column-wise on medium screens and switch to a single row as the screen size goes smaller.

<!DOCTYPE html>
<html>

<head>
    <link href=
                  "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          rel="stylesheet">
</head>
<body>
<center>
    <h1 style="color: darkred;">BAJARANGI SOFT</h1>
    <div class="row container">
        <div class="col-md-4 col-sm-12">

            <!-- Nested! switch to row as screen gets smaller -->
            <div class="row">
                <div class="col-md-12 col-sm-6"
                     style="background-color: yellow;">
                    <h3>Bajarangi soft is awesome!</h3>
                </div>
                <div class="col-md-12 col-sm-6"
                     style="background-color: yellowgreen;">
                    <h3>Bajarangi soft is actually for geeks!</h3>
                </div>
            </div>
        </div>
        <div class="col-md-8 col-sm-12"
             style="background-color: tomato;">
            <h3>I will switch to row as the screen goes smaller!</h3>
        </div>
    </div>
</center>
</body>
</html>

Related Post

Learn How To Get Yesterday Today Tomorrow Date In PHP
How To Use Row And Column With Example Using Flutter
How To Add New Columns For Existing Table In Laravel Framework
How To Add Wave Clipper Bottom Animation In Flutter
How To Use Column Modifiers In Laravel Framework With Example
How To Drop Index Column In Existing Table With Laravel
How To Add a Drop Down Arrow In Html Using Bootstrap
Space Between Two Rows In a Table Using Css
When User Click On The Table Row How To View Data By AJAX
How To Split a Column Of List In Different Rows Using Bootstrap?
How To Change Column To Row On Small Display In Bootstrap 4