The task is to switch a column of Bootstrap 4 grid layout to row on small screen sizes.
<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:
|Extra small||col-SIZE||< 576px|
|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.
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.
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.