Bootstrap 5 Columns Reordering Offset Classes

Last Updated : 20 Dec, 2022

Bootstrap 5 Columns Reordering Offset classes are used to give some offset to the column. The offset class sets the left margin of the column they are applied to the total width of the offset columns.

Bootstrap 5 Columns Reordering Offset Classes:

offset-*: This class is used to give offset to the column position.
offset-**-*: This class is used to define offset to the column for various screen sizes.

Note: * can range from 1-11 position and ** replace the screen size like “sm”, “md”, “lg”, “xl”, “xxl”.

Syntax:

<div class="row">
    <div class="col-3 offset-6">...</div>
</div>

Example 1: In this example, we used the columns offset classes to give offset to the columns inside a row.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5  Columns Reordering Offset Classes</title> 
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> 
  
    <!-- Bootstrap Javascript -->  
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="mt-4"> 
            <h1 class="text-success"> 
                GeeksforGeeks 
            </h1> 
            <strong> 
                Bootstrap 5 Columns Reordering Offset classes 
            </strong> 
        </div> 
  
        <div class="row mt-4 w-50 border border-success"> 
            <div class="col-4 offset-4 border  
                text-bg-danger"> 
                Column With offset-4 Class 
            </div> 
            <div class="col-4 border text-bg-primary"> 
                Column 1 
            </div> 
        </div> 
        <div class="row mt-2 w-50 border border-success"> 
            <div class="col-4 border text-bg-primary"> 
                Column 1 
            </div> 
            <div class="col-4 offset-2 border text-bg-danger"> 
                Column with offset-2 Class 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we combined multiple offsets for different screen sizes to see how they work with responsive screens.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5  Columns Reordering Offset Classes</title> 
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> 
  
    <!-- Bootstrap Javascript -->    
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="mt-4"> 
            <h1 class="text-success">GeeksforGeeks</h1> 
            <strong> 
                Bootstrap 5 Columns Reordering Offset classes 
            </strong> 
        </div> 
  
        <div class="row mt-4 border border-success"> 
            <div class="col-4 offset-lg-4 offset-md-0  
                offset-sm-2 border text-bg-danger"> 
                offset-lg-4, offset-md-0 and  
                offset-sm-2 Classes 
            </div> 
            <div class="col-4 border text-bg-primary"> 
                No offset Classes</div> 
        </div> 
    </div> 
</body> 
    
</html>