bootstrap 4 element positioning in Angular application view - html

Question

I'm working on an Angular 7 blog application where I'm having some difficulty in adjusting the view of a template made with bootstrap 4. In the main HTML component, I've created two cards in a row, one of it is the blog posts and the other card contains category. The category card is getting fetched from a different component and called using it's selector i.e <app-blog-category></app-blog-category> in the main HTML component. Below are the problems I'm facing in the view. Please look at the image below for reference. Also you can view it from this link ---> https://stackblitz.com/edit/angular-tlbxbr?file=src%2Fapp%2Fapp.component.html
1) The category card is getting rendered beside the last blog document thus leaving a significant amount of space on the top. If I apply style margin-top:negetive-value on the card class as style it is getting resolved but then again the value is differing as the device-width increases or decreases and it goes way above or below than what is needed.
2) the image inside the horizontal card is not taking the full height and width of the card
3) When the device-width is between than 768px-991px, the category card elements i.e the header and list items are breaking maybe due to too much padding around them or being centered.
HTML:
<div class="container">
<div class="row col col-md-12 mx-auto" style="text-align:center; font-size:22px">All Blogs
<br><br><br><br>
</div>
<div class="row" *ngIf="allBlogs.length>0">
<div class="col-md-9 card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-4">
<a [routerLink]="['/blog', blog.blogId]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
<a [routerLink]="['/blog', blog.blogId]" class="mt-auto btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="container"> //note that this part is called from a separate angular component by it's selector <app-blog-category></app-blog-category>
<div class="row">
<div class="col-md-12 card">
<article class="filter-group">
<div class="card-body">
<header class="card-header">
<h6 class="title">Categories</h6>
</header>
<ul class="list-menu">
<li *ngFor="let category of categories" [routerLink]="['/bycategory/', category.categoryId]">{{category.categoryName}}</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.card-block {
font-size: 1em;
position: relative;
margin: 0;
padding: 1em;
border: none;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
.card {
font-size: 1em;
overflow: hidden;
padding: 5;
border: none;
border-radius: .28571429rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
margin-top:20px;
}
.btn {
margin-top: auto;
}
.filter-group {
border-bottom: 1px solid #e4e4e4
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.filter-group .card-header {
border-bottom: 0
}
.icon-control {
margin-top: 6px;
float: right;
font-size: 80%
}
.list-menu {
list-style: none;
margin: 0;
padding-left: 0
}
.list-menu a {
color: #343a40
}
a {
text-decoration: none !important;
background-color: transparent
}

Answer 1

I hope this works for you :
<div class="container">
<div class="row col col-md-12 mx-auto" style="text-align:center; font-size:22px">All Blogs
<br>
<br>
<br>
<br>
</div>
<div class="row">
<div class="col-12 col-md-9 order-2 order-md-1">
<div class="row" *ngIf="allBlogs.length>0">
<div class="col-md-12 card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-4 p-0">
<a href="#">
<div class="card-img-top card-img-size" style="height: 100%; background-image: url('https://images.pexels.com/photos/1804035/pexels-photo-1804035.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-size: cover; background-position: center;" alt="blog1"></div>
</a>
</div>
<div class="col-md-8 px-3">
<div class="card-block px-3">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3 order-1 order-md-2" style="margin-top: 1.1%;">
<app-blog-category></app-blog-category>
</div>
</div>
</div>