Grid System
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid System</title>
</head>
<body>
<!-- AUTOMATIC -->
<div class="container">
<div class="row">
<div class="col bg-success">one</div>
<div class="col bg-danger">two</div>
<br />
<!-- GIVNG NUBER OF COLUMN -->
<div class="col-4 bg-warning">three</div>
<div class="col-6 bg-dark">four</div>
<!-- GRID OPTIONS-TO MAKE IT RESPONSIVE -->
<div class="col-md-4 bg-light">five</div>
<div class="col-md-5 bg-primary">six</div>
<!-- TWO OPTIONS -->
<div class="col-md-6 col-xl-3 bg-secondary">thala</div>
</div>
</div>
<!-- ALIGN ITEMS -->
<div class="row" align-items-bottom>
<div class="col-5 bg-success">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quasi
tempore, commodi non, et cumque quisquam, nesciunt labore doloribus est
vel ut iste facilis pariatur dicta corporis molestiae! Et, ducimus!
</div>
<div class="col-6 bg-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
nostrum quisquam blanditiis? Sequi deleniti eum asperiores, quod
distinctio perspiciatis at odit voluptas? Atque, illum nostrum ex
dolores impedit commodi explicabo?
</div>
<div class="col-4 bg-warning" align-self-center>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
nostrum quisquam blanditiis? Sequi deleniti eum asperiores, quod
distinctio perspiciatis at odit voluptas? Atque, illum nostrum ex
dolores impedit commodi explicabo?
</div>
</div>
</body>
</html>
Comments
Post a Comment