Nested Bootsrap Grid Padding Issue

Question

I am unable to get equal padding form custom nested grid.

In the below snippet I show you the desired grid. I am unable to add small gap of lets say 5px between all boxes. The issue is that if I change custom padding then I am not able to maintain the height of box 3 and 4 combined the same as the height of box 1/2. Can anyone suggest a good solution?

.box {
  border-radius:20px;
  border: 2px solid #000;
  height: 100px;
  vertical-align: middle;
  text-align: center;
  line-height: 100px;
}

.box2 {
  border-radius:20px;
  border: 2px solid #000;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  line-height: 50px;
}
.custom-padding{
  padding: 0px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6 box custom-padding">1</div>
  <div class="col-xs-3 box custom-padding">2</div>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-xs-12 box2 custom-padding">3</div>
      <div class="col-xs-12 box2 custom-padding">4</div>
     </div>
  </div>
</div>

score 0 · Answer 1 · answered Sep 02 '20 at 07:56

This can be done with a few changes to your code. Basically I've created an inner section to your divs. Creating the illusion of it being separated from each other, but they actually have a white border around them, and the inner div has the dark border.

.box {
  height: 100px;
  vertical-align: middle;
  text-align: center;
  line-height: 100px;
  border:5px solid #fff;
}

.box2 {  
  height: 50px;
  vertical-align: middle;
  text-align: center;
  line-height: 50px;
  position:relative;
  border:5px solid #fff;
}
.custom-padding{
  padding: 5px!important;
}
.inner{
  border: 2px solid #000;
  border-radius:20px;
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6 box custom-padding"><div class="inner">1</div></div>
  <div class="col-xs-3 box custom-padding"><div class="inner">2</div></div>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-xs-12 box2 custom-padding"><div class="inner">3</div></div>
      <div class="col-xs-12 box2 custom-padding"><div class="inner">4</div></div>
     </div>
  </div>
</div>

when adding position as absolute my boxes are disappearing as I have used zoom animations and all on thumbnails. I have used this code for the zoom effect: https://codepen.io/dwinnbrown/pen/kXEEAa — DadyByte, Sep 02 '20 at 19:35

MaxiGui · Answer 2 · 2020-09-02T07:44:47.560

You are using BS 3 and the class row does not include display:flex as BS 4.

So I just add style="display:flex" in your first div class="row" and and I also add margin auto to the class custom-padding.

DEMO WITH SPACE EVERY WHERE:

.box {
  border-radius:20px;
  border: 2px solid #000;
  height: 100px;
  vertical-align: middle;
  text-align: center;
  line-height: 100px;
}

.box2 {
  border-radius:20px;
  border: 2px solid #000;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  line-height: 50px;
}
.custom-padding{
  padding: 0px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="display:flex; max-width:100%; margin:0;" class="row">
  <div style="margin:0 5px 0 0;" class="col-xs-6 box custom-padding">1</div>
  <div style="margin:0 5px;" class="col-xs-3 box custom-padding">2</div>
  <div style="display:flex; flex-wrap:wrap; margin:0 0 0 5px; padding:0;" class="col-xs-3 row">
    <div style="margin-bottom:5px;" class="col-xs-12 box2 custom-padding">3</div>
    <div class="col-xs-12 box2 custom-padding">4</div>
  </div>
</div>

DEMO WITH SPACE EVERYWHERE and 3&4 next to each other

.box {
  border-radius:20px;
  border: 2px solid #000;
  height: 100px;
  vertical-align: middle;
  text-align: center;
  line-height: 100px;
}

.box2 {
  border-radius:20px;
  border: 2px solid #000;
  height: 100px;
  vertical-align: middle;
  text-align: center;
  line-height: 100px;
}
.custom-padding{
  padding: 0px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="display:flex; max-width:100%; margin:0;" class="row">
  <div style="margin:0 5px 0 0;" class="col-xs-6 box custom-padding">1</div>
  <div style="margin:0 5px;" class="col-xs-3 box custom-padding">2</div>
  <div style="display:flex; flex-wrap:wrap; margin:0 0 0 5px; padding:0 0 0 5px;" class="col-xs-3 row">
    <div style="margin:0 5px 0 -5px;" class="col-xs-6 box2 custom-padding">3</div>
    <div class="col-xs-6 box2 custom-padding">4</div>
  </div>
</div>

I did that. The problem in your answer is that there is no gap in 3 & 4. I want same gap which is between 1 & 2 to be between 3 & 4 — DadyByte, Sep 01 '20 at 12:15
I want equal space between all boxes. I am not able to bring the gap between 3&4 which exists in 1 & 2 in this answer — DadyByte, Sep 01 '20 at 13:17
@DadyByte But you want to have the 3&4 next to each other or as you posted ? Now you have equale space between 1 - 2 - 3&4 — MaxiGui, Sep 01 '20 at 13:30
yes, I want space between 3 and 4 equel to the gap in box 1 & 2. I can compromise with height of 3 and 4 to do the same. — DadyByte, Sep 02 '20 at 06:03
@DadyByte Here you have 2 snippets, there is space between all element, based on what I understand from your wish. I set all modification in style, after you can adapt that in classes how you wish — MaxiGui, Sep 02 '20 at 07:46

Nested Bootsrap Grid Padding Issue

2 Answers2