Bootstrap 5 - align "margins" inside and outside of accordion-CodePudding

I am trying to align three Boostrap 5 grids:

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

The accordion header has a left and right margin/padding and the collapse icon also takes up some space.

I would like to the header and details grids to use the same "margins" as the overview grid.

I tried to add a column with padding like "ps-4 pe-4", but I at best get an approximate alignment

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

  <body>
    <div >
      <div >
        <div >Column 1 header</div>
        <div >Column 2 header</div>
        <div >Column 3 header</div>
      </div>
    </div>
    <div  id="accordionExample">
      <div >
        <div  id="headingOne">
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <div >
              <div >
                <div >Column 1 overview</div>
                <div >Column 2 overview</div>
                <div >Column 3 overview</div>
              </div>
            </div>
          </button>
        </div>
        <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionExample">
          <div >
            <div >
              <div >
                <div >Column 1 details</div>
                <div >Column 2 details</div>
                <div >Column 3 details</div>
              </div>
               <div >
                <div >Column 1 details</div>
                <div >Column 2 details</div>
                <div >Column 3 details</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>

</html>

CodePudding user response：

The overview and details section is already using the same padding. Add a wrapper div around the header above the accordion and give it the same padding as the overview and details section, i.e padding: 1rem 1.25rem;

<div style="padding: 1rem 1.15rem;">
    <div >
          <div >
            <div >Column 1 header</div>
            <div >Column 2 header</div>
            <div >Column 3 header</div>
          </div>
        </div>
    </div>

<!-- end snippet -->

CodePudding user response：

You need to add a little bit of CSS.

.colored-bg1 {
  background: lightgray
}

.colored-bg2 {
  background: lightyellow
}

.accordion-button {
  padding: 0 !important;
}

.accordion-body {
  padding: 0 !important;
}

.row {
  width: 100vw;
}

.accordion-button::after {
  margin-left: -1.25rem !important;
}

.accordion-item {
  border: none !important;
}

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

<body>
  <div >
    <div >
      <div >Column 1 header</div>
      <div >Column 2 header</div>
      <div >Column 3 header</div>
    </div>
  </div>
  <div  id="accordionExample">
    <div >
      <div  id="headingOne">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <div >
              <div >
                <div >Column 1 overview</div>
                <div >Column 2 overview</div>
                <div >Column 3 overview</div>
              </div>
            </div>
          </button>
      </div>
      <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div >
          <div >
            <div >
              <div >Column 1 details</div>
              <div >Column 2 details</div>
              <div >Column 3 details</div>
            </div>
            <div >
              <div >Column 1 details</div>
              <div >Column 2 details</div>
              <div >Column 3 details</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

EDIT

.colored-bg1 {
  background: lightgray
}

.colored-bg2 {
  background: lightyellow
}

.accordion-button::after {
  margin-left: -1.25rem !important;
}

.accordion-item {
  border: none !important;
}

#header_row {
  padding: 1rem 1.25rem;
}

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

<body>
  <div >
    <div  id="header_row">
      <div >Column 1 header</div>
      <div >Column 2 header</div>
      <div >Column 3 header</div>
    </div>
  </div>
  <div  id="accordionExample">
    <div >
      <div  id="headingOne">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <div >
              <div >
                <div >Column 1 overview</div>
                <div >Column 2 overview</div>
                <div >Column 3 overview</div>
              </div>
            </div>
          </button>
      </div>
      <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div >
          <div >
            <div >
              <div >Column 1 details</div>
              <div >Column 2 details</div>
              <div >Column 3 details</div>
            </div>
            <div >
              <div >Column 1 details</div>
              <div >Column 2 details</div>
              <div >Column 3 details</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>