React Bootstrap Clearfix
React Clearfix - Bootstrap 4 & Material Design
React Bootstrap clearfix is a utility which to automatically clear child elements, so a user doesn't have to add additional markup.
Quickly and easily clear floated content by adding a clearfix utility (
.clearfix
)
to the parent element. Can also be used as a mixin.
Basic example
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
import React from "react";
const ClearfixPage = () => {
return (
<div className="bg-info clearfix">
<button className="btn btn-secondary float-left">Example Button floated left</button>
<button className="btn btn-secondary float-right">Example Button floated right</button>
</div>
);
}
export default ClearfixPage;