As the screen width shrinks, I've noticed that my grid system in HTML using Bootstrap starts to glitch

Why is my row going onto a second line when I shrink the width?

Here is a screenshot of the issue.

I am currently using bootstrap 5 for this and I am unsure how to fix it. Below is the code snippet:

Current Screenshot

Below is the desired look on mobile devices:

Desired 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>
htmlcssbootstrap-5

Answer №1

If you want a more flexible layout, consider using flexbox classes instead of traditional rows and columns.

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

UPDATE:

To control the margin, add a class to the parent container in HTML and use CSS for styling.

<div class="d-flex flex-nowrap justify-content-between main">
 ...
</div>

In your CSS file:

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

Answer №2

Of course! To adjust the margin of the parent container, simply assign a class to it and use CSS to customize it.

<div class="d-flex flex-nowrap justify-content-between container">
 ...
</div>

Then, in your CSS file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending emails to multiple groups in Opencart can be easily achieved with the

I am interested in customizing Opencart's admin panel to allow for the selection of multiple customer groups when sending emails. However, I am unsure of where and how to make these modifications as I am relatively new to this type of task. https://i ...

phphtmlcssopencart

Encountering a problem with quintus-all.js and need assistance

I am having an issue with my animation code. Can someone help me troubleshoot it? window.addEventListener('load', function(){ var Q =window.Q= Quintus().include("Sprites, Scenes,2D, Anim").setup({maximize:true}); Q.Sprite.extend(&apos ...

htmlgame-engine

Prevented a frame from "https://googleads.g.doubleclick.net" from accessing another frame

After placing ads on my website, they are displaying properly. However, I am receiving an error repeatedly in the console when the page loads: A frame from origin "" is being blocked from accessing a frame with origin "". The requesting frame has an "ht ...

javascripthtmlcssadsense

Anime.js: Grid layout causing issues with displaying simple text animations

I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...

javascripthtmlcssanime.js

javascript Href and onclick malfunctioning

I am encountering an issue with a form on my webpage: <form name="myForm" id="myForm" method="post" action="someUrl.php"> ... </form> There is a div outside of this form which contains an anchor link: <a href="anotherUrl.php" onclick="doc ...

javascriptphphtml

Tables lacking borders where rowspans are present

I'm currently using Firefox and have the following code snippet: html, body { width: 100%; height: 100%; } * { box-sizing: border-box; } body { padding-left: 20px; padding-right: 20px; } .visitentabelle { border: 2px solid black; ...

htmlcss

What causes the difference in output between passing p=3+3 using GET, which results in 3 3, and using POST, which results in

It's really quite puzzling - I've noticed that sending the same parameter through various methods yields different results. ...

phphtmlformspostget

Load the flexslider once the fancybox container is opened

In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a ...

javascriptjqueryhtmlfancyboxflexslider

Is there a way to have the submit button show the uploaded file on the same page, without redirecting to a new

My code seems to be malfunctioning and I suspect it's due to some errors. I'm attempting to have the submit button display an image of a molecule using JSmol. Can anyone lend a hand with this? <script> var Molecule = { width: 550, ...

javascriptjqueryhtmlajax

Ensuring a logo remains centered and stable even when the browser is resized

How can I ensure that this logo remains fixed at the center top of the page, without moving as the browser size changes? I want the logo to maintain its position and not recenter itself when the browser is resized. Below is my current CSS CSS #logo { p ...

htmlcss

Updating div visibility based on form content in PHP

I am struggling to find a way to filter a page filled with divs based on form input to determine whether they should be displayed or not. The layout is akin to a collection of articles, where each div showcases an image and some text that links to the comp ...

phpjqueryhtmlcss

What is the best way to ensure items are aligned to the top of the navbar as a picture is enlarged?

I have searched through various similar questions, but none of them have provided a solution to my specific issue. I have attempted multiple suggestions, but none have been successful. (I am working with bootstrap4) Here is the html code I am using: < ...

htmlcssbootstrap-4

Modal overlays should consistently appear behind the loading animation

When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...

css

What is the best way to send an email with a randomly generated HTML output using a <button>?

I am currently working on a feature where a random HTML output is sent to me via email whenever a user clicks on a button on the website page. The user receives a code when they click the button, and I want that code to be emailed to my address automatical ...

javascriptphphtmlemailrandom

The absolute CSS dropdown isn't visible, but the relative one is displaying properly

Currently, I am in the process of creating a CSS dropdown menu. The main dropdown (the first ul) has a position set to relative, while the second dropdown has its position as absolute. However, using absolute causes this issue: On the other hand, settin ...

htmlcss

My elements are overlapping one another

I've encountered an issue with my website layout - the left-menu div goes through the footer instead of pushing it down. I've tried using clear:both; and overflow:auto, but nothing seems to work. Can anyone help me figure out what's wrong he ...

htmlcss

Step-by-step guide for setting up CodeMirror

I'm feeling a bit lost with what to do next: <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { mode: "text/html" }); ...

javascripthtmlcodemirror

Break apart PDFs into individual images or convert to HTML

I'm currently working on a project that requires the development of a unique webtool. The purpose of this tool is to allow users to effortlessly upload their PDF documents, which will then be displayed in a browser with an engaging page flip effect ut ...

phpjqueryhtmlpdf

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Switching minimum and maximum input values based on a specific condition: A step-by-step guide

I am looking for a way to reverse the minimum and maximum values of two input elements that I have defined. Is there a way to achieve this using HTML or JavaScript (Angular)? Here is an example of what I am trying to do: <label> Width: < ...

javascriptangularjshtmlinput