How to change column to row on small display in Bootstrap 4 ?
The task is to switch a column of Bootstrap 4 grid layout to a 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:
Name |
Class |
Screen Size |
Extra small |
col-SIZE |
< 576px |
Small |
col-sm-SIZE |
≥ 576px |
Medium |
col-md-SIZE |
≥ 768px |
Large |
col-lg-SIZE |
≥ 992px |
Extra Large |
col-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
< 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 >
< 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.
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.
HTML
<!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" >
< 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)
Supported Browser:
- Google Chrome
- Internet Explorer (after 9.0)
- Firefox
- Opera
- Safari
Last Updated :
06 Jul, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...