Right here is how one can make a easy bootstrap card.
For extra Bootstrap Card Examples go to right here – Bootstrap Card Examples
First create the essential html format in a brand new index.html file and hyperlink the bootstrap stylesheet.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Cat Bootstrap Card</title>
<hyperlink rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
</head>
<physique>
</physique>
</html>
Create the Container for the Card
Now create the html container that may include all the weather of the cardboard. The container may have a prime picture, Heading, Description and a Learn Extra button.
<div class="container">
<div class="row mt-5 justify-content-center">
<div class="col">
<div class="card custom-card border-0" model="width: 20rem;">
<img
src="https://photographs.pexels.com/images/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
class="card-img-top"
alt="cat-image"
/>
<div class="card-body">
<h5 class="card-title font-weight-bold">
Considering of getting cat ?
</h5>
<p class="card-text">
Some fast instance textual content to construct on the cardboard title and make up
the majority of the cardboard's content material.
</p>
<a href="#" class="btn my-btn">Learn extra</a>
</div>
</div>
</div>
</div>
</div>
After creating the container its time to model it.
Styling the General Card
.custom-card {
margin: 0px auto;
box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
cursor: pointer;
}
Styling the Title & Description
.custom-card .card-title {
font-size: 1.4rem;
}
.custom-card .card-text {
shade: #696969;
}
Styling the Button and Including a Easy Hover impact to it
.custom-card .my-btn {
background: #ba7b43;
shade: white;
}
.custom-card .my-btn:hover {
shade: white;
background: #885427;
}
That is it for styling, Now mix all of the css and html.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<hyperlink rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<model>
.custom-card {
margin: 0px auto;
box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
cursor: pointer;
}
.custom-card .card-title {
font-size: 1.4rem;
}
.custom-card .card-text {
shade: #696969;
}
.custom-card .my-btn {
background: #ba7b43;
shade: white;
}
.custom-card .my-btn:hover {
shade: white;
background: #885427;
}
</model>
</head>
<physique>
<div class="container">
<div class="row mt-5 justify-content-center">
<div class="col">
<div class="card custom-card border-0" model="width: 20rem;">
<img
src="https://photographs.pexels.com/images/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
class="card-img-top"
alt="cat-image"
/>
<div class="card-body">
<h5 class="card-title font-weight-bold">
Some textual content right here?
</h5>
<p class="card-text">
You'll be able to enter a easy description right here.
</p>
<a href="#" class="btn my-btn">Learn extra</a>
</div>
</div>
</div>
</div>
</div>
</physique>
</html>
Right here is the Output.
