Aligning a div beneath other divs using Bootstrap 5

My HTML code is very basic, with no CSS involved. It's supposed to show a title at the top of the page followed by some centered text. Here's what I have:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f504f52">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f405f42">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="container-fluid">
  <div class="d-flex flex-column min-vh-100">
    <h1 class="text-center my-4">Title</h1>
    <div class="d-flex flex-grow-1 justify-content-center align-items-center">
      <div>Centered!</div>
    </div>
  </div>
</div>

However, I'm facing an issue where the top div is affecting the position of the middle one (I want the middle content to be centered on the page). Any guidance would be greatly appreciated as I am still learning about web development!

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

To prevent the h1 element from taking up unnecessary vertical space, one solution is to apply the fixed-top class to it.

Check out the example below:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef1eef3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7d6e7f4f3a213e213c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>



<div class="container-fluid">
<h1 class="text-center my-4 fixed-top">Title</h1>
    <div class="d-flex flex-column min-vh-100">
        <div class="d-flex flex-grow-1 justify-content-center align-items-center">
            <div>Centered!</div>
        </div>
    </div>
</div>

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

Is there a way to implement a one-second delay before displaying a drop-down hover menu?

I've been trying to use the setTimeout function, but so far I haven't been able to figure out the correct way to do it. Any ideas on what I might be missing? JSFIDDLE $('.drop-down').click(function() { $(this).hide(); }); $(&apo ...

javascriptjqueryhtml

Marquee is experiencing issues with incomplete scrolling

Hello everyone, I have been trying to implement a stock market ticker on my website. Initially, I used the marquee tag and it worked fine. Then I tried using simple scroll within the PHP UserCake user management system, but unfortunately, it is not working ...

phpjqueryhtmlcssusercake

What could be causing the sudden glitch in my sidebar animation?

I'm encountering issues with the sidebar opening smoothly. The width of the column seems to change as it opens and there's a choppy jump. I've attempted to resolve this by applying transitions to the CSS and using flex-grow / shrink. Unfort ...

htmlbootstrap-5

Is there a way to alter the footer across all my pages using just one document?

I'm having trouble coming up with a title for my question, so please bear with me. I am working on a Bootstrap website and I want to create a consistent navbar and footer across all pages without duplicating the code in each document. How can I achiev ...

htmlcsstwitter-bootstrap

Plugin for creating a navigation bar with a jQuery and Outlook-inspired style

Our team is considering transitioning our asp.net forms application to MVC. Currently, we utilize outlook-style navigation with ASP controls such as listview and accordion, using code referenced here. Are there any jQuery/CSS controls available for MVC t ...

javascriptcssjquery-ui

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

Is it feasible to utilize VAST for delivering HLS streams? Can m3u8 files be incorporated into VAST tags for delivery?

We are integrating a video player that supports VAST pre-roll, mid-roll, and post-roll video ads. I'm wondering if it's feasible to include m3u8 files in VAST tags? I've reviewed the vast specification and examples, but haven't come ac ...

javascripthtmladsvast

Has the Blueprint CSS framework become obsolete?

Is the Blueprint CSS framework still being actively maintained? The last version was released over a year ago and there have been no recent commits in the Github repository. ...

cssblueprint-css

Is it possible to have CSS handle only horizontal overflow?

Can CSS 2.1 be used to achieve horizontal overflow only? overflow: auto; If this code will result in both vertical and horizontal scrollbars for a block element, is there a way to display only horizontal scrollbars (for example, within a <div>)? Ho ...

htmlxhtmloverflowcss

Issues with ASP.net CSS not functioning properly in Internet Explorer, although it works fine in Firefox, Edge, and

Hello everyone, After spending several hours debugging and researching, I have hit a roadblock and can't identify the issue. As a less experienced coder, I am reaching out to seek your help. I am currently working on an ASP.NET C# page that was cre ...

c#cssasp.net

View the text notes information stored in a database, make changes to them, and then update and save the modified data using NodeJs

Currently developing a website that allows users to register, login, write text notes in a text area, save them in a database, and view those saved notes on a separate page. Additionally, users should be able to click on a note from the list and have it ...

htmlmysqlnode.jsexpress

Determine if the webpage is the sole tab open in the current window

How can I determine if the current web page tab is the only one open in the window? Despite searching on Google for about 20 minutes, I couldn't find any relevant information. I would like to achieve this without relying on add-ons or plugins, but if ...

javascripthtmlbrowser

Personalizing bootstrap tabs

I'm currently working on a project that requires implementing custom-style tabs. I'm facing challenges in customizing the borders of the tabs, particularly rounding the red bottom border and adding space between the right border and bottom border ...

htmlcssbootstrap-5

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

cssfont-face

Problem with Button Functionality in Outlook Email

I am having trouble making a specific button for Outlook within my email. Due to the different sections in my EMAIL, the button got wrapped in v:rect and now it is shifting to the top of the email. Can someone assist me with this issue? Actual Image - htt ...

javascripthtmlcssemailoutlook

Issues with the plugin for resizing text to fit the parent div's scale

I've spent the last hour attempting to get this script to function properly, but no luck yet. Check out the correct jsfiddle example here: http://jsfiddle.net/zachleat/WzN6d/ My website where the malfunctioning code resides can be found here: I&apo ...

javascriptjqueryhtmlcsshtml5boilerplate

Issue with Collapse Feature on Bootstrap 3.x Navbar

The Bootstrap 3 Navbar expands properly in full screen and on a browser with a small width on a desktop PC and mobile browsers, but when using the Toggle navigation button, it doesn't slide down. I have tried to replicate the code from this example: h ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to align the Radio on the left using CSS?

Trying to recreate the design of the freeCodeCamp Survey Form Having trouble with using inline-block after .form-control input, specifically for radio buttons. Can someone help pinpoint what I'm doing wrong? Thank you! form{ background-color: g ...

htmlcss

The capability to scroll within a stationary container

Whenever you click a button, a div slides out from the left by 100%. This div contains the menu for my website. The problem I'm encountering is that on smaller browser sizes, some of the links are hidden because they get covered up. The #slidingMenu ...

javascriptjqueryhtmlcss

On my website, two elements are stacked on top of each other

The CSS framework I am currently utilizing is Materialize Whenever I try to add a new element, it inexplicably appears below the ones above it. I did not specifically instruct it to be positioned underneath or below the cover container. Adding a z-index c ...

htmlcssmaterialize