How to center align two child divs within a parent div using flexbox in Bootstrap 5

I'm attempting to center two child divs within a parent div, but they're displaying side by side in the center.

html

<div class="container mt-5 box d-flex justify-content-center align-items-center">
  <i class="fa-solid fa-circle-notch text-danger"></i>
  <div class="">Content is being loaded</div>
</div>

css

.box {
    width: 500px;
    height: 300px;
    margin: auto;
    background: lightgreen;
}

https://i.sstatic.net/co63k.png

As we can see, the loader and text are next to each other, but I want the loader to be centered above the text "is being," which should also be at the center of the parent.

For example, the loader should be directly above the text is being

I'm using Bootstrap V5.0.

JsFiddle

Answer №1

Try using the flex-column class

<div class="container mt-5 box d-flex flex-column justify-content-center align-items-center">
      <i class="fa-solid fa-circle-notch text-danger"></i>
      <div class="">Loading content</div>
    </div>

https://jsfiddle.net/tg02owcd/

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

Don't forget to expand or collapse

I'm struggling to make this work. My goal is to initially display 50 characters and show the rest when the "read more" button is clicked, and vice versa with "read less." Another problem I've noticed is that when I click the back browser button, ...

What is the best way to limit the range slider before it reaches its maximum point?

I am currently utilizing angularjs to stop a range slider at 75%, however, the method I am using is not very efficient and is not working as desired. Is there anyone who can provide guidance on how to achieve this? Please note: I want to display a total ...

Developing a customized WordPress walker to specifically target the first and last links

I've implemented a custom walker in my Wordpress site: class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { if ( $depth ) $indent = str_repeat("& ...

Show information from a form within a react webpage

I'm currently working on a to-do app and my directory structure includes the following main files: App (renders the main page with header and buttons) export default class App extends React.Component { constructor(props) { super(props); thi ...

The table borders in IE 11 do not display properly when using Html5 and CSS

In a previous version, the table had visible borders. However, when I added the property text-align:center; to my container, the table did not align to the center. I then tried adding display:inline-block; to the table, which successfully centered it. It l ...

Steps for including variables assigned in a PHP file into a PHTML file

I am having trouble loading all the content from a phtml file into a php file Everything is functioning correctly except that the variables in the phtml file are not being loaded with their values Below is my php file <?php $firstname = $_POST[' ...

Implement a transition effect for the onClick event of a div element

I am looking to create a smoother transition effect when clicking on the section, causing it to expand and display the text underneath. I want to make this transition slower and more seamless. My current attempt at adding a transition to the "active" clas ...

Tips for choosing multiple files with the Ctrl key in a list item element:

We have decided to create our own browsing functionality due to the limitations of the existing HTML browse feature. While using the HTML browse, we can only select multiple files by pressing the Ctrl key, and we want to replicate this feature in our custo ...

Tips for smoothly transitioning between two division elements:

I currently have two different div elements on my webpage: <div id="#content1"> <div id="divWelcome" style="margin-top:50px;"> <div id="headerimg" style="position: relative;"> <div style="position: absolute; bo ...

validating API keys in Django

What is the process for verifying API keys in Django? I am currently using RapidAPI and they provide a key, but how can I authorize it with the URL? views.py def thanks(request): url = "https://webknox-trivia-knowledge-facts-v1.p.rapidapi.com/trivia/r ...

What is the best way to add a textfield within an image?

Does anyone have a code snippet that can generate a "search box" like the one on www.dx.com? I was shocked to find that searching for "textfield inside image" only yielded results for "image inside textfield". ...

How to manage the onClick event in HTML while the page is still loading?

When I try to call the Javascript function from the HTML onClick event, everything works smoothly if the page is already loaded. However, if I click the button before the document is ready, I encounter an undefined function error in the console. <a oncl ...

Displaying a message text upon successful AJAX request

I have a web page with an AJAX request that updates data in the database. After the update, I want to display a message to the user on the webpage confirming that the data has been successfully updated. However, currently, no message is being displayed and ...

In IE9, the margin: auto property does not effectively center a div element

I'm trying to center a content div in the space leftover by a sidebar. Here's how I want it to look: After some trial and error, I was able to achieve this for most browsers by using margin: auto on the specific div, along with setting overflow: ...

Tips for transferring input field values through the href attribute in HTML?

How can I pass an integer value from a link to an input field's value? Imagine example.com is a webpage with one input field. I would like to achieve something like this: Click here 1 Click here 2 If the user clicks on click here 1, then ...

|Webview|Best Practices for Integrating Upload Script

I am currently developing an Android app using WebView and I need to implement a code for uploading on Android. I came across the following code snippet and I want to convert it into JavaScript instead of Java (if possible). It needs to be linked to the up ...

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

JavaScript Cookie to Ensure Form Submission is Limited to a Single Instance

Seeking assistance with automatically submitting a form on page load using JS cookies. Here is the code I have, but it's not functioning as expected. Any guidance would be greatly appreciated. Thank you. I'm unsure about the section in my code th ...

Return to the previous URL after executing window.open in the callback

I need help redirecting the callback URL back to the parent window that initially called window.open. Right now, the callback URL opens inside the child window created by the parent. Here's the scenario: The Parent Window opens a child window for aut ...

The process of altering a grid in HTML and adding color to a single square

I am facing a challenge that I can't seem to overcome. I need to create a game using HTML, CSS, and JS. The concept involves a grid where upon entering a number into a text box, a picture of a cartoon character is displayed in a square which turns gre ...