duplicating column inside a single column - css

Question

I knew if you want your items to be in a column in bootstrap-5 it should be like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/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>
But, I want to add another column inside column, because I want the contents to be in a column not in a row like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/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>
In this case, I don't like the student Information card that has ul and li to be in a row, I want them to be in a Column like this, but inside a col:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/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>
How can I do this?

Answer 1

<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/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>
<div class="row justify-content-center">
<div class="col">
<li>First Name: Abdullahi</li>
</div>
<div class="col">
<li>First Name: Abdullahi</li>
</div>
<div class="col">
<li>First Name: Abdullahi</li>
</div>
</div>
</ul>
</div>
</div>
</div>