Card Classes in Bootstrap CSS 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/Card_Classes_Bootstrap_CSS_tutorial.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">
<h2 class="py-3 text-center">Bootstrap Card Classes</h2>
<div class="row py-5">
<div class="col-md-4">
<div class="card">
<img src="images/bill-gates.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4 class="card-title">Bill Gates</h4>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias
repellat ipsum sed sint
blanditiis voluptatibus omnis quaerat animi adipisci a.</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bill Gates</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione minus odit qui aliquam
nesciunt soluta impedit culpa atque quaerat explicabo?</p>
<button class="btn btn-primary">Read more</button>
</div>
<img src="images/bill-gates.jpg" class="card-img-bottom" alt="">
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="images/bill-gates.jpg" class="card-img" alt="">
<div class="card-img-overlay">
<h4 class="card-title">Bill Gates</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, quas fugit. Sed reiciendis eum
repellat quis sapiente pariatur libero molestiae!</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-primary text-primary">
<img src="images/bill-gates.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4 class="card-title">Bill Gates</h4>
<h5 class="card-subtitle text-muted">Subtitle</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae totam
veritatis ratione
voluptatum facilis quisquam quas magnam consequuntur voluptatibus vel.</p>
<a href="" class="card-link">Read more</a>
<a href="" class="card-link">Another Link</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img src="images/bill-gates.jpg" class="card-img-top" alt="">
<ul class="list-group list-group-flush">
<li class="list-group-item">Lorem, ipsum dolor.</li>
<li class="list-group-item">Lorem, ipsum dolor.</li>
<li class="list-group-item">Lorem, ipsum dolor.</li>
<li class="list-group-item">Lorem, ipsum dolor.</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3 text-center bg-primary text-white">
<div class="card-header">Heading Goes Here</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, delectus
animi nostrum dolore quam eveniet inventore molestiae quis quia asperiores.</p>
</div>
<div class="card-footer">Footer Goes Here</div>
</div>
<div class="card mb-3">
<div class="card-header">Heading Goes Here</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore dolorum
totam at autem laborum non fuga. Possimus maiores eaque tempore.</p>
</div>
<div class="card-footer">Footer Goes Here</div>
</div>
<div class="card mb-3">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a href="" class="nav-link">Link One</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Link Two</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Link Three</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Link Four</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque unde modi
obcaecati optio culpa, perspiciatis minus recusandae dicta quasi suscipit?</p>
</div>
<div class="card-footer">Footer Goes Here</div>
</div>
</div>
<div class="col-md-7">
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img src="images/bill-gates.jpg" class="card-img" alt="">
</div>
<div class="col-md-8">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi
voluptate aspernatur asperiores accusantium obcaecati consequatur in alias ullam
impedit repellendus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Below File is css/Card_Classes_Bootstrap_CSS_tutorial.css File
.container {
border: 5px solid #000000;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment