Bootsrap 5 grid problem, div escaping down-CodePudding

I have the following html codes.

<div style="height: 100px;" >1</div>
<div style="height: 100px;" >2</div>
<div style="height: 100px;" >3</div>
<div style="height: 100px;" >4</div>
<div style="height: 100px;" >5</div>
<div style="height: 100px;" >6</div>
<div style="height: 100px;" >7</div>

Naturally what I want is to see 2 divs side by side on the page. but the result is like this:

Second div in row escaping down. Is there something i missed like margins between divs etc.

I didn't know what to do

CodePudding user response：

I think this is because you haven't surrounded the columns with a container and row, like so:

<div >
  <div >
    <..... your columns here ....>
  </div>
</div>

It's these elements that make the Bootstrap columns responsive.

Columns always touch each other, and because you color their background the background colors also touch. With a bit of CSS you can prevent this:

.col-styling {
  height: 100px;
  margin-bottom: 1.5rem;
  background-color: green;
  background-clip: content-box;
}

Where this style is applied to each column. See: https://codepen.io/kikosoft/pen/VwBZWQK

It's the background-clip: content-box; that makes this possible. It causes the background not to be painted behind the padding border. A sometimes very useful CSS property.

This is not the normal solution for this when using Bootstrap. Normally you would not give a column a background color, the column is just a box in which you can put content. That content can have a background color, and if you give it a margin then the backgrounds won't touch. Like this:

<div >
  <div >
    <div >
      <div >1</div>
    </div>  
    <div >
      <div >2</div>
    </div>  
    <div >
      <div >3</div>
    </div>  
    <div >
      <div >4</div>
    </div>  
    <div >
      <div >5</div>
    </div>  
    <div >
      <div >6</div>
    </div>  
    <div >
      <div >7</div>
    </div>  
  </div>
</div>

And then style the content like this:

.content-styling {
  height: 100px;
  margin-bottom: 1.5rem;
  background-color: green;
}

See: https://codepen.io/kikosoft/pen/RwBbMoR

CodePudding user response：

You must always enclose columns in row class in bootstrap following should work.

    <div >       
<div style="height: 100px;" >1</div>
<div style="height: 100px;" >2</div>
<div style="height: 100px;" >3</div>
<div style="height: 100px;" >4</div>
<div style="height: 100px;" >5</div>
<div style="height: 100px;" >6</div>
<div style="height: 100px;" >7</div>
    </div>

It's more efficient to use padding.

Remember that margin being outside always adds to the sizing of container so col-6 class now has extra margin left and right thus increasing it's size and overflowing to next line.

Padding is always inset so it doesn't affects the flex sizing being implemented by col class.

try this code below

    <div >       
<div >
    <div >1</div>
</div>
<div >
    <div >2</div>
</div>
<div >
    <div >3</div>
</div>
<div >
    <div >4</div>
</div>
<div >
    <div >5</div>
</div>
<div >
    <div >6</div>
</div>
    </div>

.inner-box{
    height: 100px;
}