Hello guys, I like this dropdown menu for a selection pre-registration that will define the user type; however, how do I make the box wrap the text neatly instead of this ugly look?! Any help is much appreciated!
This is the HTML of that page:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Register - Icarus Analytica LLC</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="assets/css/Header-Blue.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="bg-gradient-primary">
<div class="container">
<div class="card shadow-lg o-hidden border-0 my-5">
<div class="card-body p-0">
<div class="row">
<div class="col-lg-7 col-xl-4 offset-xl-4">
<div class="p-5">
<div class="text-center">
<h4 class="text-dark mb-4">Before we begin...</h4>
<p class="text-dark mb-4">Choose the option that best describes you:</p>
</div><select class="d-inline-block form-select dropdown-toggle">
<option value="0" selected="">A healthcare professional looking to pick-up extra shifts.</option>
<option value="1">A staffing agency looking for new clients / talent.</option>
<option value="2">An employer looking to manage schedules and fill extra shifts.</option>
</select>
<form class="user">
<div class="mb-3"></div><button class="btn btn-primary d-block btn-user w-100" type="submit">Continue</button>
<hr>
</form>
<div class="text-center"><a class="small" href="homepage.html"><br>← Back to Homepage<br></a></div>
<div class="text-center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-basic">
<div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Home</a></li>
<li class="list-inline-item"><a href="#">Services</a></li>
<li class="list-inline-item"><a href="#">About</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
</ul>
<p class="copyright">Vital Staffing © 2021</p>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>xt by 4 spaces