Bootstrap 5 Columns Reordering Order Classes
Last Updated :
20 Dec, 2022
Bootstrap 5 Columns Reordering Order Classes are used to set the visual order of the columns inside a row irrespective of their position in the Document Object Model.
Bootstrap 5 Columns Reordering Order Classes:
- order-*: This class is used to set the visual order of columns in a row.
- order-**-*: This class sets the visual order of columns for various screen sizes in a row.
- order-first: This class is used to forcefully set the order of a column to the first in the row.
- order-last: This class is used to forcefully set the order of a column to the last in the row.
Note: * can be a number from 0-5 and ** replace the screen size like “sm”, “md”, “lg”, “xl”, “xxl”.
Syntax:
<div class="row">
<div class="col order-3">...</div>
...
</div>
Example 1: In this example, we used the order classes to change the visual orders of the columns in a row.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap 5 Columns Reordering Order classes</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div class = "mt-4" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >
Bootstrap 5 Columns Reordering Order classes
</ strong >
</ div >
< div class = "row w-50 mt-4" >
< div class = "col order-3 border text-bg-primary" >
Position in DOM: First
</ div >
< div class = "col order-0 border text-bg-primary" >
Position in DOM: Second
</ div >
< div class = "col order-5 border text-bg-primary" >
Position in DOM: Third
</ div >
< div class = "col order-4 border text-bg-primary" >
Position in DOM: Fourth
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we used the order-first and order-last classes to set the first and last columns in the row forcefully.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap 5 Columns Reordering Order classes</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div class = "mt-4" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >
Bootstrap 5 Columns Reordering Order classes
</ strong >
</ div >
< div class = "row w-50 mt-4" >
< div class="col order-3 border
text-bg-primary">
order-3 class
</ div >
< div class="col order-last border
text-bg-danger">
Order-last class
</ div >
< div class="col order-0 border
text-bg-primary">
Order-0 class
</ div >
< div class="col order-5 border
text-bg-primary">
Order-5 class
</ div >
< div class="col order-first border
text-bg-danger">
Order-first class
</ div >
< div class="col order-4 border
text-bg-primary">
Order-4 class
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.2/layout/columns/#order-classes
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...