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

Trang chủ » Html Bootstrap Col Size » How To Change Column To Row On Small Display In Bootstrap 4

Có thể bạn quan tâm

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:

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 <html> <head> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 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.

https://media.geeksforgeeks.org/wp-content/uploads/20240730221317/p1.mp4

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= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 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)

https://media.geeksforgeeks.org/wp-content/uploads/20240730221254/file.mp4

Supported Browser:

  • Google Chrome
  • Internet Explorer (after 9.0)
  • Firefox
  • Opera
  • Safari

T

thvardhan Follow Improve Next Article How to Display Three Bootstrap Cards in a Column ?

Please Login to comment...

Từ khóa » Html Bootstrap Col Size