Bootstrap : Vertically center row in container

Question

i'm trying to vertically center a row which contains a card, I tried all solutions in this question's solution Vertical Align Center in Bootstrap 4 but absolutely nothing happens.

Here is my html code :

<div class="row h-100">  
    <mat-progress-spinner id="loader" style="top: 50%; left: 47%; transform: translate(-50%, -50%); position:absolute; z-index: 1;" *ngIf="showLoading"
        [color]="color"
        [mode]="mode">
    </mat-progress-spinner>
    <div class="col-sm-12 my-auto">
        <div *ngIf="app" class="card card-block shadow text-center mx-auto">
            <div class="card-header">
                <h1>{{app.name | uppercase}}</h1>
              </div>
              <table class="table table-striped">
                <thead>
                    <tr>
                      <th scope="col">Micro Service</th>
                      <th scope="col">Status</th>
                      <th scope="col">Actions</th>
                      <th scope="col">Settings</th>
                    </tr>
                <tbody>
                  <tr *ngFor="let ms of app.microservices">
                    <td style="width: 25%" class="align-middle" id="msname">{{ms.name}}</td>
                    <td style="width: 25%" class="align-middle">
                        <img *ngIf="(isContainerRunning | async)" src="../../../assets/img/running.png" width="50px" height="50px"  matTooltipPosition="right" matTooltip="Running">
                        <img *ngIf="!(isContainerRunning | async)" src="../../../assets/img/exited.png" width="50px" height="50px"  matTooltipPosition="right" matTooltip="Exited">
                    </td>
                    <td style="width: 25%" class="align-middle">
                        <a (click)="start(ms.name)"><img src="../../../assets/img/start.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
                              <a (click)="stop(ms.name)"><img src="../../../assets/img/stop.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
                        <a (click)="restart(ms.name)"><img src="../../../assets/img/restart.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
                    </td>
                    <td style="width: 25%" class="align-middle">
                      <button (click)="redirect(ms_url)" id="backbtn">edit</button>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4" class="text-center align-middle"><button (click)="back()" id="backbtn">back</button></td>
                  </tr>
                </tbody>
              </table>
        </div>
    </div>
</div>

ps : this is an angular project so the container is in another component here is the container tag :

<div class="container-fluid h-100">
            <div [@routeAnimations]="prepareRoute(outlet)">
                <router-outlet #outlet="outlet"></router-outlet>
            </div>
        </div>

It seems like "my-auto" and every single other solutions has no impact on my card position.

EDIT :

i'm using angular material sidenav which is configured in main app.component.html like, not sure if it changes anything tho :



<mat-sidenav-container>
    <mat-sidenav mode="side" opened (mouseenter)="toggleMenu()" (mouseleave)="toggleMenu()">
        <table  class="w-100 mx-auto text-center">
            <tr>
                <td>
                    <a href=""><img src="../assets/img/logo.png" width="60px" class="py-2 px-2 my-3" id="logoaxians"></a>
                </td>
            </tr>
            <tr>
                <td>
                    <a routerLink="/applications" routerLinkActive="active" matTooltipPosition="right" matTooltip="Applications"><img src="../assets/img/dashboard.png" width="43px"  class="py-2 px-2 icons"></a>
                </td>
            </tr>
        </table>
        <table  class="w-100 mx-auto text-center" id="bottomnav">
            <tr>
                <td>
                    <a routerLink="/help" routerLinkActive="active"  mat-raised-button matTooltipPosition="right" matTooltip="Help"><img src="../assets/img/help.png" width="50px"  class="py-2 px-2 icons"></a>
                </td>
            </tr>
        </table>
    </mat-sidenav>
    <mat-sidenav-content>
        <div class="container-fluid vh-100">
            <div [@routeAnimations]="prepareRoute(outlet)">
                <router-outlet #outlet="outlet"></router-outlet>
            </div>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

Thanks for your help.

`container-fluid h-100` also has a parent like the html body tag — Carol Skelly, Feb 05 '20 at 15:57

Bilel-Zheni · Accepted Answer · 2020-02-05T16:21:02.580

0

try this :

<div class="container-fluid h-100">
            <div [@routeAnimations]="prepareRoute(outlet)" class="h-100">
                <router-outlet #outlet="outlet"></router-outlet>
            </div>
       </div>

edited Feb 05 '20 at 16:21

answered Feb 05 '20 at 15:44

Bilel-Zheni

1,202
1
6
10

The card totally disappeared from the page now.. – ryuzak1 Feb 05 '20 at 16:00
set the parent container height with vh-100 (
) class and let me know the result
– Bilel-Zheni Feb 05 '20 at 16:03
I edited my post to show you the code, i also enabled overflow back and it seems like the row is moved outside the visible page. – ryuzak1 Feb 05 '20 at 16:10
See the working demo – Bilel-Zheni Feb 05 '20 at 16:10
ok I figured it out, the div which wrap the routing tag should has h-100 to have the full container height, see my updated answer. – Bilel-Zheni Feb 05 '20 at 16:19
Ok my bad I just found the problem, it was just a stupid error of mine in a scss file, thank you so much man. – ryuzak1 Feb 07 '20 at 09:37

Bootstrap : Vertically center row in container

1 Answers1