'How to position content beside sidebar?

I am not very well versed in HTML and CSS. I am currently building a web application using Django and I integrated a sidebar into my web application using Bootstrap, but it has messed my layouts, and I can't seem to figure out how to move the content in a block to the left of side of my sidebar.

As seen in the pictures above, my sidebar is located at the top and my content is located at the bottom. Below are my codes for my sidebar and the base template.

sidebar_template.html

<div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark sidebar-height" style="width: 250px;"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> </svg> <span class="fs-4">CPRS Admin</span> </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a> </li>
        <li> <a href="{% url 'coordinator_dashboard' %}" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a> </li>
        <li> <a href="{% url 'coordinator_view_students' %}" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">Students</span> </a> </li>
        <li> <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a> </li>
        <li> <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a> </li>
    </ul>
    <hr>
    <div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <strong> John W </strong> </a>
        <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
            <li><a class="dropdown-item" href="#">New project</a></li>
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </div>
</div>

base.html

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>Capstone Project</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">  
    <script src="{% static 'js/bootstrap.min.js' %}"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

    <link href="{% static 'css/main.css' %}" rel="stylesheet">  
    <link href="{% static 'css/profile.css' %}" rel="stylesheet">  
    <link href="{% static 'css/sidebar.css' %}" rel="stylesheet">  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">  

</head>

<body>

    <div class="page-container">
        <div class="content-wrap">
            <div class="">
                {% if user.is_authenticated and user.is_superuser %}
                        {% include 'HOD/sidebar_template.html' %}
                {% endif %}
            </div> 
            <div class="col">
                {% block content %}
                {% endblock content %}
            </div> 
        </div>
    </div>
    <!-- Optional Javascript -->  
    {% block custom_js %}
    {% endblock custom_js %}

</body>
 <!-- Site footer -->
    <footer class="footer">
        <div class="container text-center">
            <small>Copyright &copy; Your Website</small>
        </div> 
    </footer>
</html>

Can someone help me fix the layouts ? Thanks.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to position content beside sidebar?

Sources

Related Questions