Issue
I am new to this so even the dumbest thing would be welcome.
Here there is ample padding as defined in bootstrap as padding-right and padding-left
When I make my display smaller one card goes below and there is no space between the two cards.
<div class="row">
<div class=" col-lg-4 col-md-6 col-sm-12">
<div class="card illustration-img">
<img
src="..." alt="...">
<div class="card-body">
<p class="card-text">We got some text here</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card illustration-img">
<img
src="..."
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">We have text here</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img
src="..."
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">We have text here</p>
</div>
</div>
</div>
</div>
The HTML is pretty basic. The CSS code
.illustration-img{
padding: 0 5px 0;
}
Solution
You can add mb-3 class to col-lg-4 class tags. (mb-1...mb-5)
<div class=" col-lg-4 col-md-6 col-sm-12 mb-3 ">
Answered By - Mecit Yücetürk
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.