Bootstrap Clearfix

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

You can easily learn the bootsrap 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




Leave a Reply

avatar
  Subscribe  
Notify of