Issue with Input element shrinking too much as browser resizes

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/