Why my row getting second line, while shrinkering the width.

Here is the screen shot.

I am using bootstrap 5 for this, and dont know how to fix it, here is my code.

How it is right now ScreenShot

Here is the screenshot how I want this to look like on mobiles.

How this has to look like Screenshot

<div  style="margin-bottom: 16px;">
  <div >
    <div  >
      <div >
        <img  src="/assets/business.png" style="max-width:56px;" />
        <p   style="color: white;">Business</p>
      </div>
    </div>
    <div >
      <div >
        <img  src="/assets/calculator.png" style="max-width:56px;" />
        <p   style="color: white;">Calculator</p>
      </div>
    </div>
    <div >
      <div >
        <img  src="/assets/oogPermits.png" style="max-width:56px;" />
        <p   style="color: white;">OOG Permits</p>
      </div>
    </div>
    <div >
      <div >
        <img  src="/assets/services.png" style="max-width:56px;" />
        <p   style="color: white;">Services</p>
      </div>
    </div>
    <div >
      <div >
        <img  src="/assets/career.png" style="max-width:56px;" />
        <p  style="color: white;">Career</p>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Instead of using rows and columns, i recommend using the flexbox classes

<div >
 <div >

  <div>
   <img  src="/assets/business.png" style="max-width:56px;" />
   <p   style="color: white;">Business</p>
  </div>

  <div>
   <img  src="/assets/calculator.png" style="max-width:56px;" />
   <p   style="color: white;">Calculator</p>
  </div>

  <div>
   <img  src="/assets/oogPermits.png" style="max-width:56px;" />
   <p   style="color: white;">OOG Permits</p>
  </div>

  <div>
   <img  src="/assets/services.png" style="max-width:56px;" />
   <p   style="color: white;">Services</p>
  </div>

  <div>
   <img  src="/assets/career.png" style="max-width:56px;" />
   <p  style="color: white;">Career</p>
  </div>

 </div>
</div>

EDIT:

Sure. You can add a class to the parent container and control the margin with css.

<div >
 ...
</div>

then in your css :

@media screen and (min-width:998px){
 .main {
  margin: 196px;
 }
}

CodePudding user response：

Sure. You can add a class to the parent container and control the margin with css.

<div >
 ...
</div>

then in your css :

@media screen and (min-width:998px){
 .main {
  margin: 196px;
 }
}