[Answered ]-How to position content beside sidebar?

by

1👍

✅

This is a bootstrap issue, not a django issue.
You have to wrap your head around how the bootstrap grid works.

You have to first create a row element which can contain one or more columns. When you create the columns you get to decide their behavior according to screen size, or to just let them figure out their sizing by themselves.

This will create two equally sized columns that will take up whatever width space available.

<div class="row">
    <div class="col">
        content
    </div>
    <div class="col">
        content
    </div>
</div>

If you want to define the width of each column in relation to the total width of the page, you can define that when you create the columns. Here you can specify different behaviors for different screen sizes in order to make your site responsive.

 <div class="row">
        <div class="col-3 col-lg-2">
           This column will be 3/12 of the screen on small and medium screens. Or 2/12 of the screen on large screens and up.
        </div>
        <div class="col-9 col-lg-10">
            This column will be 9/12 of the screen on small and medium screens. Or 10/12 of the screen on large screens and up.
        </div>
    </div>

And in your specific case i’d suggest something like this:

<div class="page-container">
    <div class="content-wrap">
        <div class="row">
            <div class="col-3">
                {% if user.is_authenticated and user.is_superuser %}
                        {% include 'HOD/sidebar_template.html' %}
                {% endif %}
            </div> 
            <div class="col-9">
                {% block content %}
                {% endblock content %}
            </div> 
        </div>
    </div>
</div>
👤Beikeni

Leave a comment