Bootstrap 5 Float Responsive

Last Updated : 31 Jul, 2024

Bootstrap 5 Float Responsive is used to make the element floatable depending on the size of the screen. There are two sides where the elements can float one is right and another one is left or you can make it non-floatable.

Bootstrap 5 Float Responsive Class:

float-start: This class is used to float the element on the left side of the screen.
float-end: This class is used to float the element on the right side of the screen.
float-none: This class is used to stop floating the element on the screen.
float-*-^: The * represents the screen sizes(sm, md, lg, & xl) and ** represents floating positions(start, end & none).

Note: The ** and * are changeable according to your need. The * represents the screen sizes(sm, md, lg, & xl) and ^ represents floating positions(start, end & none)

Syntax:

<div class="float-*-^">

Example 1: In this example, we are going to create 4 div elements that will float on the right part of the screen when the screen size will change.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body class="m-3">
    <center>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Float Responsive</strong>
    </center>
    <div class="container">
        <div class="float-sm-end">
            I will float to the right when 
            the screen size is small or wider
        </div>
        <br>
        <div class="float-md-end">
            I will float to the right when 
            the screen size is medium or wider
        </div>
        <br>
        <div class="float-lg-end">
            I will float to the right when 
            the screen size is large or wider
        </div>
        <br>
        <div class="float-xl-end">
            I will float to the right when 
            the screen size is extra large or wider
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will float the element on both sides depending on the screen size. Elements will float left when the screen size is small and extra large and will float right when the screen size is medium and large.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body class="m-3">
    <center>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Float Responsive</strong>
    </center>
    <div class="container">
        <div class="float-sm-end float-lg-start">
            I will float to the right when 
            the screen size is small or wider
        </div>
        <br>
        <div class="float-md-end float-lg-start">
            I will float to the right when 
            the screen size is medium or wider
        </div>
        <br>
        <div class="float-lg-end float-lg-start">
            I will float to the right when 
            the screen size is large or wider
        </div>
        <br>
        <div class="float-xl-end float-lg-start">
            I will float to the right when 
            the screen size is extra large or wider
        </div>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/utilities/float/#responsive

Bootstrap 5 Images Responsive images

skyridetim

Improve

Article Tags :

Bootstrap 5 Float Responsive

Similar Reads

Thank You!

What kind of Experience do you want to share?