<div class="container">
	<div class="row align-items-center">
		<div class="col col-md-8 col-lg-6 mx-auto">
			<div class="card bg-light">
				<div class="card-body">
					<label for="event-choice" class="form-label col-form-label-lg">Choose a historical date</label>
					<input type="date" list="events" id="event-choice" class="form-control">
					<datalist id="events">
						<option label="Fall of the Berlin wall">1989-11-09</option>
						<option label="Maastricht Treaty">1992-02-07</option>
						<option label="Brexit Referendum">2016-06-23</option>
					</datalist>
				</div>
			</div>
		</div>
	</div>
</div>

.row {
	height: 100vh;
}

[list]::-webkit-calendar-picker-indicator {
	display: block;
}