Vertical Alignment 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>Vertical Alignment Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Vertical_Alignment_Bootstrap_CSS.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 align-items-start">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, enim!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque ut nihil ad laudantium veritatis fuga
veniam at soluta minus quidem.
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, culpa.
</div>
</div><br><br><br>
<div class="row align-items-end">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, tempore!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quibusdam sed necessitatibus velit
harum nostrum odio? Corporis iure aspernatur beatae!
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, placeat!
</div>
</div><br><br><br>
<div class="row align-items-center">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod, sint!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio architecto eum, quod officiis sint magnam
fugiat possimus voluptate iusto impedit.
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi, quae.
</div>
</div><br><br><br>
<div class="row align-items-baseline">
<div class="col-md-3 pink">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, ratione.
</div>
<div class="col-md-3 green">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit quibusdam autem similique excepturi sed
voluptatibus neque rem incidunt assumenda culpa.
</div>
<div class="col-md-3 blue">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, amet.
</div>
</div><br><br><br>
<!--Align Items with Breakpoint of Bootstrap-->
<div class="row align-items-lg-start">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, velit!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus eveniet voluptatem modi ea quis
labore porro architecto quia doloribus maxime!
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto, ullam!
</div>
</div><br><br><br>
<div class="row align-items-lg-center">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, facere.
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti expedita fugiat repellat recusandae
eveniet molestiae qui accusantium sed esse pariatur?
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam, hic.
</div>
</div><br><br><br>
<div class="row align-items-lg-end">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, perspiciatis.
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit facilis magnam ea rerum iste cupiditate
vero veritatis repellat deserunt eveniet!
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error, et?
</div>
</div><br><br><br>
<div class="row align-items-lg-baseline">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, voluptatem.
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem in provident ducimus officia ipsam omnis
porro sapiente magnam fugiat earum?
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, corporis.
</div>
</div>
</div>
</body>
</html>
Vertical_Alignment_Bootstrap_CSS.css File
.container {
border: 5px solid #000000;
}
.row {
border: 3px solid #ff0000;
}
.pink {
background: #ffc0cb;
font-size: 22px;
}
.orange {
background: #f39c12;
}
.blue {
background: #4aacee;
font-size: 18px;
}
.green {
background: #9acd32;
font-size: 12px;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment