Why are my columns overlapping in Bootstrap Grid only when viewed on smaller screens?

Creating a Dashboard with Bootstrap 4.1

I'm attempting to design a dashboard using Bootstrap 4.1. However, when I resize my browser window to a smaller view, the divs are not stacking on top of each other as expected. I've tried adjusting the placement of <div class="container">, but it doesn't seem to have any effect.

If you run the code snippet, you may notice them stacked but overlapping. Alternatively, you can view a screenshot of the overlap issue here: Overlapping IMGUR

Here's how it appears on large and medium screens for comparison: Not Overlapping IMGUR

Could the problem be related to the height settings? It seems like the elements are not respecting the specified 100px height when in a larger screen width.

htmlcssbootstrap-4

Answer №1

Replace height: 100px with min-height: 100px. This will ensure that your rows can expand beyond 100px when the columns stack on smaller screens.

If you set your rows to height: 100px, they won't be able to grow when the columns stack, potentially causing overlap issues. By using min-height: 100px, you allow for dynamic resizing based on content.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">

  <title>Parking Spaces</title>
</head>

<body>
<!-- Space Display-->
  <div style="margin-top:20px;"></div>
  ...
</body>

</html>

Answer №2

To fix the issue, simply eliminate the height attribute from your code

<div class="container" style="height: 200px">

should be 

<div class="container">

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

Element failing to adhere to CSS grid layout

I am currently working with grid layout and aiming to position the following content at the bottom and center, but it is currently aligning to the left: .body { margin: 0; background-color: rgb(255, 237, 237); display: grid; grid-template-rows: ...

htmlcss

How can I use Angular to automatically check a checkbox while a page is loading?

I have a list of checkboxes, and based on the selected checkbox, offers are displayed. Everything is working fine as expected. Below is the code snippet I have implemented: function Test1Controller($scope) { var serverData = ["Samsung Galaxy Note ...

javascriptjqueryhtmlangularjscheckbox

Large header picture

Instead of tiptoeing around the issue, let me just be blunt and ask: I'm curious about how they created this image header. Even after removing all javascript code and css using Chrome's property inspector, the image continued to stretch. The sty ...

javascriptcssfullscreen

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Hello there! I've integrated full calendar into my Angular project and I'm facing a challenge. I want to restrict users from defining the duration of an event by holding click on an empty schedule in the weekly calendar, where each date interval ...

javascripthtmlangulartypescriptfullcalendar

Leverage nearby data using MediaSource

I am currently working on creating a local video player using nwjs (node-webkit). I have successfully played local files by setting their path as the src attribute of the video element. Now, I want to explore using MediaSource and potentially URL.createObj ...

javascripthtmlnode-webkit

Avoid creating a line break directly after the header, however allow for a line break

I find myself in a scenario where I require a paragraph that has a specific format: An Emphasized Title Some relevant information regarding the subject... I am looking to insert a new line before the title, ensuring it seamlessly integrates with the re ...

htmlcssheaderjekyll

Tips for inserting text within HTML tags using Python WebDriver

What's the best way to insert text within an HTML tag using Python WebDriver? <!--html cod--> <span class="py"></span> <!--I need to add text between span tags using Python WebDriver, similar to this example--> <span clas ...

pythonhtmlpython-2.7python-3.xselenium-webdriver

Next and previous buttons on Bootstrap carousel are not functioning properly with certain pop-up modals in a React application

Bootstrap Carousel Implementation for Viewing Photo Groups Utilizing a Bootstrap Carousel, I have created a feature to display different groups of photos. Each group of photos can be clicked on to open a Modal, showcasing all the images in a carousel form ...

javascriptreactjstypescriptbootstrap-4carousel

Tips for creating a table with HTML

https://i.sstatic.net/f2nTP.png I'm looking to create a table that resembles the image above. If anyone has suggestions or ideas on how I can achieve this design, please feel free to share. Thank you, Ashraf ...

html

Dealing with problematic hover behaviors in Cypress: A guide

I encountered an issue with Cypress hover functionality while trying to access a sub menu that appears after hovering over a main menu item. The error message I received was This element is not visible because it has CSS property: position: fixed and it&ap ...

javascriptjquerycsscypress

Having difficulties customizing font colors in Django

I've created a Django code and I'm trying to set the font color of an HTML page to red. Below is the structure of the HTML file: {% load static %} <!DOCTYPE html> <html> <head> <link rel="stylesheet" ty ...

pythonhtmlcssdjango

Using JQuery to gather form (excluding html form) information and transfer it to a different destination

Forgive my lack of expertise in this matter. We operate a website with a straightforward slide-in form that appears when clicked by the user. This form is used to request a phone call back from us, and collects the user's name, email, phone number, a ...

javascriptphpjqueryhtmlforms

Changing the color of the collapsed icon for accordion buttons in Bootstrap 5

I've been attempting to alter the color of Bootstrap 5's accordion's "accordion-button" when it's collapsed. I tested the following code, but it only changes the background and not the icon color of the button. .accordion-but ...

cssbootstrap-5bootstrap-icons

Retrieving Data from Database on the Current Page

Struggling with fetching data from a MySQL database using PHP search methods and displaying the results on the same page? Here's how you can achieve it. This HTML Script: <html> <head> <title>Digital Library</title> </head ...

phphtmlmysql

css code for centering image on hover using thumbnail

I'm looking to create an interactive feature that pops up images in the center of the screen when hovering over thumbnails. Each thumbnail should display a div containing text and an image, perfectly centered on the screen regardless of resolution. & ...

jquerycsshtmlthumbnailscenter

Error: webpack is failing to load the style and CSS loaders

I'm currently experimenting with the FullCalendar plugin from fullcalendar.io. They recommended using Webpack as a build system, which is new to me. I managed to set up the calendar functionality after some research, but I'm facing issues with th ...

javascriptjavacssnpmwebpack

Prevent the SVG mouseclick event with CSS styling

Is it possible to prevent clicking on an SVG element using CSS? .disabled{ pointer-events: none; } After selecting the SVG element with $(".dasvg"), the console confirms the selection: [ <svg width=​"500" height=​"500" class=​"dasvg">​ ...

jquerycsssvg

There is a table equipped with two buttons. When using jQuery-ajax, rather than replacing the <tbody> of the <table>, it redirects the browser to the specified ajax URL

I initially simplified my code to troubleshoot, but I now realize I need to show the unsimplified code to pinpoint the issue. I am replacing the HTML and JavaScript with the "full version" and have updated my description with more details. I have a table ...

javascriptjqueryajaxhtml

Is it necessary to convert PSD files to HTML prior to developing Django templates?

If you want to transform a well-designed PSD file into an attractive website, using a PSD to HTML service may be the way to go. When it comes to a Django site like mine, multiple templates are usually needed to create various sections of the web pages dyn ...

htmldjangodjango-templates

Sleek dialog sliding animation with Svelte

I'm struggling with a svelte component that I have and I'm trying to implement a slide down animation when it closes. The slide up animation is functioning correctly, but for some reason the slide down animation is not working. Does anyone have a ...

javascripthtmlcsssvelte