How to prevent bootstrap column from collapsing to new line when width of the parent is reduced?

Question

<div class="col">
            <div class="alert alert-danger display-error pt-3 pb-0 mb-0 mt-0" style="display: none"></div>
            <h2 class="d-flex justify-content-center pt-4" style="font-family: Poppins-Regular;font-size: 30px;color: #333333;line-height: 1.2;">Send Us a Message</h2>
            <form class="px-5" action="insert.php" id="cform" method="POST">
                <div class="container px-4 pt-3">
                    <div class="row border">
                        <div class="row border mx-0 px-0">
                            <label class="mx-0 ps-2 d-flex align-items-center itemname" for="name-input">TELL US YOUR NAME *</label>
                        </div>
                        <div class="row border mx-0 px-0">
                            <div class="col mx-0 px-0 border-end">
                                <input id="firstName" name="firstName" class="border-0 ps-2" style="height: 55px" type="text" placeholder="First name" />
                            </div>
                            <div class="col mx-0 px-0 border-start">
                                <input id="lastName" name="lastName"  class="border-0 ps-2" style="height: 55px" type="text" placeholder="Last name" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container pt-3 px-4">
                    <div class="row border">
                        <div class="row border mx-0 px-0">
                            <label class="mx-0 ps-2 d-flex align-items-center itemname" style="height: 55px" for="name-input">ENTER YOUR EMAIL *</label>
                        </div>
                        <div class="row border mx-0 px-0">
                            <div class="col mx-0 px-0">
                                <input id="email" name="email" class="border-0 ps-2 w-100" style="height: 55px" type="text" placeholder="Eg. [email protected]" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container pt-3 px-4">
                    <div class="row border">
                        <div class="row border mx-0 px-0">
                            <label class="mx-0 ps-2 d-flex align-items-center itemname" for="name-input">ENTER PHONE NUMBER</label>
                        </div>
                        <div class="row border mx-0 px-0">
                            <div class="col mx-0 px-0">
                                <input  id="phoneNumber" name="phoneNumber" class="border-0 ps-2 w-100" style="height: 55px" type="text" placeholder="Eg. +1 800 000000" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container pt-3 px-4">
                    <div class="row border">
                        <div class="row border mx-0 px-0">
                            <label class="mx-0 ps-2 d-flex align-items-center itemname" for="name-input">MESSAGE *</label>
                        </div>
                        <div class="row border mx-0 px-0">
                            <div class="col mx-0 px-0">
                                <input  id="message" name="message" class="border-0 ps-2 w-100" style="height: 150px" type="text" placeholder="Write us a message" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-center pt-4">
                    <button id="submit" type="submit" name="submit" style="background: #00ad5f;border-radius: 2px;min-width: 200px;height: 50px;font-family: Montserrat-Bold;font-size: 12px;color: #fff;line-height: 1.2;text-transform: uppercase;outline: none;border: none;">SEND MESSAGE</button>
                </div>
            </form>
        </div>

I tried to reduce the width of the form by adding a padding to both the sides of the form using 'px-5'. But the column containing the '#lastName' input is collapsing to a new line when I do this. Is there a way that I can reduce the 'form' width so that the two columns (that contain the inputs with ids #lastName and #firstName) reduce its width with the form width and not collapse to a new line.

aforcada · Accepted Answer · 2021-10-02 18:39:06Z

1

You need to add .w-100 class to #lastName and #firstName. However, you should check bootstrap form classes like .form-control

answered Oct 2, 2021 at 18:39

aforcada

514 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to prevent bootstrap column from collapsing to new line when width of the parent is reduced?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related