Column Content Vertical Alignment - Bootstrap 4

Question

I'm trying to create a loading animation for when a user submits a form before it informs them whether it was successful or if there was an error. My problem is that the loading icon and text is not aligning vertically to the center of the div it is in (col). I wish to have this in the center so that I can replace the column content (loading icon and text) with the response of the form submission after a certain time. I am using Bootstrap 4 and I have tried various different code such as align-items-center and my-auto on the column to no avail.

<div class="container-fluid h-100 w-100 formSubmitLoad d-flex flex-column" id="loader">
    <div class="row justify-content-center align-items-center h-100" id="loadingIcon">
        <div class="col-11 col-md-6 text-center bg-primary h-75">
            <i class="fas fa-spinner fa-pulse fa-4x"></i>
            <h2 class="pt-4">Loading</h2>
        </div>

        <div class="col-11 col-md-6 text-center bg-primary h-75 d-none">
            <!-- Column content to replace above column-->
        </div>
    </div>
</div>

.formSubmitLoad {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: auto;
  color: white;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

Snippet:

Temani Afif · Accepted Answer · 2020-03-07T00:36:10.113

Update your code like below:

.formSubmitLoad {
  color: white;
  background-color: rgba(0, 0, 0, 0.9);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<div class="container-fluid h-100 w-100 formSubmitLoad position-fixed" id="loader">
    <div class="row h-100" id="loadingIcon">
        <div class="m-auto col-11 col-md-6 d-flex flex-column justify-content-center align-items-center bg-primary h-75">
            <i class="fas fa-spinner fa-pulse fa-4x"></i>
            <h2 class="pt-4">Loading</h2>
        </div>

        <div class="m-auto col-11 col-md-6 text-center bg-primary h-75 d-none">
            <!-- Column content to replace above column-->
        </div>
    </div>
</div>

Column Content Vertical Alignment - Bootstrap 4

1 Answers1