duplicating column inside a single column

January 27, 2023

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?

>Solution :

<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>