Bootstrap Card Padding Without Exceeding Borders - css

Question

I'm working on a web app which will work on a 800 x 480 pixel screen on full screen mode.
My App is single page app using ReactJS and it has a simple Navigation Bar at top, and 4 Bootstrap Card with 2x2 arrangement.
Code is like:
<div class="nav-bar">Component</div>
<div class="card-deck">
<div class="card-body"> Something-1</div>
<div class="card-body"> Something-2</div>
</div>
<div class="card-deck">
<div class="card-body"> Something-3</div>
<div class="card-body"> Something-4</div>
</div>
Problem is that, Something-3 and Something-4 cards has something in them(!) which exceeds my 480 px limit. Is there any solution that changes the tightness of card without changing margins and padding of the ingredients of card?

Answer 1

The problem is that your .card-body classes come directly under your .card-deck class; you're missing the core .card class in between.
Your .card-deck should contain multiple .card elements, which are the core Bootstrap cards themselves. These .card elements contain the .card-body (which in turn usually contain the classes .card-title and .card-text).
If set up correctly, it doesn't matter how much content a card has in it; it will simply overflow to contain it.
This can be seen in the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis auctor accumsan. Cras eu purus quis dui tempus finibus. Quisque et suscipit mi. Mauris maximus nisi vitae blandit interdum. Etiam interdum felis nec sapien tristique, nec sollicitudin urna ornare. Integer magna orci, scelerisque at fermentum nec, tempor id purus. Phasellus suscipit tempus odio, sit amet aliquam arcu varius at. Sed rutrum pellentesque tortor, id pharetra ante euismod nec. </p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis auctor accumsan. Cras eu purus quis dui tempus finibus. Quisque et suscipit mi. Mauris maximus nisi vitae blandit interdum. Etiam interdum felis nec sapien tristique, nec sollicitudin urna ornare. Integer magna orci, scelerisque at fermentum nec, tempor id purus. Phasellus suscipit tempus odio, sit amet aliquam arcu varius at. Sed rutrum pellentesque tortor, id pharetra ante euismod nec. </p>
</div>
</div>
</div>