Search code examples
htmlcssbootstrap-4outlining

How can I properly outline a card in bootstrap?

I am working on a Django website so I can learn more about coding and CSS, Html and Boostrap. I have a problem with my main page. In the included screenshot you can see that the outlining on my cards doesn't match with the colored boxes on top of the page. I have drawn 2 pink lines to show what I mean. Does anyone know how I can fix this?

Dashboard

Dashboard.html

{%  extends 'accounts/main.html' %}

{% block content %}

{%  include 'accounts/status.html' %}

<br>
<div class="row">
    <div class="col-md-5">
        <h5>KLANTEN</h5>
        <hr>
        <div class="card card-body">
            <a class="btn btn-primary  btn-sm btn-block" href="{% url 'create_customer' %}">
            Nieuwe klant aanmaken</a>
            <table class="table table-sm">
                <tr>
                    <th></th>
                    <th>Customer</th>
                    <th>Phone</th>
                </tr>

            </table>
        </div>
    </div>

    <div class="col-md-7">
        <h5>LAASTE 5 RESERVERINGEN</h5>
        <hr>
        <div class="card card-body">
            <table class="table table-sm">
                <tr>
                    <th>Eigenaar</th>
                    <th>Diernaam</th>
                    <th>Brengen</th>
                    <th>Halen</th>
                    <th>Wijzigen</th>
                    <th>Verwijderen</th>
                </tr>

                {% for i in visits %}
                    <tr>
                        <td>{{i.customer}}</td>
                        <td>{{i.animals.name}}</td>
                        <td>{{i.date_brought}}</td>
                        <td>{{i.date_leave}}</td>
                        <td><a href="#" class="btn btn-primary btn-danger"><span class="glyphicon glyphicon-trash"></span>  </a></td>
                        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Verwijderen</a></td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>

</div>

{% endblock %}

Main.html

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>CRM</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="{%  static '/css/main.css' %}">

</head>
<body>

    {% include 'accounts/navbar.html' %}
    <div class="container-fluid">
    {% block content %}




    {% endblock %}

    <hr>
    <h5>©Luuk Smedts     Pre-alpha built 0.3</h5>


</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>

status.html

<br>

<div class="row">
    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="total-orders" >
                <div class="header">
                    <h5 class="card-title">Vandaag brengen</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_brengen}}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="orders-delivered">
                <div class="header">
                    <h5 class="card-title">Vandaag halen</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_halen}}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="orders-pending">
                <div class="header">
                    <h5 class="card-title">Huidige gasten</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_halen}}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

main.css

#logo{
    }

    body{
        background-color: #FCFCFC;
    }


    #total-orders{
        background-color: #4cb4c7;
    }


    #orders-delivered{
        background-color: #7abecc;
    }

    #orders-pending{
        background-color: #7CD1C0;
    }


@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Thanks for the help in advance!

Solution 

  • #logo{
    }

    body{
        background-color: #FCFCFC;
    }


    #total-orders{
        background-color: #4cb4c7;
    }


    #orders-delivered{
        background-color: #7abecc;
    }

    #orders-pending{
        background-color: #7CD1C0;
    }


@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

.col-md-5 {
   padding-left: 30px!important;
}

.col-md-7 {
   padding-right: 30px!important;
}
    <!DOCTYPE html>
<html>
<head>
    <title>CRM</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="{%  static '/css/main.css' %}">

</head>
<body>

    {% include 'accounts/navbar.html' %}
    <div class="container-fluid">
    {% block content %}




    {% endblock %}

    <hr>
    <h5>©Luuk Smedts     Pre-alpha built 0.3</h5>


</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
status.html

<br>

<div class="row">
    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="total-orders" >
                <div class="header">
                    <h5 class="card-title">Vandaag brengen</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_brengen}}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="orders-delivered">
                <div class="header">
                    <h5 class="card-title">Vandaag halen</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_halen}}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="orders-pending">
                <div class="header">
                    <h5 class="card-title">Huidige gasten</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_halen}}</h3>
                </div>
            </div>
        </div>
    </div>
</div>
{%  extends 'accounts/main.html' %}

{% block content %}

{%  include 'accounts/status.html' %}

<br>
<div class="row">
    <div class="col-md-5">
        <h5>KLANTEN</h5>
        <hr>
        <div class="card card-body">
            <a class="btn btn-primary  btn-sm btn-block" href="{% url 'create_customer' %}">
            Nieuwe klant aanmaken</a>
            <table class="table table-sm">
                <tr>
                    <th></th>
                    <th>Customer</th>
                    <th>Phone</th>
                </tr>

            </table>
        </div>
    </div>

    <div class="col-md-7">
        <h5>LAASTE 5 RESERVERINGEN</h5>
        <hr>
        <div class="card card-body">
            <table class="table table-sm">
                <tr>
                    <th>Eigenaar</th>
                    <th>Diernaam</th>
                    <th>Brengen</th>
                    <th>Halen</th>
                    <th>Wijzigen</th>
                    <th>Verwijderen</th>
                </tr>

                {% for i in visits %}
                    <tr>
                        <td>{{i.customer}}</td>
                        <td>{{i.animals.name}}</td>
                        <td>{{i.date_brought}}</td>
                        <td>{{i.date_leave}}</td>
                        <td><a href="#" class="btn btn-primary btn-danger"><span class="glyphicon glyphicon-trash"></span>  </a></td>
                        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Verwijderen</a></td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>

</div>

{% endblock %}
main.html

{% load static %}