Float
React Bootstrap 5 Float component
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
Basic example
These utility classes float an element to the left or right, or disable floating, based on the
current viewport size using the
CSS float
property. !important
is included to avoid specificity issues. These use the same
viewport breakpoints as our grid system. Please be aware float utilities have no effect on
flex items.
Float right
Use .float-end
to float an element to the right of its container.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!
import React from 'react';
export default function App() {
return (
<>
<img src="https://mdbootstrap.com/img/new/textures/small/52.jpg" className="rounded-4 shadow-4 float-end m-4" alt=""
style={{width: "100px"}}>
<p className="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores
molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda,
aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A
amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores
quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates
distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at
molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae
nostrum autem animi assumenda!</p>
</>
);
}
Float left
Use .float-start
to float an element to the left of its container.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!
import React from 'react';
export default function App() {
return (
<>
<img src="https://mdbootstrap.com/img/new/textures/small/52.jpg" className="rounded-4 shadow-4 float-start m-4"
alt="" style={{width: "100px"}} />
<p className="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores
molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda,
aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A
amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores
quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates
distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at
molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae
nostrum autem animi assumenda!</p>
</>
);
}
Float none
Use .float-none
to reset any floats that are applied to an element. This is the default value for the
float property.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!
import React from 'react';
export default function App() {
return (
<>
<img src="https://mdbootstrap.com/img/new/textures/small/52.jpg" className="rounded-4 shadow-4 float-start m-4"
alt="" style={{width: "100px"}} />
<p className="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores
molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda,
aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A
amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores
quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates
distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at
molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae
nostrum autem animi assumenda!</p>
</>
);
}
Responsive
Responsive variations also exist for each float
value.
import React from 'react';
export default function App() {
return (
<>
<div className="float-sm-start">Float left on viewports sized SM (small) or wider</div>
<br />
<div className="float-md-start">Float left on viewports sized MD (medium) or wider</div>
<br />
<div className="float-lg-start">Float left on viewports sized LG (large) or wider</div>
<br />
<div className="float-xl-start">Float left on viewports sized XL (extra-large) or wider</div>
<br />
</>
);
}
Here are all the support classes:
.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.float-sm-none
.float-md-left
.float-md-right
.float-md-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-xl-left
.float-xl-right
.float-xl-none
.float-xxl-left
.float-xxl-right
.float-xxl-none