In Bootstrap 4, when applying a responsive column class like "col-sm-8" directly to a "div" with the class "card", whitespace is added between the card border and content. This can be seen in the highlighted yellow area in the image below.
https://i.sstatic.net/iLhSU.png
Here is the code snippet:
<div class="row">
<div class="col-sm-2">
</div>
**<div class="card col-sm-8">**
<h3 class="card-header bg-primary text-white">Card...</h3>
<div class="card-block">
<form>
<div class="form-group row">
<div class="col-sm-2">Number</div>
<div class="col-sm-6">
<input type="radio" class="col-sm-1" name="numGuests" id="numGuests1" value="1">
<label for="numGuests" class="">1</label>
<input type="radio" class="col-sm-1" name="numGuests" id="numGuests2" value="2">
<label for="numGuests" class="col-form-label">2</label>
</div>
</div>
</form>
</div>
</div>
However, wrapping the card in a separate "div" and then applying the class resolves this issue. Now, the card header and content occupy the full width of the card as shown in the image linked below.
https://i.sstatic.net/drhgQ.png
<div class="row">
<div class="col-sm-2">
</div>
**<div class="col-sm-8">
<div class="card">**
<h3 class="card-header bg-primary text-white">Card...</h3>
<div class="card-block">
<form>
<div class="form-group row">
<div class="col-sm-2">Number</div>
<div class="col-sm-6">
<input type="radio" class="col-sm-1" name="numGuests" id="numGuests1" value="1">
<label for="numGuests" class="">1</label>
<input type="radio" class="col-sm-1" name="numGuests" id="numGuests2" value="2">
<label for="numGuests" class="col-form-label">2</label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The reason behind this behavior and how to determine whether a responsive class should be applied directly or wrapped within a div in Bootstrap is not clearly documented. Examples from the official documentation show inconsistencies in the usage of classes in different scenarios.
Snippet from Bootstrap card documentation https://getbootstrap.com/docs/4.0/components/card/
https://i.sstatic.net/FgjNG.png Snippet from Bootstrap form label documentation https://getbootstrap.com/docs/4.0/components/forms/