Clearfix Class
In a 3x4 grid system, if the height of any column is taller than the other, it doesn't clear properly and alignment problem occurs and break the layout. In this code, we use the combination of a .clearfix class and the responsive utility class (.visible-md-block) to rectify it. The responsive utility class effects the .clearfix class only on medium devices like laptop and is invisible on other devices. The default grid system has 12 columns and in the layout sum of the every three column that is col-md-* is equal to 12, we have to clear columns after third column. Thus where columns numbers are different, for every column you should use .clearfix after the column that makes the complete 12 column grid.
Input code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style type="text/css">
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #dbdfe5;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-md-4">
<p>Box 1</p>
</div>
<div class="col-md-4">
<p>Box 2</p>
</div>
<div class="col-md-4">
<p>Box 3</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 4</p>
</div>
<div class="col-md-4">
<p>Box 5</p>
</div>
<div class="col-md-4">
<p>Box 6</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 7</p>
</div>
<div class="col-md-4">
<p>Box 8</p>
</div>
<div class="col-md-4">
<p>Box 9</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 10</p>
</div>
<div class="col-md-4">
<p>Box 11</p>
</div>
<div class="col-md-4">
<p>Box 12</p>
</div>
</div>
<h1 class="text-center text-danger mt-4 text-capitalize">clearfix class for Bootstrapp4</h1>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
OutPut
Next topic
link ---> https://babatechnicalgmt.github.io/graphic-canvas-2d
link ---> https://babatechnicalgmt.github.io/baba-technical-gmt-responsive.github.io
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style type="text/css">
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #dbdfe5;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-md-4">
<p>Box 1</p>
</div>
<div class="col-md-4">
<p>Box 2</p>
</div>
<div class="col-md-4">
<p>Box 3</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 4</p>
</div>
<div class="col-md-4">
<p>Box 5</p>
</div>
<div class="col-md-4">
<p>Box 6</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 7</p>
</div>
<div class="col-md-4">
<p>Box 8</p>
</div>
<div class="col-md-4">
<p>Box 9</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 10</p>
</div>
<div class="col-md-4">
<p>Box 11</p>
</div>
<div class="col-md-4">
<p>Box 12</p>
</div>
</div>
<h1 class="text-center text-danger mt-4 text-capitalize">clearfix class for Bootstrapp4</h1>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
OutPut
Next topic
link ---> https://babatechnicalgmt.github.io/graphic-canvas-2d
link ---> https://babatechnicalgmt.github.io/baba-technical-gmt-responsive.github.io
No comments:
Post a Comment