Inter-column padding in Bootstrap 4 without side margins

Question

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

user_12352865 · Answer

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

For example,


  Box B


  Box C


  Box D


  Box E

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

user_16496357 · Answer

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

Inter-column padding in Bootstrap 4 without side margins

2 Answers