How do I Vertical Align a card with Bootstrap 4?

Question

<div class="container">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card bg-white mx-auto" id="maincard">
                <div class="card-body">
                    <h3 class="card-title text-center">Cerca un orario</h3>
                    <h6 class="card-subtitle mb-2 text-muted text-center">Scegli la categoria e compila il campo di ricerca.</h6>
                    <hr>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert" style="display: {{none if not show_alert else block}}">
                        {{alert_message}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="post" action="">
                        <div class="form-group">
                            <label for="category">Categoria:</label>
                            <select class="form-control" id="category" name="type" onchange="modifyText()">
                                <option value="classes">Classi</option>
                                <option value="teachers">Docenti</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="user_input">Ricerca:</label>
                            <input type="text" class="form-control" name="user_input" placeholder="Es. 2DM" autofocus id="user_input" list="classes" autocomplete="off">
                        </div>
                        <br>
                        <div class="container">
                            <div class="row">
                                <div class="col text-center">
                                    <button type="submit" class="btn btn-secondary" style="width: 120px;">Cerca</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

I'm trying to align vertically a card using Bootstrap 4 but this is what I obtain:

The card isn't centered. How I can fix this? I searched over the internet a solution but it didn't work. I tried this but it doesn't work.

Thanks in advance.

*"I tried [this](https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4) but it doesn't work"* actually works fine if you read the answers. https://www.codeply.com/go/bGiqoav3Ss. If the container doesn't have a defined height then h-100 doesn't work. — Carol Skelly, Jul 22 '19 at 11:46

score 1 · Accepted Answer · answered Jul 22 '19 at 11:39

As pointed out in the link you shared, "If the parent of the element you're trying to center has no defined height, none of the vertical centering solutions will work!"

You just need to assign style='height:100vh' to the div with class container... as shown below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container" style='height:100vh'>
  <div class="row align-items-center h-100">
    <div class="col-6 mx-auto">
      <div class="card bg-white mx-auto" id="maincard">
        <div class="card-body">
          <h3 class="card-title text-center">Cerca un orario</h3>
          <h6 class="card-subtitle mb-2 text-muted text-center">Scegli la categoria e compila il campo di ricerca.</h6>
          <hr>
          <div class="alert alert-danger alert-dismissible fade show" role="alert" style="display: {{none if not show_alert else block}}">
            {{alert_message}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
          </div>
          <form method="post" action="">
            <div class="form-group">
              <label for="category">Categoria:</label>
              <select class="form-control" id="category" name="type" onchange="modifyText()">
                <option value="classes">Classi</option>
                <option value="teachers">Docenti</option>
              </select>
            </div>
            <div class="form-group">
              <label for="user_input">Ricerca:</label>
              <input type="text" class="form-control" name="user_input" placeholder="Es. 2DM" autofocus id="user_input" list="classes" autocomplete="off">
            </div>
            <br>
            <div class="container">
              <div class="row">
                <div class="col text-center">
                  <button type="submit" class="btn btn-secondary" style="width: 120px;">Cerca</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

How do I Vertical Align a card with Bootstrap 4?

1 Answers1