Float and Clearfix Class in Bootstrap CSS tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Float Clearfix Class Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Float_Clearfix_Class_Bootstrap.css">
</head>
<body>
<!--How to make Website Layout with Bootstrap ?-->
<!--3 Bootstrap CSS Classes : Container, Row, Col-->
<!--When use "Col" Class ? Answer: For Equal Width Div Tag-->
<!--Total width of Grid in Every row is 12-->
<!--Col Class for different Break Points-->
<!--Extra Large:col-lg, Large:col-lg, Medium:col-md, Small:col-sm, Extra Small-->
<!--Total width of Column Grid must be maximum 12 in one Row-->
<div class="container clearfix">
<div class="green w-25 float-lg-start float-sm-end">
<h2>Div A</h2>
Lorem ipsum dolor sit amet.
</div>
<div class="blue w-25 float-lg-end float-sm-start">
<h2>Div B</h2>
Lorem ipsum dolor sit amet.
</div>
</div><br><br><br>
<div class="container clearfix">
<div class="green w-25 h-25 float-lg-none float-sm-start">
<h2>Div A</h2>
Lorem ipsum dolor sit amet.
</div>
<div class="blue w-25 h-50 float-lg-none float-sm-end">
<h2>Div B</h2>
Lorem ipsum dolor sit amet.
</div>
</div><br><br><br>
<div class="container clearfix">
<div class="green vw-100 h-25 float-lg-none float-sm-start">
<h2>Div A</h2>
Lorem ipsum dolor sit amet.
</div>
<div class="blue w-25 vh-100 float-sm-end">
<h2>Div B</h2>
Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
Below File is css/Float_Clearfix_Class_Bootstrap.css File
.container {
border: 5px solid #000000;
height: 300px;
}
.row {
border: 3px solid #ff0000;
}
.pink {
background: #ffc0cb;
}
.orange {
background: #f39c12;
}
.blue {
background: #4aa6ee;
}
.green {
background: #9acd32;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment