Horizontal 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>Horizontal Alignment Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Horizontal_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 justify-content-end">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, alias.
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, voluptas ut! Iure veritatis eum quidem
error culpa et dolorem nostrum.
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos, cum.
</div>
</div><br><br>
<div class="row justify-content-center">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, exercitationem.
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui doloribus tempore iure provident porro
harum corrupti. Deserunt molestias perspiciatis architecto!
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo, iste?
</div>
</div><br><br><br>
<div class="row justify-content-between">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, amet?
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque accusantium perspiciatis molestiae alias
ea consequatur eligendi voluptatum ullam ab consectetur!
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, officia.
</div>
</div><br><br><br>
<div class="row justify-content-around">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum, tenetur?
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt beatae sed placeat officia odit
necessitatibus voluptate non! Expedita, quas maxime.
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, praesentium.
</div>
</div><br><br><br>
<div class="row justify-content-lg-center">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, mollitia.
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae, mollitia possimus? Earum, labore dolorum
magni repellendus blanditiis quas aperiam nam?
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, praesentium!
</div>
</div><br><br><br>
<div class="row justify-content-lg-between">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, odio!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, ex fuga iste aspernatur blanditiis
eos laboriosam nulla nisi culpa magnam?
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, facilis.
</div>
</div><br><br><br>
</div>
</body>
</html>
Below File is css/Horizontal_Alignment_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)
.png)
.png)
.png)
Comments
Post a Comment