What causes the vertical movement of my Bootstrap v5 card when resizing the window?

Issue:

While working on my website and implementing three cards using Bootstrap, I encountered a problem. When I resize the window vertically, all the elements shift upwards and overlap with other elements, ruining the look of the site. I suspect the issue may be related to my flex elements, but I'm unsure how to resolve it.

Snippet:

Card Markup

    <section class="row container-fluid h-75 justify-content-evenly align-items-center">
        <div class="col-md-3">
            <div class="card text-white bg-dark p-4">
                <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, natus?
                    </p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>

                                +2 identical cards

    </section>

Example of Footer

    <footer class="container-fluid text-center py-5 text-white bg-dark">
        <h1 class="pb-5">Partners:</h1>
        <div class="d-lg-flex justify-content-evenly pb-5">
            <img class="img-fluid w-25" src=".." alt="">
            <img class="img-fluid w-25" src=".." alt="">
        </div>
    </footer>

Screenshots:

Card Overlap Issue

htmlcssoverlapbootstrap-5bootstrap-cards

Answer №1

To achieve the desired layout, set the margin-top on both the footer and cards. Here is an example code snippet:

<section class="row container-fluid h-75 justify-content-evenly mx-auto align-items-center">
  <div class="mb-3 col-12 col-md-3">
    <div class="card text-white bg-dark p-4">
      <div class="card-body">
        <h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Perspiciatis, natus?
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

         +2 more identical cards
</section>

Apply a margin-top of 5 units to the footer:

<footer class="container-fluid text-center py-5 mt-5 text-white bg-dark">
  <h1 class="pb-5">Partners:</h1>
  <div class="d-lg-flex justify-content-evenly pb-5">
    <img class="img-fluid w-25" src=".." alt="" />
    <img class="img-fluid w-25" src=".." alt="" />
  </div>
</footer>

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

Pictures without a set width

Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...

htmlcss

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

javascriptcssreactjsstyled-components

Tips for staying on the same tab after submitting the form

I have encountered an issue where I need to keep the current tab selected even after submitting a form or refreshing the page. This is how my View File appears: <ul class='tabs'> <li><a href='#tab1'>Tab 1< ...

htmljquery

Utilizing jQuery for Summation Calculation

How can I use jQuery to calculate the total sum of prices for all products in a table with the column name "price"? Once calculated, how do I store this sum in a variable? <table id ="tab"> <th>Product</th><th>Price</th> ...

jquerycss

Conflict with choosing options identified when using Select Box on IOS iPad mini

I am currently attempting to display a select box with scrolling on an iOS iPad mini. Issue: The options are not appearing inside the select box, instead they are overflowing outside of it in the popover. CSS .indicators_geography { font-size: 12px; ...

ioshtmlcssipad

Button placement that feels out of place

I'm looking to style an input-group with a form input and submit button using Bootstrap 5. Here's my current code: .card { margin: auto; width: 50%; padding: 10px; opacity: 0.9!important; top: 250px; } <div class="card-header"> ...

htmlcssbootstrap-5

Modifying webpage code

I am looking to develop a system where I can edit various elements such as the navbar, paragraphs, and images directly from a web page. I understand that this can be achieved with JavaScript, but I am facing the issue of my customizations reverting to defa ...

javascripthtmlcss

Resetting a component's color to its default state after being styled by a parent selector

The Bootstrap stylesheet contains the following code: pre code { color: inherit; } Even if I include an explicit pre code { color: red; }, the style from Bootstrap's stylesheet still takes priority. Why does this happen? [Edit: can ignore this ...

csstwitter-bootstrapbootstrap-4

Personalize the pagination or other elements of Splide in a Svelte component to suit your needs

I am currently integrating Splide into my Svelte application and facing an issue with the pagination styling. The pagination is appearing on top of my images and is too transparent for my liking. I'm utilizing Svelte Splide to incorporate this library ...

htmlcsssveltesplidejs

What is the best way to have a text field automatically insert a hyphen after specific numbers?

Is there a way to make a text field insert hyphens automatically after certain numbers? For example, when typing a date like 20120212, could we have the input automatically formatted with hyphens after the first 4 digits and the second two, so it displays ...

phpjavascripthtml

How to send information to a modal component in ReactJS?

I'm feeling a bit lost here, maybe I'm missing something. What I am trying to achieve is a loop that populates an array with progress bar elements and then displays them with the relevant information. When a user clicks on a progress bar, the d ...

javascripthtmlreactjszurb-foundation

How can I adjust the font size in a TextField when it is in focus?

As a novice in ReactJS, I am currently utilizing materia-ui to design a page. I am looking to make a custom change on a TextField where the font size adjusts when text is entered. However, adjusting the font size creates too much space between the label a ...

javascriptcssreactjsmaterial-ui

How to set up a multi-select box for tagging purposes

I tried to implement a multi select box to create tags using the code below. I downloaded select2.min.css and select2.min.js from https://github.com/select2/select2, then copied them into the project's css and js folders. Here is the HTML code snippe ...

javascripthtmlcsstwitter-bootstrap

Adjust the dimensions of the dropdown menus

I've set up 2 dropdown menus, but I'm having trouble adjusting their size. I need them to fill the screen width. Here's my code: <select id="repeatSelect" ng-model="selectedArea"> <option ng-repeat="(key,prop) in result" value=" ...

htmlcssangularjsdropdown

analyzing information from a variety of HTML tables

I am currently working on extracting financial data from Income Statements tables within 8-K Forms retrieved from the Edgar Database (http://www.sec.gov/edgar/searchedgar/companysearch.html). Here are a couple of examples: Apple Alcoa The specific table ...

pythonhtmlhtml-table

retrieve the data-task-IDs from the rows within the table

I am currently working with a table that looks like this: <table id="tblTasks"> <thead> <tr> <th>Name</th> <th>Due</th> ...

javascriptjqueryhtmlcss

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

Guide to importing a scss file into a scss class

Is there a way to apply a different theme by adding the "dark-theme" class to the body? I've attempted the following implementation: @import '../../../../node_modules/angular-grids/styles/material.scss'; .app-dark { @import '../../. ...

cssangularsass

Prevent CSS from resizing text to the very bottom of the page

My goal is to prevent text from overflowing all the way to the bottom of the page, as I need a space for another div at the end. How can I create a gap between the text and the bottom of the page? Additionally, how do I restrict the size and position of t ...

csshtmltextconstraints

Interpolation problem with AngularJS translation service

I've successfully implemented a ternary operator in my HTML: {{ qp.QP_TRANSFERS === '1' ? qp.QP_TRANSFER_TYPE_NAME + ' transfer' : 'No transfer' }} In addition, I am utilizing a translation service with JSON objects. He ...

htmlangularjsangularjs-interpolate