<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">
					<div class="row align-items-center">
						<label for="favorite-color" class="col-auto col-form-label-lg">What is your favorite color?</label>
						<div class="col-sm-2">
							<input type="color" list="colors-list" id="favorite-color" class="form-control">
							<datalist id="colors-list">
								<option>#FF0000</option>
								<option>#FFA500</option>
								<option>#FFFF00</option>
								<option>#008000</option>
								<option>#0000FF</option>
								<option>#800080</option>
								<option>#FFC0CB</option>
								<option>#FFFFFF</option>
								<option>#000000</option>
							</datalist>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

.container > .row {
	height: 100vh;
}