I'm struggling with creating a sidebar for my application and need guidance on using col to organize content into left, right, and center.
Here is my navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{% url 'register' %}"><h2>Borinati</h2></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="{% url 'login' %}">Login</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="{% url 'register' %}">Sign Up</a></li>
<li class="nav-item"><a class="nav-link active" href="{% url 'FeedBack' %}">About</a></li>
</ul>
</div>
</div>
The following content should be aligned to the left:
<a href="">Home</a>
<a href="">Contact Us</a>
<a href="">Companies</a>
<a href="">Products</a>
<a href="">Our Partner</a>
<a href="&">Our Sponsor</a>
And this content is intended to be in the center
<div class="container">
<div class="row justify-content-center">
<form action="" method="GET">
<input placeholder="Search By Category" type="text" class="form-control" name="q">
</form>
</div>
</div>
<br>
<div class="container">
<div class="row justify-content-center">
{% for question in news reversed %}
<div class="col-md-4">
<div class="card my-3">
<div class="card-body">
<a href="{% url 'view-News' news.slug %}" style="text-decoration: none;">
{{news.title}}
</a><br>
<br>
<a href="{% url 'Public_Profile' news.user.profile.slug %}">
{{news.user.username}}
</a>
<br>
<p class="btn btn-primary disabled btn-sm">{{news.category}}</p>
</div>
</div>
</div>
{%endfor%}
</div>
</div>