I have discovered that in order to arrange items in a column using bootstrap-5, the code should look like this:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d938d91">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
<div class="col">
Column 3
</div>
</div>
</div>However, I want to take it a step further and nest another column inside each column, so that the contents are displayed in stacked columns rather than rows. Here is how I envision the structure:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9dcc7d9c7db">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="card" style="width: 300px;">
<img src="https://c8.alamy.com/zooms/9/ad212f62fc084f68bfeed59541c0aed5/2brexeg.jpg" alt="" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title">
{{ second.first_name }} {{ second.last_name }}
</h5>
<a class="btn btn-danger" href="{% url 'Delete-secondary' second.slug %}">Delete</a>
<a class="btn btn-primary" href="{% url 'Edit-Secondary-Student' second.slug %}">Edit</a>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div class="card-content">
<div class="card-header shadow-sm bg-body text-center">
<h4>Student Informations</h4>
</div>
<br>
<div class="col">
<ul>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
<li>First Name: Abdullahi</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>As of now, the "student information" card with the unordered list elements needs to be structured in columns within a column for better presentation. Here is an example layout of how this can be achieved:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e3f8e6f8e4">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col">
<ul>
<li>First Name: Abdullahi</li>
</ul>
</div>
<div class="col">
<ul>
<li>First Name: Abdullahi</li>
</ul>
</div>
<div class="col">
<ul>
<li>First Name: Abdullahi</li>
</ul>
</div>
</div>
</div>If you have any insights on how to achieve this nested column layout, please share!