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.
<!DOCTYPE html><html>
<head>
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:
Bootstrap 5 Float Responsive
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.
<!DOCTYPE html><html>
<head>
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:
Bootstrap 5 Float Responsive
Reference: https://getbootstrap.com/docs/5.0/utilities/float/#responsive