What is the correct way to create a card outline in Bootstrap?

I am currently developing a Django website to enhance my skills in coding, CSS, Html, and Bootstrap. However, I am encountering an issue with the main page of my site. The visuals on my cards do not align properly with the colored boxes at the top of the page, as shown in the screenshot I have provided. I've highlighted this discrepancy with two pink lines for clarity. Can anyone offer guidance on how to resolve this issue?

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');
}

Appreciate any assistance you can provide!

htmlcssbootstrap-4outlining

Answer №1

#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>CUSTOMERS</h5>
        <hr>
        <div class="card card-body">
            <a class="btn btn-primary  btn-sm btn-block" href="{% url 'create_customer' %}">
            Create New Customer</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>LAST 5 RESERVATIONS</h5>
        <hr>
        <div class="card card-body">
            <table class="table table-sm">
                <tr>
                    <th>Owner</th>
                    <th>Pet Name</th>
                    <th>Bring Date</th>
                    <th>Pickup Date</th>
                    <th>Edit</th>
                    <th>Delete</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-danger"><span class="glyphicon glyphicon-trash"></span>  </a></td>
                        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Delete</a></td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>

</div>

{% endblock %}
main.html

{% load static %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for personalizing text and icon colors in the TableSortText element of Material-ui

My Goal: I aim to empower users with the ability to apply customized styles to my EnhancedTable component by utilizing a styles object containing properties like headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor, and more. The ...

javascripthtmlcssreactjsmaterial-ui

When the parent element is centered, align the children to the left

Can children be aligned to the left when the parent is aligned to the center? I have a list of elements where the parent block should be centered, but the children need to align to the left. Now I found a solution to align the children to the center as w ...

css

The mouseenter event in jQuery is failing to trigger

I'm encountering an issue with the mouseenter event on a div section of my webpage. I am attempting to alter the background color of this div when the mouse enters, but it seems to be disregarded. This is the basic HTML code: <div id="services" c ...

javascriptjquerycsshtml

The CSS background fails to expand to the entire height of the element

I'm encountering an issue where an element with 100% height is extending beyond its boundaries when there are multiple blocks. For a demonstration, you can refer to this jsfiddle example: http://jsfiddle.net/yPqKa/ Any suggestions on how to resolve ...

htmlcss

Steps for resetting a div's display after adjusting the device size

I have a code that displays horizontally on desktop screens and vertically on phones. It includes an x button (closebtn) that is only displayed on phones to close the menu bar. How can I automatically display it again after resizing the page back to deskto ...

javascripthtmlcssresponsive-design

I am struggling to find the right way to center those images

Hello everyone, I'm currently attempting to set up the main content of the homepage resembling the image provided, but I'm encountering some challenges. Every approach I take seems to cause the image to overflow the container and occupy the enti ...

htmlcssflexbox

A guide on changing a plus sign into a minus sign with CSS transition

Is there a way to create a toggle button that changes from a plus sign to a minus sign using only CSS, without the need for pseudo-elements? The desired effect is to have the vertical line in the "+" sign shrink into the horizontal line. While I know it& ...

javascripthtmljquerycsscss-transitions

Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success. My goal is to achieve a result similar to the image shown here: enter image description here Here is the code snippet I've been using: < ...

htmlcssreactjsiconsstyled-components

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

csshtmlhyperlink

The surprising margins that Bootstrap sneaks into columns

It seems like bootstrap is mysteriously including an unseen margin in my column classes. Even after inspecting an element labeled as 'col-lg-3,' there is no visible margin CSS, and attempting to manually add margin:0 still results in a margin bei ...

twitter-bootstrapcssmarginbootstrap-4

Using webpack to load the css dependency of a requirejs module

Working with webpack and needing to incorporate libraries designed for requirejs has been smooth sailing so far. However, a bump in the road appeared when one of the libraries introduced a css dependency: define(["css!./stylesheet.css"], function(){ &bsol ...

javascriptcssrequirejswebpack

SharePoint 2013 on a mobile device does not support scrolling within iframes

Recently, I set up a SharePoint 2013 website with a few iframes. However, when I access the site on my mobile devices (iPad and Android), I am unable to scroll through the entire page by touching within the iframe. I attempted to solve this issue by inclu ...

androidioscsssharepointiframe

What are the best techniques for styling the aria label element in HTML?

Looking to enhance the appearance of a button label upon hover. Curious about how I can customize the aria-label element to resemble the design in the screenshot provided below. ...

htmlcsslabel

Tips for incorporating a Font Awesome icon <i> within a select dropdown and customizing its appearance

I am facing an issue while trying to insert an icon into a select option. The error message I received is: Warning: validateDOMNesting(...): cannot appear as a child of <option> To indicate that certain fields are required, I am using asterisk ic ...

javascripthtmlcssreactjsfont-awesome

How can I identify and return false if all the digits from 0 to 9 are matching with other characters in a string?

In my current project, I am focusing on filtering out numerical values only. I have implemented a phone mask using JavaScript on the front end to filter user input to a specific format such as (000)000-000, which includes numbers ranging from [2-9] and [0- ...

phpjavascripthtmlregexvalidation

Issue with ChartJs version 2.8.0: The custom tooltip remains visible even when clicking outside the chart canvas or moving the mouse pointer

I am utilizing ChartJs to display a line chart with a custom tooltip that appears upon the click event of the data points. The challenge I am facing is that the custom tooltip remains visible even when the mouse pointer is outside the chart canvas area. ...

javascripthtmlcsschartschart.js

Pressing "Enter" initiates the submission of the form

My webpage contains a stylish GIF displayed as a button within a div. The script inside the div triggers a click event when the ENTER key is pressed, using $(this).click(). This click action has its own functionality. Everything functions smoothly in Fire ...

javascripthtmljquery

Limit image size in Outlook when using Mailchimp

I'm currently working on coding a Mailchimp template for a client and I've run into an issue with image dimensions. The problem arises when images exceed the width of the template (usually 600px), as they are displayed at their original size in ...

htmlcssimageoutlookmailchimp

Adjust the height of the Iframe to match the content within it

After conducting my research, I have not been able to find a solution. Although I am not an expert in jQuery, it seems that the code is not functioning properly. Within the iframe are links that expand when clicked to display content. However, the height o ...

javascriptjqueryhtmliframeexpand

Is the content within the div longer than the actual div itself when the width is set to 100%?

When working with a div of fixed width that contains only an input text box, and the width of the input is set to 100%, you may notice that it extends slightly beyond the boundaries of the div. For demonstration purposes, consider the following code: HTM ...

htmlcssfirefox