Bootstrap CSS Order Classes 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 Order Class</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style_Order_Classes.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 order-md-last orange">Col 1</div>
<div class="col pink">Col 2</div>
<div class="col order-md-first blue">Col 3</div>
<div class="col green">Col 4</div>
</div><br><br><br>
<div class="row">
<div class="col order-2 orange">Col 1</div>
<div class="col order-3 pink">Col 2</div>
<div class="col order-4 blue">Col 3</div>
<div class="col order-1 green">Col 4</div>
</div><br><br><br>
<div class="row">
<div class="col order-md-2 orange">Col 1</div>
<div class="col order-md-3 pink">Col 2</div>
<div class="col order-md-4 blue">Col 3</div>
<div class="col order-md-1 green">Col 4</div>
</div><br><br><br>
<div class="row">
<div class="col-md-6 order-md-1 order-sm-3 orange">Col 1</div>
<div class="col-md-2 order-md-3 order-sm-2 pink">Col 2</div>
<div class="col-md-4 order-md-2 order-sm-1 blue">Col 3</div>
</div><br><br><br>
<div class="row">
<div class="col-md-8 order-md-2 orange">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ex fugit, voluptate temporibus, eveniet
consequatur iste minima deserunt repellat quisquam laborum! Debitis ratione repudiandae beatae ea
autem molestias consequatur, animi odio quo? Ad voluptatibus ipsa nihil consectetur, repellendus
facilis alias voluptatem culpa deserunt nobis soluta nam aliquam eveniet accusantium minus officia,
cumque quibusdam praesentium. Eum suscipit modi blanditiis, quidem saepe vero rerum quae sapiente?
Unde, totam laborum quae et cumque dolorum delectus consectetur illo eum debitis quos? Rem,
voluptatem voluptate inventore deserunt atque quam eum id tempora optio expedita assumenda eius sunt
consequatur accusantium provident natus architecto porro ad hic.</p>
</div>
<div class="col-md-4 order-md-1 pink">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Products</li>
<li>About Us</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Below File is css/style_Order_Classes.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