duplicating column inside a single column-CodePudding

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/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">


<div >
        <div >
            <div >
                Column 1
            </div>

            <div >
                Column 2
            </div>

            <div >
                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/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
    
    
    <div >
        <div >

            <div >
                <div  style="width: 300px;">
                    <img src="https://c8.alamy.com/zooms/9/ad212f62fc084f68bfeed59541c0aed5/2brexeg.jpg" alt="" >
                    <div >
                        <h5 >
                        {{ second.first_name }} {{ second.last_name }}
                        </h5>
                        <a  href="{% url 'Delete-secondary' second.slug %}">Delete</a>
                        <a  href="{% url 'Edit-Secondary-Student' second.slug %}">Edit</a>
                    </div>
                </div>
            </div>
        
            <div >
                <div >
                    <div >
                        <div >
                            <div >
                                <h4>Student Informations</h4>
                            </div>
                            <br>

                            <div >
                                <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/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">

<div >
        <div >

                    <div >
                        <ul>
                            <li>First Name: Abdullahi</li>
                            
                        </ul>
                    </div>

                    <div >
                        <ul>
                            <li>First Name: Abdullahi</li>
                            
                        </ul>
                    </div>

                    <div >
                        <ul>
                            <li>First Name: Abdullahi</li>
                            
                        </ul>
                    </div>

        </div>
    </div>

How can I do this?

CodePudding user response：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">


    <div >
        <div >

            <div >
                <ul>
                    <div >
                        <div >

                            <li>First Name: Abdullahi</li>

                        </div>
                        <div >
                            <li>First Name: Abdullahi</li>
                        </div>
                        <div >
                            <li>First Name: Abdullahi</li>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>