<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">Find a Schedule</h3>
<h6 class="card-subtitle mb-2 text-muted text-center">Choose the category and fill in the search field.</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">×</span>
</button>
</div>
<form method="post" action="">
<div class="form-group">
<label for="category">Category:</label>
<select class="form-control" id="category" name="type" onchange="modifyText()">
<option value="classes">Classes</option>
<option value="teachers">Teachers</option>
</select>
</div>
<div class="form-group">
<label for="user_input">Search:</label>
<input type="text" class="form-control" name="user_input" placeholder="E.g. 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;">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I'm having trouble centering a card vertically using Bootstrap 4, it's not aligned as expected:
https://i.sstatic.net/5BiKw.png
The card doesn't appear centered on the page. I've tried searching online for a solution without success. I attempted to follow this guide but it didn't work.
Any help would be appreciated. Thank you.