Bootstrap 5 - centering "padding" both internally and externally within the accordion

Need help aligning three Boostrap 5 grids:

  • Header outside of accordion
  • Overview in accordion header
  • Details in accordion body

The accordion header has margins and padding on the left and right, and the collapse icon also occupies some space.

I want the header and details grids to have the same "margins" as the overview grid.

I attempted to add a column with padding like "ps-4 pe-4", but I can only achieve approximate alignment at best.

.colored-bg1 {
  background: lightgray
}

.colored-bg2 {
  background: lightyellow
}
<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186d7668766a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Bootsrap 5 accordion</title>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-4 colored-bg1">Column 1 header</div>
        <div class="col-4 colored-bg2">Column 2 header</div>
        <div class="col-4 colored-bg1">Column 3 header</div>
      </div>
    </div>
    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <div class="accordion-header" id="headingOne">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <div class="container-fluid">
              <div class="row">
                <div class="col-4 colored-bg1">Column 1 overview</div>
                <div class="col-4 colored-bg2">Column 2 overview</div>
                <div class="col-4 colored-bg1">Column 3 overview</div>
              </div>
            </div>
          </button>
        </div>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <div class="container-fluid">
              <div class="row">
                <div class="col-4 colored-bg1">Column 1 details</div>
                <div class="col-4 colored-bg2">Column 2 details</div>
                <div class="col-4 colored-bg1">Column 3 details</div>
              </div>
               <div class="row">
                <div class="col-4 colored-bg1">Column 1 details</div>
                <div class="col-4 colored-bg2">Column 2 details</div>
                <div class="col-4 colored-bg1">Column 3 details</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d4658465a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>

</html>

javascripthtmlcssbootstrap-5

Answer №1

In the summary and specifics section, the padding is already consistent. To maintain uniformity, enclose the heading above the accordion in a wrapper div and apply the same padding as the summary and specifics section, which is padding: 1rem 1.25rem;

<div style="padding: 1rem 1.15rem;">
    <div class="container-fluid">
          <div class="row">
            <div class="col-4 colored-bg1">Column 1 title</div>
            <div class="col-4 colored-bg2">Column 2 title</div>
            <div class="col-4 colored-bg1">Column 3 title</div>
          </div>
        </div>
    </div>

<!-- end snippet -->

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 <img> element is able to fill an entire div while maintaining its original aspect ratio

I am currently facing a challenge with implementing a responsive gallery slider in Bootstrap. In order to achieve responsiveness, I need to use properties like max-height. The issue arises from the fact that the images in the gallery can vary in size and ...

htmlcsstwitter-bootstrap

Encountering additional backslashes ("") in each slash within the JSON response received from Laravel AJAX

I have been working on my Laravel app and attempting to make an ajax call. However, I am encountering an issue where there is one extra slash being added, whether it's a backslash or a forward slash. Can someone please explain why this is happening an ...

htmljsonajaxlaravel

Could anyone explain to me why the "thumbnails" in my code link are not aligning in a row format as intended?

Why are my "thumbnails" not aligning correctly in the row format I want on this code link? <div class="row"> <div class= "col-md-6"> <div class="thumbnail"> <a target="_blank" href="http://codepen.io/ ...

html

Get detailed coverage reports using Istanbul JS, Vue JS, Vue CLI, Cypress end-to-end tests, and Typescript, focusing on specific files for analysis

I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the docum ...

javascripttypescriptvue.jscypressistanbul

Comparing NodeIntegration, Preload Script, and IPC in Electron Framework

After thoroughly going through Electron's explanations on context isolation, IPC, and security, as well as delving into discussions like this thread about nodeIntegration and this post regarding preload.js, it's clear that there are various appro ...

javascriptnode.jsnpmelectronipc

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

jsonhtmlcanvas

The animation feature on the slideshow is dysfunctional

For this Vue component, I attempted to create a slideshow. The process is as follows: 1) Creating an array of all image sources to be included (array: pictures) 2) Initializing a variable(Count) to 0, starting from the beginning. 3) Adding v-bind:src=" ...

javascripthtmlcssanimationvue.js

switch the anchor tag value and send it along with the URL

I am trying to update the value of "trans" in the Ajax URL based on a toggle between on and off values. However, despite successfully toggling the text, the URL parameter does not change accordingly. Can anyone offer any assistance? I currently have to rel ...

javascriptjqueryhtmlajax

PHP live data updating: stay current with real-time data updates

I have a functional API that is currently static, but I want it to update periodically and display live data in my HTML code. I'm not sure where to begin. Should I start with Javascript or Ajax? Any guidance would be greatly appreciated. This is my ...

javascriptphpajaxapi

Adjust the width of the dropdown menu to match the text input field using jQuery

Struggling with jquery-mobile to collect user information, I am facing an issue aligning the width of my select menu with the text input fields. Despite successfully matching the background and border colors of the select menu with the text input fields, ...

jqueryhtmlcssjquery-mobile

Missing HTML escape sequences following conversion to a string

The Android test was successfully run using the following code: public static void test() { String text="<html>" + "<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=us-ascii\" /> ...

javaandroidhtmldom

Implementing a codeigniter delete confirmation box with Javascript

I have tried numerous solutions on this site, but nothing seems to be working for me. I am trying to implement a pop-up window confirmation before deleting my data. Here is the code I am using: <a href="<?php echo site_url('admin/barang/delet ...

javascriptphpjquerycodeigniter

Add space between the first and second rows in the grid gallery display

.gallery{ display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) ); } view grid image here Could you assist me with identifying the spacing issue between the first and second ...

csscss-grid

Transferring information from parent page to child page using Angular version 8.2.4

As a newcomer to Angular, I am facing a challenge in sharing data between pages upon loading the main page. The structure involves using dynamic forms to generate dynamic pages within the main page. However, when trying to pass data from the main page to t ...

javascriptangulartypescript

Determine the width of a div by utilizing SASS and following a series of incremental steps

Let's discuss the current scenario: I have a parent div that consists of multiple child elements which vary in number. (2, 3, 4) The goal is to determine the appropriate width for each step element dynamically: For 2 steps: 50% For 3 steps: 33.3% ...

csssass

Maximizing the functionality of PHP switch to create clickable list items

I have successfully created a simple switch for my website, but I am encountering an issue with clickable list items. The concept is that when I click on any of the list items, the switch should display the appropriate greeting (whether it's Night or ...

phphtmlswitch-statement

Revising a value that is influenced by the fluctuations of another value, and conversely

Currently facing a tricky issue with interdependent values in my code that I can't seem to resolve online. The problem lies in the fact that one value is affected by changes in another value, and vice versa. Here is a snippet of my code: <div cla ...

htmlangularjsangularjs-ng-change

Utilizing jQuery to submit the form

After clicking the search icon, it displays an alert with the message ok, but not h. Based on the code snippet below, it is intended to display alerts for both ok and h. <?php if(isset($_POST['search'])){ echo "<script type='text/ ...

javascriptjqueryclick

What is the process of dynamically altering the content inside a td element?

Is there a way to dynamically change the content of a td based on the state of a checkbox? If the checkbox is unchecked, the td should remain plain, but if checked, I want the text to have a specific style: b style="font-family:Tahoma;font-size:8pt;color: ...

c#asp.nethtml

What is the best way to invoke a function using a string as its name?

In my grid configuration function, I am assigning column definitions. One key, valueGetter, requires a function to be called to fetch the column value. The issue I am encountering is that the API returns this value as a string. When I try to set it using ...

javascriptnode.jsangular