Bootstrap Clearfix Class | Coding Tag
×

Bootstrap Clearfix

4122

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:




Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments