Topic: Spacing between cards in Bootstrap html only no css
Expected behavior I would like spacing between cards appear as the image ive attached Actual behavior cards are currently close together without spacing Resources (screenshots, code snippets etc.)
<div class="col-xs-1 col-sm-1 col-md-2">
<div class="calcite-web">
<div class="text-center">
<div class="row align-items-center">
<img alt="....." class="card-image" src="https://......." style="width:150px;height:150px;" >="" <div="">
</div>
</div>
</div>
<div class="card-content">
<h6><a href="#" rel="noopener"></a><center><a href="#" rel="noopener">Property<br>Management</a></center></h6>
<div aria-label="actions" class="btn-group btn-group-justified" role="group">
<a class="btn btn-primary" href="#">View</a>
</div>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-md-2">
</div>
</div>
<div class="card-content">
<h6><a href="#" rel="noopener"></a><center><a href="#" rel="noopener">Property<br>Management</a></center></h6>
<div aria-label="actions" class="btn-group btn-group-justified" role="group">
<a class="btn btn-primary" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
<div class="card-content">
<h6><a href="#" rel="noopener"></a><center><a href="#" rel="noopener">Property<br>Management</a></center></h6>
<div aria-label="actions" class="btn-group btn-group-justified" role="group">
<a class="btn btn-primary" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
<div class="card-content">
<h6><a href="#" rel="noopener"></a><center><a href="#" rel="noopener">Property<br>Management</a></center></h6>
<div aria-label="actions" class="btn-group btn-group-justified" role="group">
<a class="btn btn-primary" href="#">View</a>
</div>
</div>
</div>![enter image description here][1]
Hi huskersippi,
Your code has many issues. I actually can't even test your example because of many problems: - starting with div with class col? - bootstrap requires col to be inside row and row inside container - what is class "calcite-web" - you are using row without col's inside - card-content without main card structure - your code in the post you shared above is weirdly styled.
Please, create snippet that will show your problem. Please, create a view that will display exactly what you actually have right now in your development. I will edit your snippet-code to serve your need.
Best Regards, Piotr
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.3
- Device: pc
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No