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

add text nodes with unnecessary quotation marks around my selection list

Looking to incorporate a select list into my website using a button. I must utilize nodes for access within the DOM to retrieve its value later, so innerHTML isn't an option. Experiencing difficulty as createTextNode seems to encase my list in quota ...

javascripthtmlajaxweb-applications

Changing color based on AngularJS condition using CSS

My HTML code looks like this: <div> <i class="glyphicon glyphicon-envelope" style="margin-top: -50px; cursor:pointer; color: #1F45FC" ng-click="createComment(set_id)"> </i> Route <center> ...

javascripthtmlcssangularjs

I am facing an issue with properly linking my jQuery

After searching through numerous posts on this website, I have yet to find a solution to my problem. My issue involves trying to implement a simple jQuery function that is not functioning as expected. It appears that the jQuery link may not be properly set ...

javascriptjquerycss

Creating a dynamic website with user-friendly editing capabilities

Having a good understanding of html5 and css3, I am currently exploring ways to create a website that enables visitors to edit content in real time for all other users to see. While aware of the contenteditable attribute, I have found that it does not reta ...

javascriptphpjqueryhtmlcss

WordPress Migration Causing Issues with Custom Font Display

I recently moved my website from to using the Duplicator plugin, but I'm facing an issue with the custom font 'Kanit' not displaying correctly. I have double-checked on the backend and confirmed that Kanit font is properly set up. Below i ...

csswordpress

Adjust the wait time for sliding on the jQuery rcarousel

I am currently utilizing rcarousel for my website and I would like to adjust the duration of time that each slide is displayed. At the moment, each slide stays up for just a few seconds, but I want to extend this so that each slide remains on screen for at ...

javascriptjqueryhtml

The memory usage steadily increases when you refresh data using the anychart gantt chart

I have a basic anychart code to update a gantt chart every second: function initializeSchedule(){ anychart.onDocumentReady(function () { anychart.data.loadJsonFile("../scheduler?type=getschedule", function (data) { documen ...

javascripthtmlajaxanychart

Removing a blank line from a null variable in PHP and appending a backspace to it to display HTML text

How can I remove the empty line for a null variable? For example: $line1 = "Hello All"; $line2 = "Hello You"; $line3 = "Hello Me"; $line2 = null; Now when I echo echo "$line1<br>$line2<br>$line3"; it shows an empty line in the middle whe ...

phphtmltextnullecho

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } ...

javascripthtmlcss

Tips for positioning an element in the center of a page using Bootstrap both horizontally and vertically

[Pardon my English] I recently managed to center my "logo" both horizontally and vertically. However, I am looking to have my logo shrink a bit when resizing the browser. Any suggestions on how to achieve this using bootstrap? Index.html <section> ...

htmlcsstwitter-bootstrap

Fancybox is experiencing some technical difficulties

Can anyone help me troubleshoot why my fancybox code isn't working properly after adding the script below to the body? Any thoughts on what might be causing this issue? $(document).ready(function() { $("a#example4").fancybox({ 'opa ...

jqueryhtml

Optimizing CSS With jQuery During Browser Resize

I am currently facing an issue with recalculating the height of the li element during window resizing or scrolling. Strangely, on page load, the height is no longer being re-calculated and set to the ul's child height. Here is the code I have written ...

javascriptjquerycss

Convert an HTML file to .msg format or prevent the send button from functioning in Outlook messages

I am trying to figure out how to save an HTML file as a .msg format in order to send it later. The HTML is basically a mock of a regular email with just the basic features like from, to, cc, subject, and body. I'm not quite sure how to go about achiev ...

htmlangularemailangular6html-email

Missing ghost image appears when you drag and drop the file

New to JavaScript... As a rookie in coding, I often get interesting requests from my partner who is a kindergarten teacher. Recently, she asked me to create a "Function Machine" for her classroom activities. With some trial and error, I managed to put tog ...

javascriptcss

determining the number of td elements in a row of a table located within an iframe

When I interact with a cell in a table within an iframe, I want to determine the number of cells in that row. If a cell is actually a span element, I would like to consider it as part of the cell count. The iframe may contain multiple tables without any s ...

jqueryhtmliframe

I'm having an issue with Internet Explorer where the link doesn't function properly when I enclose the content within an <a> tag. Could anyone

I understand that this might not be the preferred approach, but a customer has requested live text wrapped in just one HTML tag.... Here's the challenge I'm facing: I currently have some code structured like this: <a href="google.com"> ...

html

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

Utilize the CSS property font-family to inherit styles for headings

Is it possible to use a different font family for headings than the one used in the body text while still maintaining a consistent look across all heading levels? One way to achieve this is by specifying the font family for each heading level individually ...

cssinheritance

Tips for incorporating inline images with gatsby-image

Seeking Solution In my quest to query and showcase images with a maximum width of 350px, I am hoping to have them displayed inline-block for tablets and larger screens. Ideally, each image would sit next to one another and wrap if they exceed the parent d ...

javascriptcssreactjsimagegatsby

Tips for integrating CSS with Material UI TableContainer

I have utilized Material UI Grid to display data in a chart. However, the appearance of the chart does not match my expectations. Instead of resembling the desired "dense table," it looks different: Actual Look of the Chart Below is the code snippet I ha ...

javascriptcssmaterial-uinext.js