Bootstrap 4 card white space after adding responsive col class, wrap elements inside div or add classes directly?

Question

In Bootstrap 4, when I add any responsive column class like "col-sm-8" directly to a "div" with class as "card", there is some whitespace added between the card border and content (highlighted in yellow in the below image).

Code is below:

<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>

But, if I wrap the card in a "div" and add the above class to that "div", the whitespace goes away. As you can see now, the card header and content occupies all the width of the card.

<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>

Why does this occur? How to know in Bootstrap whether the responsive class could be directly applied to the html element or if the element should be wrapped inside a div first?

I could not find the answer to the above in the bootstrap documentation. For example, in the below official documentation links, the "card" example is wrapped inside a div but the form "label" example is directly given a class "col-sm-2" without an enclosing "div".

Snippet from Bootstrap card documentation https://getbootstrap.com/docs/4.0/components/card/

Snippet from Bootstrap from label documentation https://getbootstrap.com/docs/4.0/components/forms/

Zim Zim · Accepted Answer · 2018-03-25T00:44:08

"The whitespace goes away.. why does this occur?"

Because columns have left/right padding that creates the spacing (gutter) between the columns.

The documentation states...

"In a grid layout, content must be placed within columns"

So, the card, and any other content should be inside the column (col-*). AFAIK, the only place the col-* are combined with other classes is when using forms: https://getbootstrap.com/docs/4.0/components/forms/#form-grid

Bootstrap 4 card white space after adding responsive col class, wrap elements inside div or add classes directly?

1 Answers