I'm having an issue with my contact form where the input fields shrink to a small size as the browser window shrinks. I've tried adjusting the col-breakpoints but it still doesn't look quite right until hitting the breakpoint. I also tried adding custom CSS to set a min-width, but haven't found success with that either.
https://i.sstatic.net/CojEh.png
<!-- Custom CSS -->
.input-group-text {
width: 40px;
}
.input-group-text span {
margin: 0 auto;
}
.body-main-bg {
background-color: #eeeeee;
}
<!-- Contact Form -->
<div class="container-fluid">
<div class="row body-main-bg justify-content-center">
<div class="col-4 my-3 text-center">
<h4>Contact Us</h4>
</div>
</div>
<form id="contact-form" method="" action="">
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-user"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-envelope"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-ellipsis-v"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Subject">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-pencil"></span>
</span>
</div>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<button class="btn btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</form>
</div>