Inter-column padding in Bootstrap 4 without side margins-CodePudding

I'm using Bootstrap 4.1. I'd like to have a grid of cells (Box A-E) with some spacing in between them. If I set padding on each column, I also get padding on the left and right side that breaks alignment with other elements; I would like Box A and Box D to align with the left edge of Top Box, for example.

The documentation talks about using a negative margin to offset this but I couldn't figure out where to put it.

The set of boxes is dynamic (there could be dozens) and I'd like to apply consistent styling to all of them, rather than make modifications to specific boxes.

I also want to avoid making modifications to Top Box, which is a stand-in for many existing UI elements in my real page that cannot easily be changed.

Here's a JSFiddle: https://jsfiddle.net/u5094cjb/2/

body {
  margin: 1rem;
}

.box {
  border: 1px solid black;
  background-color: white;
  margin-bottom: 0.1rem;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<div >

  <!-- ideally don't change this part --> 
  <div >
    <div >
      <div >Top Box</div>
    </div>
  </div>


  <!-- change this part only -->
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >Box A</div>
          </div>
          <div >
            <div >Box B</div>
          </div>
          <div >
            <div >Box C</div>
          </div>
          <div >
            <div >Box D</div>
          </div>
          <div >
            <div >Box E</div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>

CodePudding user response：

For what you're trying to accomplish it seems like you're using a bit "too much" code. I cleaned it up a bit so now that you only have two rows and added px-1 to your first col

body {
  margin: 1rem;
}

.box {
  border: 1px solid black;
  background-color: white;
  margin-bottom: 0.1rem;
}

<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div >
   <div >
        <div >
            <div >Top Box</div>
        </div>
    </div>
</div>
<div >
    <div >
        <div >
            <div >Box A</div>
        </div>
        <div >
            <div >Box B</div>
        </div>
        <div >
            <div >Box C</div>
        </div>
        <div >
            <div >Box D</div>
        </div>
        <div >
            <div >Box E</div>
        </div>
    </div>
</div>

CodePudding user response：

Use the Bootstrap classes pr-1 & pl-0 instead of px-1 to Box A and Box D

For example,

<div >
  <div >Box B</div>
</div>
<div >
  <div >Box C</div>
</div>
<div >
  <div >Box D</div>
</div>
<div >
  <div >Box E</div>
</div>

Fiddle: https://jsfiddle.net/kongallis/cebqw7y8/2/