Styling different width columns in same row Bootstrap - html

Question

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.

Answer 1

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

Answer 2

<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

Answer 3

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>