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)
- How to hide element on small devices in Twitter Bootstrap ?
- How to fixed one column and scrollable other column or columns in Bootstrap ?
- Python | Change column names and row indexes in Pandas DataFrame
- What is the difference between display: inline and display: inline-block in CSS?
- Display Property in Bootstrap with Examples
- How to display multiple horizontal images in Bootstrap card ?
- How to display bootstrap carousel with three post in each slide?
- How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
- How to Create a Bootstrap Spinner and Display on Screen till the data from the API loads ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- HTML | small Tag
- HTML | DOM Small Object
- Difference Between Small Data and Big Data
- Why <big> tag is not in HTML5 while <small> tag exists ?
- How to make horizontal scrollable in a bootstrap row?
- How to make whole row in a table clickable as link in Bootstrap ?
- How to show contents of selected row of a table in Bootstrap model using jQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.