Issue with Input element shrinking too much as browser resizes - html

Question

I have a contact form (a bunch of input/span elements) nested in a Boostrap col. As the browser shrinks, the input fields shrink to an undesirable size.
I have tried adding various col-breakpoints, which sort-of works, but it looks funky and still shrinks too much until it hits the breakpoint. I have also looked for a way to specify a min-width of sorts, but haven't had luck with that either.
<!-- 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>

Answer 1

If you change col-4 to col-lg-4 or col-md-4 you will have the desired layout.
The issue is that with col-4 you are essentially saying "stay this width on all devices". When col-lg-4 or col-md-4 are responsive and set divs to be 100% on large/medium devices and down.
See bootstraps grid options here: https://getbootstrap.com/docs/4.3/layout/grid/