Bootstrap Clearfix
0 4359
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:
Share:
Comments
Waiting for your comments