Bootstrap 5 Introduction and New 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">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Bootstrap_5_Introduction_New_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-->
<!--What is new in Bootstrap 5 ?-->
<!--No more jQuery required.-->
<!--Still have all the JS Plugins-->
<!--Save on file size-->
<!--Support for IE(Internet Explorer) has also been dropped-->
<!--Some new CSS Classes for layout, text and forms-->
<div class="container-lg">
<div class="row g-lg-3">
<div class="col-md-6">
<div class="bg-info text-white lh-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis similique temporibus et sed
recusandae veritatis voluptates, velit delectus, harum dolore maiores, dolorum culpa molestiae.
Ullam delectus doloremque corporis voluptatem iure.
</div>
</div>
<div class="col-md-6">
<div class="bg-danger text-white lh-lg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptatem obcaecati explicabo,
repellendus totam beatae quo itaque molestiae accusantium ab perferendis vitae quisquam, doloremque
nostrum qui molestias neque veritatis dolorem.
</div>
</div>
<div class="col-md-6">
<div class="bg-info text-white lh-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, dolorem excepturi qui doloribus
velit ea. Accusantium totam illo praesentium corporis! Aliquid sit ipsum ab quaerat incidunt soluta
iusto nobis dolore!
</div>
</div>
<div class="col-md-6">
<div class="bg-danger text-white lh-base">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum fugit nisi sit eligendi doloribus
dolorem facere veniam perspiciatis, aliquid possimus minus, dolore fugiat, accusamus architecto enim
molestias quaerat tempora delectus?
</div>
</div>
</div>
</div><br><br>
<div class="container">
<div class="row gy-5 gx-5">
<div class="col-md-6">
<div class="bg-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate iusto, saepe debitis ipsam
quibusdam quo ipsum, laboriosam laudantium animi unde fugit incidunt similique! Eum eaque porro
similique perspiciatis facilis quas!
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, expedita? Voluptas rem nisi,
incidunt quae quam eveniet, iste nesciunt voluptatum tempore tempora architecto! Architecto rerum
eveniet aperiam? Optio, accusantium voluptatum.
</div>
</div>
<div class="col-md-6">
<div class="bg-info">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A, ipsam nihil voluptatem libero,
doloribus perferendis dignissimos fugit quasi incidunt minus tempore enim, in distinctio eum qui!
Quisquam, voluptatibus quam. Similique!
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis placeat sint quas laudantium
perspiciatis ipsum beatae sunt dolorem illum cupiditate expedita sed, inventore delectus, culpa,
facere dolore laborum alias! Quo.
</div>
</div>
</div>
</div><br><br>
<div class="container">
<h2>Bootstrap Table</h2>
<div class="row py-5">
<div class="col-md-6 mx-auto">
<table class="table table-bordered border-primary">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis possimus est nihil
maiores. Optio aliquid earum tenetur ullam iure porro laudantium provident! Minima
pariatur, corporis non id earum ea ad.</td>
</tr>
<tr class="align-middle">
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam pariatur non, molestiae
maxime porro voluptatem ab qui, voluptas perspiciatis dicta explicabo adipisci.
Reiciendis dicta est qui blanditiis! Nam, temporibus quos?</td>
</tr>
<tr class="align-bottom">
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quae debitis delectus
veritatis amet, architecto odit veniam aliquam placeat vitae sapiente libero officiis
deleniti est obcaecati ullam exercitationem corporis atque.</td>
</tr>
<tr class="align-baseline">
<td>4</td>
<td>
<h2>Salman</h2>
</td>
<td>Khan</td>
<td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam optio laudantium unde
fugit provident, incidunt iusto quos aspernatur earum rem eligendi. Sapiente dolorem sit
repudiandae voluptatum esse, ad at dolores!</td>
</tr>
<tr class="align-top">
<td>5</td>
<td>Ajay</td>
<td>Devgan</td>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti odio fugit saepe
placeat quibusdam nostrum modi officia voluptate eos, iure incidunt esse aliquam aperiam
vel nulla impedit magni porro optio.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Below File is css/Bootstrap_5_Introduction_New_Classes.css File.
.container,
.container-lg {
border: 5px solid #000000;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment