Nesting 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 Nesting</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style_Nesting.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-6 pink">
<h2>Heading Goes Here</h2>
<div class="row">
<div class="col-md-6">
<h3>Sub Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum cupiditate dolores amet
obcaecati excepturi ea itaque illum rerum omnis, ex molestiae nulla vitae quis. Aut impedit
enim temporibus cupiditate ad dolorum itaque quo ut eius, accusamus, natus fugit rerum,
beatae quam omnis blanditiis illo commodi similique praesentium quisquam. Blanditiis,
consequatur atque facilis nam repudiandae quisquam facere ea cupiditate minus libero!</p>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3 green">
Hello
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Below File is css/style_Nesting.css File
.container {
border: 5px solid #000000;
}
.row {
border: 3px solid #ff0000;
}
.pink {
background: #ffc0cb;
}
.orange {
background: #ffa500;
}
.blue {
background: #007bff;
}
.green {
background: #9acd32;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment