When a sidebar is added, Bootstrap 5 cards that are supposed to be displayed in a row end up being shown in a column instead

When I have a row of Bootstrap 5 cards that display correctly, but then add a sidebar that causes them to stack in a column instead of remaining in a row. How can I maintain the row layout even with the addition of a sidebar using specific CSS classes or properties?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f514f53">[email protected]</a>/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>

Is there a solution with CSS classes or properties that will allow me to keep the cards displayed in a row layout despite having a sidebar in place?

htmlcssbootstrap-5

Answer №1

It appears that the issue you are facing is related to how the Bootstrap grid system and the layout configuration interact. When you introduced the sidebar, it seems to have altered the existing structure of the layout. To ensure that the row layout remains intact even with the addition of the sidebar, you can make adjustments to the classes and structure as outlined below:

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

https://i.sstatic.net/UDXVq.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I effectively vertically position a button in Bootstrap 5 without compromising its functionality?

I'm attempting to reposition the sign-up buttons for Google, Apple, and email below where it says "join," but they stubbornly refuse to budge even when I try to force them with CSS. https://i.sstatic.net/74LQk.jpgCSS .homepage_topRight_Buttons{ ...

cssnode.jsreactjsbootstrap-5

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

htmlcss

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Does anyone know how to achieve the sleek, lightweight buttons and text boxes seen on Google's web pages like Google Search, Google Plus, and Google Play? I am currently using JSP and CSS, but I am open to incorporating jQuery if necessary. Any help w ...

jquerycssjsp

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss

The radio button selection cannot be transmitted via email

Only the first radio button is selected <div class="field_radio" name="preference" > <input class="radio1" type="radio" name="preference" id="preference" value="team" onclick="ShowHideDiv()" /><label for="radio1"> ...

phpjqueryhtml

Attempting to place the search bar within the navigation bar

Having trouble positioning a search bar in my nav bar, I'd like it to show on the right side without overlapping any other elements. Tried relative and absolute positioning with no success so far. Any assistance would be greatly appreciated, thank yo ...

javascripthtmljquerycss

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

I have been trying to figure this out for hours. The goal is to submit a form only if one of the inputs matches a PHP echo. To simplify the script, it looks something like this: <head> </head> <body> <?php $A = rand(0,10); $B = r ...

javascriptphphtmlonsubmit

Whenever I attempt to display certain HTML files in Django, I encounter an error message stating: "NoReverseMatch at / Reverse for 'it_languages' not found."

Every time I attempt to display a HTML file in my Django project, an error pops up preventing me from accessing the localhost page. The exact error message I receive is: The error is: NoReverseMatch at / Reverse for 'it_languages' not found. &apo ...

pythonhtmldjango

Issue with integrating Bootstrap into Angular 2

When attempting to link to the bootstrap.css file located in the node_modules folder within index.html, I encountered an error. The application's folder structure is as follows: ecommerce-app/node_modules ecommerce-app/src/app/index.html All attem ...

htmltwitter-bootstrapangular

What is the method to create a link that doesn't take up the entire page?

As a beginner in HTML, I have been working on a website for fun and facing an issue with buttons. When I add a button, the entire area becomes clickable, even if there is empty space around it. This means that you can click on the left or right side of the ...

htmlcss

Utilizing Modernizr for detecting support of background-clip:text functionality

Recently, I decided to utilize Modernizr in order to check for support of the css property background-clip: text. After some research, I came across this page:https://github.com/Modernizr/Modernizr/issues/199 I then added the following code to my website ...

csshtmlmodernizr

Table Header Stays Put Without Shrinking or Expanding with Window Adjustment

I have a sticky table header that stays at the top when scrolling down on my web page. To achieve this effect, I followed the solution provided on css-tricks.com/persistent-headers/. However, I encountered an issue where the sticky table header does not ...

javascriptjqueryhtmlcss

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

javascripthtmlcss

Ensuring the authenticity of user login credentials

I have a form in my HTML where the user needs to input their name and password. <html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name"><br> Password: <input type="text" name="password ...

phphtml

Transforming CSS shorthand background properties into longhand representation

I have been working on a function to convert shorthand CSS background declarations into longhand. The function I created is functional, but it does not handle cases where the background-color property includes color values like black or yellow. It also doe ...

phphtmlcss

What is the best way to use PHP to call an ACF variable and substitute a nested HTML element?

Utilizing the repeater field in Wordpress' advanced custom fields, I have made the content on my site dynamic. View an image of the static markup here The following is how I structured the content using plain HTML: <div class="container" ...

phphtmlcsswordpressadvanced-custom-fields

Enhancing React components with dynamic background colors for unique elements

I am encountering an issue while using a map in my code. Specifically, I want to set the background of a particular element within the map. The element I am referring to is "item .title". I aim for this element to have a background color like this: https:/ ...

javascriptcssreactjsreduxreact-redux

Should you include the dollar sign in a Vue HTML variable or not?

I’m a bit confused about whether or not I should include $ when using a Vue HTML variable: new Vue({ data: { a: "myData" } }); Do I need to use: <h1>My value is {{ a }}</h1> or <h1>My value is {{ $a }}</h1> What ...

javascripthtmlvue.js

Instructions for implementing onclick functionality on an iframe element

Is it possible to use the onclick event in an iframe tag to call a JavaScript function? I have integrated a Facebook like button on my website using an iframe code. When a user clicks on the like button, I would like them to be redirected to a 'thank ...

javascripthtml

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Looking to update the HTML view using *ngIf, depending on a local variable that should change based on an observable variable from a shared service. HTML <div class="login-container" *ngIf="!isAuthenticated"> TypeScript code for the same componen ...

htmlangulartypescriptobservable