Col Class in Bootstrap CSS tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Col Class</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style_Col_Class.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 Column Grid must be maximum 12 in one Row-->
<div class="container">
<div class="row">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="w-100"></div> <!--Here, "w-100" will work as "break"-->
<div class="col">Col 3</div>
<div class="w-100"></div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="w-100"></div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
</div>
<div class="row">
<div class="col">This 1</div>
<div class="col">This 2</div>
<div class="col">This 3</div>
<div class="col">This 4</div>
<div class="col">This 5</div>
</div>
<div class="row">Row 2</div>
<div class="row">Row 3</div>
</div><br><br>
<div class="container">
<div class="row row-cols-2"> <!--Here below every div will divide in two equal parts like pair of two-->
<div class="col">Number 1</div>
<div class="col">Number 2</div>
<div class="col">Number 3</div>
<div class="col">Number 4</div>
<div class="col">Number 5</div>
<div class="col">Number 6</div>
<div class="col">Number 7</div>
<div class="col">Number 8</div>
<div class="col">Number 9</div>
</div>
</div><br><br>
<div class="container">
<div class="row row-cols-3"> <!--Here below every div will divide in three equal parts like pair of three-->
<div class="col">This is 1</div>
<div class="col">This is 2</div>
<div class="col">This is 3</div>
<div class="col">This is 4</div>
<div class="col">This is 5</div>
<div class="col">This is 6</div>
<div class="col">This is 7</div>
<div class="col">This is 8</div>
</div>
</div><br><br>
<div class="container">
<div class="row row-cols-4"><!--Here below every div will divide in four equal parts like pair of four-->
<div class="col">Col 1 Lorem ipsum dolor sit amet.</div>
<div class="col">Col 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, amet.</div>
<div class="col">Col 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda modi illo magni,
consectetur adipisci dolores?</div>
<div class="col">Col 4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Non maxime atque temporibus
enim sunt. Asperiores deserunt maxime aperiam similique architecto.</div>
<div class="col">Col 5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto temporibus quia
quibusdam quisquam molestiae adipisci modi, dolore porro nihil quidem earum, recusandae exercitationem
similique tempore.</div>
<div class="col">Col 6 Lorem ipsum, dolor sit amet consectetur adipisicing elit. A aliquid repellendus
natus, qui labore velit, quibusdam quidem soluta molestiae perspiciatis tempora corporis consectetur
vitae dolor nihil obcaecati provident modi ducimus!</div>
<div class="col">Col 7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ipsum tenetur
quod ea officia numquam accusantium! Fuga, molestiae tempora dolor error veritatis tempore explicabo
omnis.</div>
<div class="col">Col 8 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, dolorum ex. Quam vero
placeat ea quidem illum commodi in accusantium.</div>
<div class="col">Col 9 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur distinctio
ipsam blanditiis explicabo beatae veritatis?</div>
<div class="col">Col 10 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, iure?</div>
</div>
</div><br><br><br>
<!--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-md">Col 1</div>
<div class="col-md">Col 2</div>
<div class="col-md">Col 3</div>
</div>
<div class="row">Row 2</div>
</div><br><br><br>
<div class="container">
<div class="row">
<div class="col-lg">Col 1 Lorem ipsum dolor sit amet.</div>
<div class="col-lg">Col 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, deleniti.
</div>
<div class="col-lg">Col 3 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit recusandae eaque
dolores tenetur magni est!</div>
</div>
<div class="row">Row 2</div>
</div>
</body>
</html>
Below File is css/style.css File.
.container {
border: 5px solid #000000;
}
.container-fluid {
border: 8px solid #000000;
}
.row {
border: 3px solid #ff0000;
}
.col {
border: 5px solid #008000;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment