Can you align a row under its corresponding column in Bootstrap?

Hello, I'm facing a dilemma with my layout. I have a grid consisting of 2 Rows and 4 Columns (col-md-8 & col md-4 in each row). The structure is as follows:

Within the container

 Row 1 Column 1 (md-8)    Row 1 Column 2 (md-4) [Accordion]
 Row 2 Column 1 (md-8)    Row 2 Column 2 (md-4)

The second column of Row 1 is an accordion element that, when expanded, takes up the entire second row along with it. However, I want it to only occupy the column below it, which is Row 2 Column 2.

Refer to the attached images for better clarity: R2C1 already has more space than R2C2 https://i.sstatic.net/dwuWK.png When the accordion is expanded, R2C1 receives significantly more extra space compared to R2C2 https://i.sstatic.net/ghBte.png

Am I missing something or how can I fix this issue? Thank you.

Here is a link to the code demo https://stackblitz.com/edit/bootstrap-5-q5cctv?file=src%2Findex.html

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a5bea3bea0bdf1fce0f8f1a1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"gt;
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="mt-4 p-5 bg-white rounded-3">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="fw-1">Row 1 Column 1</span>
                        </div>
                    </div>
                    <hr class="my-4">

                    <div class="row">
                        <div class="col-md-12">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
                        </div>
                    </div>



                </div>
            </div>
            <div class="col-md-4">
                <div class="mt-4 p-5 bg-white rounded-3">
                    <div class="row">
                        <div class="col-md-3">

                            <span>R1 C2</span>


                            <!-- <i class="bi bi-printer-fill"> bi bi-envelope-at-fill </i> -->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="accordion accordion-flush" id="accordionFlushExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingOne">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
                                            aria-expanded="false" aria-controls="flush-collapseOne">
                                            Accordion Item #1
                                        </button>
                                    </h2>
                                    <div id="flush-collapseOne" class="accordion-collapse collapse"
                                        aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">Photo Editing,.</div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingTwo">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
                                            aria-expanded="false" aria-controls="flush-collapseTwo">
                                            Accordion Item #2
                                        </button>
                                    </h2>
                                    <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                        aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">Placeholder content for this accordion, which is 
                                            intended to demonstrate the <code>.accordion-flush</code> class. This is the 
                                            second item's accordion body. Let's imagine this being filled with some 
                                            actual content.</div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingThree">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
                                            aria-expanded="false" aria-controls="flush-collapseThree">
                                            Accordion Item #3
                                        </button>
                                    </h2>
                                    <div id="flush-collapseThree" class="accordion-collapse collapse"
                                        aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">Placeholder content for this accordion, which is 
                                            intended to demonstrate the <code>.accordion-flush</code> class. This is the 
                                            third item's accordion body. Nothing more exciting happening here in terms 
                                            of content, but just filling up the space to make it look, at least at first 
                                            glance, a bit more representative of how this would look in a real-world 
                                            application.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <div class="mt-4 p-5 bg-white rounded-3">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="fw-1">Row 2 Column 1</span>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row">
                        <div class="col-md-12">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
                        </div>
                    </div>


                        

                </div>
            </div>
            <div class="col-md-4">
                <div class="mt-4 p-5 bg-white rounded-3">
                    <div class="row">
                        <div class="col-md-3">

                            <span>R2 C2</span>


                            
                        </div>
                    </div>
                    <hr class="my-4">

                    <div class="row">
                        <div class="col-md-12">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
                        </div>
                    </div>


                </div>
            </div>
        </div>


        <footer class="pt-3 mt-4 text-muted border-top">
            © 2023
        </footer>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186d766b766875393428303969">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d6dac7d0f5879b84849b83">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf7eaf4e9a5a8b4aca5f5">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
        crossorigin="anonymous"></script>
</body>
</html>
csstwitter-bootstrapbootstrap-5

Answer №1

To prevent the content in the second row from being pushed down after displaying the accordion, it is advisable to avoid placing them on separate rows within the container. Instead, consider organizing your structure as follows:

<div class"row">
  <div class="col-8">
    <div>Some content here</div>
    <div>Some content here</div>
  </div>
  <div class="col-4">
    <div>Some content here</div>
    <div>Some content here</div>
  </div>
</div>

Note that unnecessary structures like the following have been removed:

<div class="row">
  <div class="col-12">
    Some content here
  </div>
</div>

It's essential to use flexbox effectively while implementing this layout.

Feel free to run the code snippet provided below on a full page for a practical demonstration. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed858883989b9c9e918fa180bc818d95868894">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <div class="mt-4 p-5 bg-white rounded-3">
          <span class="fw-1">Row 1 Column 1</span>
          <hr class="my-4">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
        </div>
        <div class="mt-4 p-5 bg-white rounded-3">
          <span class="fw-1">Row 2 Column 1</span>
          <hr class="my-4">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="mt-4 p-5 bg-white rounded-3">
          R1 C2
          <div class="accordion accordion-flush" id="accordionFlushExample">
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingOne">
                <button class="accordion-button collapsed" type="button"
                        data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
                        aria-expanded="false" aria-controls="flush-collapseOne">
                  Accordion Item #1
                </button>
              </h2>
              <div id="flush-collapseOne" class="accordion-collapse collapse"
                   aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Photo Editing,.</div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingTwo">
                <button class="accordion-button collapsed" type="button"
                        data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
                        aria-expanded="false" aria-controls="flush-collapseTwo">
                  Accordion Item #2
                </button>
              </h2>
              <div id="flush-collapseTwo" class="accordion-collapse collapse"
                   aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">
                  Placeholder content for this accordion, which is
                  intended to demonstrate the <code>.accordion-flush</code> class. This is the
                  second item's accordion body. Let's imagine this being filled with some
                  actual content.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingThree">
                <button class="accordion-button collapsed" type="button"
                        data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
                        aria-expanded="false" aria-controls="flush-collapseThree">
                  Accordion Item #3
                </button>
              </h2>
              <div id="flush-collapseThree" class="accordion-collapse collapse"
                   aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">
                  Placeholder content for this accordion, which is
                  intended to demonstrate the <code>.accordion-flush</code> class. This is the
                  third item's accordion body. Nothing more exciting happening here in terms
                  of content, but just filling up the space to make it look, at least at first
                  glance, a bit more representative of how this would look in a real-world
                  application.
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-4 p-5 bg-white rounded-3">
          R2 C2
          <hr class="my-4">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
        </div>
      </div>
    </div>
    <footer class="pt-3 mt-4 text-muted border-top">
      © 2023
    </footer>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9499949f98fff9f691bfbbbfa7baa7b9af929ea6afb7e7">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
          crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72b1bdb0b7df9da3bfb4beb7fdadada3abba86bab6bebc86aeaa90bd"/>[email protected]</a>/dist/umd/popper.min.js"
          integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
          crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24515252595f59555a535354721c415b57">[email protected]</a>/dist/js/bootstrap.min.js"
          integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
          crossorigin="anonymous"></script>
</body>
</html>

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

The image fails to reach full width and does not expand correctly when I zoom out

At the bottom of my website, I have a bar for displaying certain content. However, I am facing an issue where the bar is not extending to cover the entire screen width despite having code in place to do so. The HTML code is quite basic: <div class="bo ...

htmlcssimagewidth

Utilizing jQuery time intervals within a jQuery click event: A step-by-step guide

For my dropdown menu project, I am facing an issue where the menu bar is not reappearing after collapsing the dropdown. It seems that the jQuery function responsible for toggling classes within a time interval is not executing properly. Specifically, the " ...

javascriptjqueryhtmlcss

What is the best way to make sure the embedded object fills the entire height of the container div?

I am currently using angular2/4 along with angular-material (https://material.angular.io/). My challenge lies in trying to embed a PDF within it. The issue I am facing is that the height of the PDF object seems to be small and doesn't fully occupy the ...

htmlcssangular

Why is the toggle list not functioning properly following the JSON data load?

I attempted to create a color system management, but as a beginner, I find it quite challenging! My issue is: When I load my HTML page, everything works fine. However, when I click on the "li" element to load JSON, all my toggle elements stop working!!! ...

javascriptjqueryhtmlcssjson

Why is the toggle functioning properly?

After much trial and error, I finally got my toggle functionality working with the following code. I was surprised that toggling the width actually changed the display settings, but it did the trick! It's still a bit mysterious to me how it all works ...

jqueryhtmlcss

Steer clear of moving elements around in d-flex or similar layouts

I am looking to arrange elements in a linear manner with equal spacing between them. While I can achieve this using Bootstrap 5 flex, the spacing changes when the text length of a button is altered. https://i.sstatic.net/kVc8l.png For example, the element ...

htmlcsstwitter-bootstrapbootstrap-5

Continuously refresh the if/else statement

I'm currently facing an issue with my jQuery code regarding a responsive navigation bar. I am trying to add a class called 'mobile' to the navigation bar when it reaches close to the logo. Below is the snippet of my code: function respon ...

javascriptjquerytwitter-bootstrap

Having trouble showcasing two unordered lists side by side on a single line

In my Magento Go store, I am showcasing products using CSS only. Currently, the loop is set to display 5 products in a row and then close the <ul> tag. However, if there are more products, a new <ul> element is created. My fixed width only allo ...

htmlcss

Is there a way to include captions within a bootstrap carousel-item without compromising the responsiveness and alignment of the indicators and controls?

<div id="myUniqueCarousel" className="carousel slide" data-bs-ride="true"> <div className="unique-carousel-indicators"> <button type="button" data-bs-target="#myUniqueCarousel" data-bs-slide-to="0" className="active" aria-curre ...

htmlcssbootstrap-5

Encountering a challenge when trying to showcase data from a saved .txt file within a bootstrap card

I encountered a minor problem in my PHP project. I developed a small application that allows users to fill out form fields and stores all the data in a .txt file. Simultaneously, the entered data is displayed below the form with specific details such as fi ...

phphtmlbootstrap-5

Disable the scroll bar on a bootstrap modal

<span class="education"style="font-size:170%;line-height:150%;">&nbsp;Education <br> <small style=" color:gray;font-size:60%;">&nbsp; Blue Ridge University,2012-2014 </small> <br> <sma ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Is there a way to create a universal script that works for all modal windows?

I have a dozen images on the page, each opening a modal when clicked. Currently, I've created a separate script for each modal. How can I consolidate these scripts into one for all modals? <!-- 1 Modal--> <div class="gallery_product col-lg-3 ...

javascripthtmlcssbootstrap-4bootstrap-modal

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...

javascriptcssreactjsuser-interfacematerial-ui

Guide to updating the value of an input field with Selenium in Python

I have an input element that I need to clear its current value and input a new one. The HTML structure is as follows: <input class="input-mini" type="text" name="daterangepicker_start" value=""> To locate this element, I used the following code: ...

pythoncssselenium

Display or conceal various content within div elements using multiple buttons

I have a set of 5 image buttons, each meant to trigger different content within a div. When the page loads, there should be default content displayed in the div that gets replaced by the content of the button clicked. The previously displayed content shoul ...

javascriptjqueryhtmlcssshow

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

javascriptcssangularjsjquery-mobile

How to utilize CSS variable references across different files in React?

In my React project, I have integrated multiple variables that I would like to be able to access from other CSS files in order to maintain a unified codebase for specific UI configurations such as colors and buttons. However, I am uncertain whether these ...

cssreactjs

What could be the reason for the absence of the CSS destination folder being generated by

My colleague has the exact same code and can run gulp without any issues, but I'm struggling to compile the css files using Gulp. Gulp isn't creating the css destination file or the css files themselves. However, it works perfectly fine for build ...

cssnode.jsnpmgulp

Why isn't my CSS float behaving as I anticipated?

I'm currently working on a website and facing an issue. The CSS Float property is not behaving as expected. Here is my HTML Code: <div class="slider-menu"> <div class="slider-box"> <img src="agac.jpg"> & ...

htmlcss

I'm having trouble getting the height of my div element to render in percentage (%) in the CSS. Can anyone assist me with this issue?

When I try to set the "height" CSS property in percentage (%) for a div element, the HTML doesn't render anything. However, if I set the "height" CSS property using length values such as px or cm, it works perfectly fine. Can anyone provide assistance ...

htmlcss