Bootstrap Clearfix

0 4370

Bootstrap .clearfix class used for remove/clear the float of any element.

You can easily learn the bootstrap with us. For any technical issue or query you can feel free contact to us. Our Team always happy to serve you.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!- Bootstrap css file ->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>

<body>
<div class="container">
<h1> Bootstrap Clearfix </h1>
<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>

<br>
<div class="clearfix"></div>
<br>

<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>
<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>

<br>
<div class="clearfix"></div>
<br>

<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>
<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>
<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>

<br>
<div class="clearfix"> </div>
<br>

<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>
<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>
<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>
<div
 class="col-md-3"> Nunc at aliquam magna. Phasellus a nibh euismod, 
lobortis diam sed, tristique purus. Integer eu leo turpis. </div>

</div>

<!- Bootstrap js file ->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>