Flex Direction Classes 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>Flex Direction Classes Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Flex_Direction_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="row flex-row-reverse">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae earum quam sint ad similique tenetur!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero eaque fugit iusto molestias vitae
pariatur et nemo exercitationem id? Asperiores!
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, ut?
</div>
<div class="col-md-3 orange">
<h2>Col D</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, error!
</div>
</div><br><br><br>
<div class="row flex-column">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis incidunt dolor, praesentium quae
aliquid enim?
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium voluptatem quos sint nulla debitis
accusantium fugit cupiditate nam eligendi laborum?
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, dignissimos.
</div>
<div class="col-md-3 orange">
<h2>Col D</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, omnis?
</div>
</div><br><br><br>
<div class="row flex-nowrap">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora aliquam laboriosam quod! Laboriosam,
unde saepe!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis architecto beatae blanditiis vero, vel
voluptatum nam sed quasi id excepturi.
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo, consequatur?
</div>
<div class="col-md-3 orange">
<h2>Col D</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, delectus.
</div>
<div class="col-md-3 cyan">
<h2>Col E</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, assumenda!
</div>
</div><br><br><br>
<div class="row flex-wrap-reverse">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, hic molestiae reiciendis nihil iusto
a?
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem saepe assumenda earum? Praesentium impedit
ullam ipsam optio omnis, neque fugiat.
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, exercitationem?
</div>
<div class="col-md-3 orange">
<h2>Col D</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt, itaque?
</div>
<div class="col-md-3 cyan">
<h2>Col E</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, consequatur.
</div>
</div><br><br><br>
<div class="row flex-row-reverse">
<div class="col pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam sequi laborum suscipit consequatur
corrupti amet!
</div>
<div class="col green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores tempore nemo omnis suscipit voluptates
laboriosam consequuntur qui earum consequatur ducimus.
</div>
<div class="col blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, ex.
</div>
<div class="col orange">
<h2>Col D</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, iusto.
</div>
<div class="col cyan">
<h2>Col E</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, enim!
</div>
</div><br><br><br>
<!--flex-fill class will work only when there is only simple "col" class is present-->
<!--flex-fill class will not work with "col-md-3" means if there is specify any width Breakpoint of bootstrap
then flex-fill class will not work-->
<div class="row">
<div class="col pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, dolore esse odit accusantium
obcaecati aliquam.
</div>
<div class="col flex-fill green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus mollitia voluptate consequatur itaque
laboriosam dolore alias. Accusantium blanditiis libero nihil!
</div>
<div class="col blue">
<h2>Col C</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, repellat?
</div>
<div class="col orange">
<h2>Col D</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, sunt?
</div>
<div class="col flex-fill cyan">
<h2>Col E</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero, magni!
</div>
</div><br><br><br>
<div class="row flex-lg-wrap-reverse">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, debitis ullam quidem accusamus aut
similique!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus alias pariatur voluptatum dolores
eum sed modi consequuntur dicta nisi numquam.
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, praesentium.
</div>
<div class="col-md-3 orange">
<h2>Col D</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, veritatis?
</div>
<div class="col-md-3 cyan">
<h2>Col E</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, delectus?
</div>
</div><br><br><br>
<div class="row flex-lg-column">
<div class="col-md-3 pink">
<h2>Col A</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi, tempora beatae soluta eos nemo
labore!
</div>
<div class="col-md-3 green">
<h2>Col B</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque, asperiores! Ducimus autem itaque
qui placeat cumque. Maxime sit magnam quibusdam!
</div>
<div class="col-md-3 blue">
<h2>Col C</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, dolorum!
</div>
<div class="col-md-3 orange">
<h2>Col D</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime, nostrum!
</div>
<div class="col-md-3 cyan">
<h2>Col E</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, libero.
</div>
</div><br><br><br>
</div>
</body>
</html>
Below File is Flex_Direction_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;
}
.cyan {
background: #00ced1;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment