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.