I am trying to do nested cards in my project, so basically I have three cards. The parent one Research Dashboard, the second one which holds the category ex. Recently Added Research and lastly, the third one or the third card which contains the image/card title and button. However, I am getting trouble when viewing it on a mobile browser. As you can see in the image the third card stretches up until the first card which is I do not like, the third card should only go to the second card which is Recently Added Research.
I've tried readjusting the width of the cards, but it gets destroy whenever I view it on the desktop browser which is I do not like.
<style>
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: #003366;
}
</style>
</head>
<body>
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Research Dashboard
</div>
<div class="card-body">
<div class="container-fluid" style="padding-top: 50px;">
<div class="row">
<div class="col">
<div class="card h-100">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Recently Added Research
</div>
<div class="card-body">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Card title</h5>
<button class="btn btn-info justify-content-start">View </button>
<button class="btn btn-info align-items-end">View </button>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is my ideal result. However, this image was a screenshot in desktop view.
try this
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: #003366;
}
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Research Dashboard
</div>
<div class="card-body">
<div class="container-fluid" style="padding-top: 50px;">
<div class="row">
<div class="col">
<div class="card h-100">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Recently Added Research
</div>
<div class="card-body">
<div class="row">
<div class="col">
<div class="card" style="max-width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Card title</h5>
<button class="btn btn-info justify-content-start">View </button>
<button class="btn btn-info align-items-end">View </button>
</div>
</div>
</div>
<div class="col">
<div class="card" style="max-width: 18rem;">
<img class="card-img-top" src="admin/files/Images/pagenotfound.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
What I want to achieve is that my DIV element is not cut off by the Print option. I have used the code BREAK-INSIDE: AVOID code and it doesn't work, in the end my DIV ends up sliced in half.
HTML
<block-ui></block-ui>
<div class="content-wrapper container-xxl p-0">
<div class="content-body">
<div class="card">
<div class="row">
<div class="col-xl-9 col-md-8 col-12">
<div class="row m-1">
<div class="m-1 dont-break" *ngFor="let QRID of printData.results">
<div class="d-flex align-items-center flex-column"
style="width: 4.5cm; height: 8cm; max-width: 4.5cm; border: 1px dashed #000000; padding: .25cm;">
<h6 class="mb-0" style="font-size: 10px;">Name:</h6>
<h6 class="mb-30">{{ QRID.proyecto }}</h6>
<img [src]="QRID.foto" style="height: 3.5cm; width: 3.5cm; margin-bottom: 7px;">
<ngx-qrcode-styling [config]="config" [type]="'canvas'" [shape]="'square'" [width]="110" [height]="110"
[margin]="0" [data]="QRID.qr">
</ngx-qrcode-styling>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-4 col-12 invoice-actions mt-md-0 mt-2">
<div class="card">
<div class="card-body">
<a class="btn btn-outline-secondary btn-block mb-75" href="javascript:window.print();" rippleEffect>
Print
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#media print {
div.dont-break {
break-inside: avoid !important;
page-break-inside: avoid !important;
-webkit-break-inside: avoid !important;
}
}
I just created 4 card using bootstraps 4.5 version but the spacing is really bad and I do not know how to reduce the spacing of card you can the image if you still confuse
.card {
width : 55%;
min-height: 100;
margin: 2%;
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body{
box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card text-md-center">
<img src="Nike.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Shoes</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="chevrolet.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Car</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="asuslap.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Laptop</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="asusphone.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Phone</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
</div>
I have searched it in google but I still not find it (How to reduce spacing of Card), maybe you can help me
If you don't problem about the width card, you can remove width : 55%; in your CSS. It would be better.
OR
You can change the value in every col-md class. The spacing the of every card is caused by that.
I added a flex-display to your .row class and justified everything in the center. Spacing looks fine to me.
.card {
width: 55%;
min-height: 100;
margin: 2%;
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body{
box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}
.row {
display: flex;
justify-content: center;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card text-md-center">
<img src="Nike.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Shoes</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="chevrolet.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Car</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-md-center">
<img src="asuslap.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Laptop</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
The Bootstrap way to do so is to dynamically adjust the column width depending on the width of the browser/screen. Do not set the width manually. Let the media query breakpoints do the job.
HTML
<div class="container">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<div class="card text-md-center">
<img src="http://placehold.jp/320x180.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Shoes</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card text-md-center">
<img src="http://placehold.jp/320x180.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Car</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card text-md-center">
<img src="http://placehold.jp/320x180.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Laptop</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card text-md-center">
<img src="http://placehold.jp/320x180.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Phone</h5>
<p class="card-text">Some quick example text</p>
Buy
</div>
</div>
</div>
</div>
CSS
.card {
/* width: 55%; */
min-height: 100;
margin: 2%;
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body {
box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.1);
}
JSFiddle demo
My problem is that the property of card-deck (The .card-deck class creates a grid of cards that are of equal height and width. The layout will automatically adjust as you insert more cards.) does not seem to be applying.
This is the code:
<div class="container-fluid">
<div class="card-group">
<div class="card" id="col1m">
<div class="card-header text-center" style="color: #888" id="display1_title">CAUDAL abcdefghi (BPM)</div>
<div class="card-body text-center" id="col1">
<p class="card-text" style="font-family:roboto; font-weight: bold; color:#888" id="display1_value">0</p>
</div>
</div>
<div class="card" id="col2m">
<div class="card-header text-center" style="color: #888;" id="display2_title">VOL. TOTAL (BBL)</div>
<div class="card-body text-center" id="col2">
<p class="card-text" style=" font-family:roboto; font-weight: bold; color: #888" id="display2_value"> 0 </p>
</div>
</div>
</div>
</div>
You have a closing div at the end of your code with an opening div
here is your code working fine
https://codepen.io/growload/pen/QWwMybX?editors=1000
<div class="card-group">
<div class="card" id="col1m" >
<div class="card-header text-center" style=" color: #888" id="display1_title">CAUDAL (BPM)</div>
<div class="card-body text-center" id="col1" >
<p class="card-text" style=" font-family:roboto; font-weight: bold; color: #888" id="display1_value"> 0 </p>
</div>
</div>
<div class="card" id="col2m" >
<div class="card-header text-center" style=" color: #888 ; " id="display2_title" >VOL. TOTAL (BBL)</div>
<div class="card-body text-center" id="col2" >
<p class="card-text" style=" font-family:roboto; font-weight: bold; color: #888" id="display2_value"> 0 </p>
</div>
</div>
</div>
I've just got back in to learning bootstrap, html and css. So far I have three cards in a row of different widths using the bootstrap grid the horizontal card template. My problem is that I want my layout to be the same in each card, The title and paragraph should be the same distance away in each and the fav / info button the same distance from the title. Also, I managed to get the first two columns close but somehow there is weird extra large spacing between the image and title of the last and largest column. How can I do this?
I've tried to manually adjust the positions of the elements in each card but it's hard to get them consistent, it also made my code a mess with extra ids for very similar things. As for the odd spacing I've tried to find the issue using developer tools on chrome to change the width, padding etc but not sure what is causing this. The columns I have are col-md-3, col-md-4 and col-md-5.
these are my cards
<div class="row">
<div class="col-md-3">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>"
<div class="col-md-4">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1068/97169l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">The Rising of the Shield Hero</h5>
<p class="card-text">Airs Wednesday :: 26 eps</p>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1130/99458l.jpg" class="card-img-top" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Hitori Bocchi no Maru Maru Seikatsu</h5>
<p class="card-text">Airs Saturday :: 12 eps</p>
<div class="status"></div>
</div>
</div>
</div>
I also added it to my codepen to better see also https://codepen.io/Shiro01/pen/YbRQmQ
I'm trying to get them similar to the cards on this site https://anichart.net/airing
I want to have the column fit the content and don't want the title breaking on to another line. I want the distance of the elements to be as equally spaced as possible so the whole design looks consistent. Thank you.
remove that class=" no-gutters" , and add class="container-fluid" before row
not try to edit boostrap class it destroy its responsive structure
And your stutus bar can adjust with position absolute or change your style
status {
background-color: #662481;
height: 76px;
width: 10px;
position: relative;
left: 187px;
top: -103px;
margin: 0;
padding: 0;code here
<div class="row outer_row">
<div class="col-md-4">
<div class="row inside_row">
<div class="col-sm-4">
<div class="img-container">
<img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" alt="..."></div>
</div>
<div class="col-sm-6">
<div class="card-data">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>
</div>
</div>
<div class="col-sm-2">
<div class="status"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row inside_row">
<div class="col-sm-4">
<div class="img-container">
<img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-sm-6">
<div class="card-data">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>
</div>
</div>
<div class="col-sm-2">
<div class="status"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row inside_row">
<div class="col-sm-4">
<div class="img-container">
<img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-sm-6">
<div class="card-data">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>
</div>
</div>
<div class="col-sm-2">
<div class="status"></div>
</div>
</div>
</div>
here is css for HTML code :
body {
padding: 70px;
}
.card-img-top {
width: 100%;
margin-left: -15px;
height: 80px;
}
.status {
background-color: #662481;
height: 80px;
width: 10px;
}
.card-data{
margin-left:-30px;
margin-top:6px;
}
.inside_row{
width: 100%;
border:1px solid lightgray;
height:80px;
}
.outer_row{
width: 100%;
}
here is my solution for your question in a codepen https://codepen.io/nick4434/pen/joQGVM?editors=1100
please try this code:
body {
padding: 70px;
font-family: arial, helvetica;
background-color: #ebebeb;
}
.navbar {
background-color: #fff;
}
.navbar-brand {
color: #2980b9; /* Clips image */
font-size: 20px;
font-weight: bold;
}
.nav-link {
color: #2980b9;
}
.mb-3 {
max-height: 100px;
}
.md-3 {
max-width: auto;
}
.card-title {
font-size: 16px;
font-weight: bold;
margin-top: -10px;
margin-bottom: 2px;
margin-left: -10px;
}
.card-text {
margin-top: -4px;
margin-bottom: 40px;
margin-left: -10px;
font-size: 12px;
}
/* Clips image */
.img-container {
display: inline-block;
width: 100px;
height: 100px;
overflow: hidden;
}
.card-img-top {
position: relative; top: 50%;
transform: translateY(-35%);
}
.status {
background-color: #662481;
height: 100px;
width: 10px;
position: relative;
top: -96px;
margin-left: auto;
z-index: 99;
padding: 0;
right: -20px;
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/font/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="index-css-mini.css">
<title>AniWatch</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-md fixed-top">
Brand
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
Airing
Finished
</div>
</div>
</nav>
</div> <!-- nav container -->
<div class="row">
<div class="col-md-3">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1068/97169l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title">The Rising of the Shield Hero</h5>
<p class="card-text">Airs Wednesday :: 26 eps</p>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1130/99458l.jpg" class="card-img-top" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title">Hitori Bocchi no Maru Maru Seikatsu</h5>
<p class="card-text">Airs Saturday :: 12 eps</p>
<div class="status"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to list side by side an anime list with images and name on a card, but the DIV ends and the image ignores and continues, how can I solve this?
URL: Here
Image: The image
css:
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
min-width: 199px;
max-width: 200px;
float:left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left:5px;
margin-top:10px;
}
HTML:
<div class="container">
<div class="card">
<button class="btn btn-success add" onclick="novoEpisodio(85)"><span class="fa fa-plus"></span> Adicionar Episódio</button>
<img onclick="escolherAnime(85)" src="https://4.bp.blogspot.com/-TYMOypUwSGI/WcqOASxepZI/AAAAAAAAK2w/-_V0RHPcEj8d0IO79AyUf2oUFTRRa3TjgCLcBGAs/s1600/Black-Clover-anime-poster-visual-v1.jpg" style="min-width:199px; max-width:200px; min-height:299px; max-height: 300px;">
<div class="container">
<h4><b>Black Clover</b>
</h4>
</div>
</div>
First of all, you're site's Bootstrap version is out of date with the HTML syntax you're using. Cards replaced panels from Bootstrap 3. You're using Bootstrap 3, view here which uses panels.
A lot of things changed between Bootstrap 3 and 4. I highly recommend you go with Bootstrap 4. Additionally, your HTML syntax doesn't line up with the traditional layout.
container > row > column > card
Here is a Codepen you can fork and play with.
Here is an example of what you need using Bootstrap 4.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
/* Custom CSS */
.text-strong {
font-weight: bold;
}
.card-body {
padding: .5rem;
}
.card-title {
margin: 0;
}
.card {
border: 2px dashed black;
box-shadow: 0px 10px 20px rgba(150,150,150,.5);
}
.card:hover {
box-shadow: 0px 10px 20px rgba(60, 141, 188,0.5);
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js'></script>
<div class="container-fluid p-5">
<div class="row no-gutters">
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Bleach</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Black Clover</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Boku dake ga in...</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Dragon Ball Super</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Nanatsu no Taizai</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Naruto Shippuden</h5>
</div>
</div>
</div>
</div>
</div>