How to control dropdown of d-inline-block?

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

You have to set the width on the dropdown. You need to learn how to write CSS if you want to customize things like this. This is not something that can be simply explained in a forum post.

In general, if you want to build a customized website, you have to learn the basics of how HTML and CSS work to create the finished webpage. I don’t mean to sound rude, but unless you want to teach yourself how to code, or take some online courses, etc… then you’re probably going to have to hire someone to build your website.

You can do virtually anything with Bootstrap Studio, but customizing things that are not available as options within the visual user interface requires that one know how to write custom CSS. It’s not a program for beginners with no coding knowledge, and this forum category is really for help with using the program, not teaching people how to write code.

You can try posting in the webdesign help category, and someone might be willing to write you an answer to this particular question, but ultimately, you’ll need to learn this stuff for yourself. Many of us here make our livings doing exactly the sort of work you’re asking for help with.

Not rude at all. I am a data scientist and although front end web development is new to me, the learning curve is not very long. As I mentioned to you in a previous post, HTML/CSS/JS has been a side learning for me as bootstrap studio has given me the freedom to focus on the server handling and database modeling. Most of the things I’m experiencing bother just my OCD and not really the utility of the site. I’m also having to convert the Bootstrap studio output files to Jinja so there’s that additional layer of complexity. I’m building a web application not a simple page display, hence bringing other developers for front end is sort of secondary as long as I can get the functions desired.