In this Post we will see how to create a card in bootstrap for your blog.
Recently, I was making a blog for which I needed a card in Bootstrap for a post.But i am unable to find a good card so i decided to create a card in bootstrap. this card is very simple, great looking which you can use in your blog to show post.
Also Read : Jarvis Desktop Assistant With GUI Using Python
In this card image is showing in right side of the card and title and description of the post is showing in the left side of the card and in the footer it has a view button, like button and date in which post was published.
Bootstrap is need to create to this card.
Also Read : How to Create Flappy Bird Game In Python | Free Tutorial With Souce Code
Code For This Project -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<style type="text/css">
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
.size {
max-width: 533px;
max-height: 300px;
min-height: 300px;
min-width: 533px;
}
.like {
margin-top: -5px;
margin-bottom: -20px;
transition: transform .2s;
/* Animation */
}
.like:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12 ml-auto mt-3">
<div class="card">
<div class="card-horizontal">
<div class="card-body">
<!-- Title Of Your Post -->
<h4 class="card-title">Title For Your Post </h4>
<!-- Description of your post -->
<p class="card-text"> Post Description
</p>
</div>
<!-- Image For Your Post -->
<div class="img-square-wrapper">
<div class="text-right">
<img class="col-sm-14 size" src="SnakeGame.png" alt="Card image cap">
</div>
</div>
<!-- FOOTER FOR YOUR POST -->
</div>
<!-- Date -->
<div class="card-footer">
<small class="text-muted">4 july 2021</small>
<!-- Like Button -->
<button class="btn bg-transparent like" style="margin-left: -10px; margin-right: -10px; float: right;">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="red" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z" />
</svg>
</button>
<!-- View Button -->
<button type="button" class="btn bg-transparent like" style="float: right;">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor"
class="bi bi-heart-fill" viewBox="0 0 16 16">
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
<path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
</svg></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment