Display Classes in Bootstrap 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>Display Utilities Classes Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Display_Utilities_Classes_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">
<div class="p-3 d-lg-inline-block pink">
<h2>Col A</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="p-3 d-lg-inline-block green">
<h2>Col B</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore accusamus tempora ut, saepe dicta
aperiam?
</div>
<div class="col-md-3 d-none d-sm-block green">
<h2>Col B</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor, eum minus! Natus odit dolorum modi,
explicabo mollitia eius quia veniam.
</div>
<div class="col-md-3 d-block d-sm-none blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, minima.
</div>
<div class="col-md-3 orange">
<h2>Col D</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, nisi?
</div>
</div>
</div><br><br><br>
<div class="container">
<div class="d-flex flex-column-reverse" style="border: 3px solid blue">
<div class="pink p-3">Col A</div>
<div class="green p-3">Col B</div>
<div class="blue p-3">Col C</div>
</div>
</div><br><br><br>
<div class="container">
<div class="d-flex" style="border: 3px solid blue">
<div class="order-3 pink p-3">Col A</div>
<div class="order-1 green p-3">Col B</div>
<div class="order-2 blue p-3">Col C</div>
</div>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste porro vitae accusamus voluptatibus quae
nobis!
</div>
<div class="col-md-3 d-none d-print-block green">
<h2>Col B</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat harum dolor mollitia tempore doloribus
quisquam corporis sapiente dicta consectetur consequuntur.
</div>
<div class="col-md-3 d-print-none blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, quaerat.
</div>
<div class="col-md-3 orange">
<h2>Col D</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, eveniet?
</div>
</div><br><br><br>
</div>
</body>
</html>
Below File is Display_Utilities_Classes_Bootstrap.css File
.container {
border: 5px solid #000000;
}
.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)
Comments
Post a Comment