Bootstrap Clearfix

by Abhishek 24-Jul-16

165 0 556

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>

Result:

Bootstrap Clearfix


Share:

Comments

Leave a Reply