Bootstrap 5 cards should be display in a row, but they are displayed in a column when added a sidebar

Issue

Why do bootstrap 5 cards, which arranged in a row, end up being displayed in a column when I added a sidebar? I started it using the method below, using that method, the cards displayed in a row, but when I added a sidebar, it displayed in a column.

<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-fluid">
        <div class="row">

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="card-content">
                            <p>Card Name</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="card-content">
                            <p>Card Name</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="card-content">
                            <p>Card Name</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

The cards, when I added the sidebar:

<div class="container-fluid">
        <div class="row">

            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar vh-100">
                <div class="position-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="" class="nav-link active">Dashbaord</a>
                        </li>

                        <li class="nav-item">
                            <a href="" class="nav-link">Page 1</a>
                        </li>

                        <li class="nav-item">
                            <a href="" class="nav-link">Page 2</a>
                        </li>
                    </ul>
                </div>
            </nav>

            
            <main class="col-md-3 col-lg-3 px-md-4">
                
                <div class="card my-3">
                    <div class="card-body">
                        <a class="btn btn-primary" href="{% url 'Room_Content' room_type.id %}">
                            <p>Card Name</p>
                        </a>
                    </div>
                </div>

                <div class="card my-3">
                    <div class="card-body">
                        <a class="btn btn-primary" href="{% url 'Room_Content' room_type.id %}">
                            <p>Card Name</p>
                        </a>
                    </div>
                </div>

                <div class="card my-3">
                    <div class="card-body">
                        <a class="btn btn-primary" href="{% url 'Room_Content' room_type.id %}">
                            <p>Card Name</p>
                        </a>
                    </div>
                </div>
                
            </main>

        </div>
    </div>

Are there any specific CSS classes or properties that can help me achieve the desired row layout even with with a sidebar in my web design.

Solution

It seems like the issue you're encountering is related to the Bootstrap grid system and the layout configuration. When you added the sidebar, the existing structure seems to have caused a change in the layout. To maintain the desired row layout even with the sidebar, you can modify the classes and structure as follows:

<div class="container-fluid">
    <div class="row">
        <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar 
vh-100">
            <div class="position-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="" class="nav-link active">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a href="" class="nav-link">Page 1</a>
                    </li>
                    <li class="nav-item">
                        <a href="" class="nav-link">Page 2</a>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="col-md-9 col-lg-10 px-md-4"> <!-- Adjusted column width -->
            <div class="row"> <!-- Added a new row for the cards -->
                <div class="col">
                    <div class="card my-3">
                        <div class="card-body">
                            <a class="btn btn-primary" href="{% url 
 'Room_Content' room_type.id %}">
                                <p>Card Name</p>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card my-3">
                        <div class="card-body">
                            <a class="btn btn-primary" href="{% url 'Room_Content' room_type.id %}">
                                <p>Card Name</p>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card my-3">
                        <div class="card-body">
                            <a class="btn btn-primary" href="{% url 
 'Room_Content' room_type.id %}">
                                <p>Card Name</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

Answered By - Ahmed Ali Rajput