CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
cbuch1800
cbuch1800

Reputation: 943

How to create a margin around a Bootstrap card?

I have the following html template:

<div class='row'>

    <div class='col-md-6'>
        <div class='card mx-auto'>
            <div id='main'>
                {% for candidate in candidates %}
                    <div class='w-75 card mx-auto'>
                        <p class='align-bottom'><strong>{{candidate.UserID.get_full_name}}</strong><input type="number" class='float-right'></p>
                    </div>
                {% endfor %}
            </div>
            <br>
            <button id='send' type="submit" class='btn btn-outline-dark mx-auto'>Submit</button>
        </div>
    </div>
    <div class='col-md-6'>
            {% include 'ballot_info.html' %}
    </div>

</div>

The card currently takes up all of the column it is in. Is there a way to create a margin around the outside of the card so it isn't hard up against the side of the page? In particular, is there a way of doing this using Bootstrap and not normal CSS?

Upvotes: 2

Views: 9410

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

It looks like you have no container. The .row should always be inside a container.

Centered on page:

<div class="container">
  <div class="row">
    <div class="col-md-6">
        <div class="card mx-auto">
        </div>
    </div>
    <div class="col-md-6">..</div>
  </div>
</div>

Full-width:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
        <div class="card mx-auto">
        </div>
    </div>
    <div class="col-md-6">..</div>
  </div>
</div>

If you want a margin around the card inside the col us the Bootstrap 4 spacing utilities:

Demo: https://www.codeply.com/go/7i0bEY2eea

Upvotes: 1

Related Questions