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 fixed one column and scrollable other column or columns in Bootstrap ?
- How to hide element on small devices in Twitter 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
- 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 ?
- How to set one column control over height in Bootstrap ?
- How to split a column of list in different rows using bootstrap?
- Convert a column to row name/index in Pandas
- How to change the width and height of Twitter Bootstrap's tooltips?
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.