Margin and Padding tutorial 2 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>Margin Padding Tutorial Two Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Margin_Padding_Tutorial_Two_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 no-gutters">
<div class="col-md-4">
<div class="pink">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores hic atque repellat officiis minima
error dolorem laborum, tempore modi ut sit placeat adipisci quasi. Enim.
</div>
</div>
<div class="col-md-4">
<div class="green">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo eum aspernatur facere vitae unde?
Possimus nulla illum nobis, impedit soluta id sint? Recusandae, repellat doloribus.
</div>
</div>
<div class="col-md-4">
<div class="blue">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia veniam nostrum corrupti corporis nemo
est, voluptates rem obcaecati. Molestiae soluta dolores hic, ducimus placeat consequatur.
</div>
</div>
</div>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="pink py-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, excepturi nulla doloremque dolores
inventore blanditiis quod exercitationem vitae veniam voluptas hic error animi quisquam enim.
</div>
</div>
<div class="col-md-4">
<div class="green px-5">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum minus quaerat ducimus blanditiis.
Repellat temporibus optio quos quam? Distinctio laboriosam possimus at? Tempore, mollitia aliquid!
</div>
</div>
<div class="col-md-4">
<div class="blue my-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor aliquid similique at porro? Ab autem
accusamus consectetur natus voluptate fuga beatae quis fugiat sed. Maxime?
</div>
</div>
<div class="col-md-4">
<div class="orange mx-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ad repellendus odit magnam eius,
tempore facere soluta omnis reiciendis quas accusamus odio culpa laboriosam in!
</div>
</div>
</div>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="pink py-lg-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore suscipit at temporibus totam.
Dolores incidunt nostrum reiciendis eos atque ipsam ab similique voluptatem culpa ipsum.
</div>
</div>
<div class="col-md-4">
<div class="green px-lg-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut amet dolore, at reprehenderit officia
enim nulla eligendi animi, minus vel velit dicta esse vero perspiciatis.
</div>
</div>
<div class="col-md-4">
<div class="blue mx-lg-3">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto deleniti quos laudantium voluptates
illo odio minus aliquam eum nam officia esse nostrum, in fuga aut?
</div>
</div>
<div class="col-md-4">
<div class="orange my-lg-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, eveniet. Cum, provident expedita
obcaecati, nostrum possimus voluptatibus dolor ipsa natus dolores non aut deleniti consectetur?
</div>
</div>
</div>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="pink my-lg-n5">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, totam? Ab odit laudantium eaque
laborum, dolor consequuntur consequatur vero illo id atque. Nam, quasi rem.
</div>
</div>
<div class="col-md-4">
<div class="green">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia totam id necessitatibus veniam
voluptatem laudantium, expedita culpa consequuntur, atque possimus voluptatibus autem hic porro
labore?
</div>
</div>
<div class="col-md-4">
<div class="blue mx-lg-n5">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum laboriosam animi aliquam quo
perspiciatis dolor, repellendus qui dolore iure suscipit voluptates sed nulla esse beatae?
</div>
</div>
<div class="col-md-4">
<div class="orange my-lg-n5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, non veniam! Modi culpa nihil a
debitis quasi, quaerat odio distinctio temporibus accusantium, accusamus dolorum quibusdam.
</div>
</div>
</div>
</div><br><br><br>
</body>
</html>
Below File is css/Margin_Padding_Tutorial_Two_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)
Comments
Post a Comment