Issue
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 class="container-fluid fixed-bottom " style="margin-bottom: 16px;">
<div class="row align-items-center">
<div class="col" >
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/business.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">Business</p>
</div>
</div>
<div class="col">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/calculator.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">Calculator</p>
</div>
</div>
<div class="col">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/oogPermits.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">OOG Permits</p>
</div>
</div>
<div class="col">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/services.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">Services</p>
</div>
</div>
<div class="col">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/career.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">Career</p>
</div>
</div>
</div>
</div>
Solution
Instead of using rows and columns, i recommend using the flexbox classes
<div class="container">
<div class="d-flex flex-nowrap justify-content-between">
<div>
<img class="img-fluid bottomIcon" src="/assets/business.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">Business</p>
</div>
<div>
<img class="img-fluid bottomIcon" src="/assets/calculator.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">Calculator</p>
</div>
<div>
<img class="img-fluid bottomIcon" src="/assets/oogPermits.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">OOG Permits</p>
</div>
<div>
<img class="img-fluid bottomIcon" src="/assets/services.png" style="max-width:56px;" />
<p class="bottomText" style="color: white;">Services</p>
</div>
<div>
<img class="img-fluid bottomIcon" src="/assets/career.png" style="max-width:56px;" />
<p class="bottomText" 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 class="d-flex flex-nowrap justify-content-between main">
...
</div>
then in your css :
@media screen and (min-width:998px){
.main {
margin: 196px;
}
}
Answered By - Axel Ilali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.