Offset 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>Bootstrap offset</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style_offset_Class.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">
<div class="row">
<div class="col-md-4 offset-lg-1 offset-md-3 pink">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Numquam, temporibus?</div>
<div class="col-md-3 blue offset-md-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti,
magnam!</div>
</div>
</div>
</body>
</html>
Below File is css/style_offset_Class.css File
.container {
border: 5px solid #000000;
}
.row {
border: 3px solid #ff0000;
}
.pink {
background: #ffc0cb;
}
.orange {
background: #ffa500;
}
.blue {
background: #007bff;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment