Skip to content
Related Articles

Related Articles

How to change column to row on small display in Bootstrap 4 ?
  • Last Updated : 28 Nov, 2019
GeeksforGeeks - Summer Carnival Banner

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>

Approach: 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”.

For example, .col-md-4 which means take 4 columns on the medium-sized screens. If we stack multiple column classes on a single element we can define how we want the layout to look like on other screens and change the columns to rows as we want. For example, .col-md-4 .col-sm-6 means that the given element will occupy 4 columns in a row for medium screens (essentially allowing for more elements in a single row) while on smaller screens it will occupy 6 columns. If the sum of columns for any given row exceeds 12, it will be automatically shifted to the next row.

Available classes and screens:



NameClassScreen Size
Extra smallcol-SIZE< 576px
Smallcol-sm-SIZE≥ 576px
Mediumcol-md-SIZE≥ 768px
Largecol-lg-SIZE≥ 992px
Extra Largecol-xl-SIZE≥ 1200px

NOTE: SIZE in the above table is to be replaced by the desired column size of 0 to 12 inclusive.

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=
          rel="stylesheet">
</head>
  
<body>
    <center>
        <h1 style="color: green;">GeeksForGeeks</h1>
        <div class="row">
            <div class="col-md-4 col-sm-6" 
                 style="background-color: chartreuse;">
                <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>

Output: As the display size gets smaller than 576px (SM) the column is automatically aligned to the next row.
BootStrapColumnToRow output gif

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=
    rel="stylesheet">
</head>
<body>
    <center>
        <h1 style="color: green;">GeeksForGeeks</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>GeeksForGeeks is awesome!</h3>
                    </div>
                    <div class="col-md-12 col-sm-6" 
                         style="background-color: yellowgreen;">
                        <h3>GeeksForGeeks 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>

Output: The higher level row shrinks to a column as the screen size decreases but the nested grid layout has the opposite effect as defined. (they go from column to row)

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :