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 =
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 =
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 =
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 >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/columns/#standalone-column-classes
Share your thoughts in the comments
Please Login to comment...