Bootstrap 5 Standalone column classes

Last Updated : 09 Dec, 2022

Bootstrap5 Standalone column classes are used to give an element a specific width, where the .col-* classes can also be used outside a .row, which can be used to create the standalone column. We can even use this with clearfix wrapper class. It is generally used in float layouts where elements are floated to be stacked horizontally.

Standalone column class:

clearfix: This class is used to clear the float when the text is short.

Syntax:

<div class = "clearfix">
    <div class="col-*">
          ...
    </div>
</div>

Example 1: In this example, we will create 4 different rows and use the stand-alone column classes on them.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
</head> 
  
<body class="m-3"> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <strong> 
            BootStrap 5 Standalone column classes 
        </strong> 
    </div> 
    <div class="col-3 bg-dark p-3  
                border text-secondary"> 
        Standalone 25% Column Width 
    </div> 
    <div class="col-6 bg-dark p-3  
                border text-secondary"> 
        Standalone 50% Column Width 
    </div> 
    <div class="col-9 bg-dark p-3  
                border text-secondary"> 
        Standalone 75% Column Width 
    </div> 
    <div class="col-12 bg-dark p-3  
                   border text-secondary"> 
        Standalone 100% Column Width 
    </div> 
</body> 
  
</html>

Output:

Bootstrap 5 Standalone column classes

Example 2: In this example, we will use the clearfix, it is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
            crossorigin="anonymous"> 
</head> 
  
<body class="m-3"> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <strong> 
            BootStrap 5 Standalone column classes 
        </strong> 
    </div> 
    <div class="clearfix"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
             class="col-sm-6 float-sm-end" 
             alt="GeeksforGeeks"> 
        <p> 
            Bootstrap is a free and open-source collection of CSS and 
            JavaScript/jQuery code used for creating dynamic websites 
            layout and web applications. Bootstrap is one of the most 
            popular front-end frameworks which has really a nice set 
            of predefined CSS codes. Bootstrap uses different types of 
            classes to make responsive websites. Bootstrap 5 was  
            officially released on 16 June 2020 after several months of  
            redefining its features. 
        </p> 
    </div> 
</body> 
  
</html>