3

I'm new to Bootstrap and have been messing around with v4. My question is on making an inline form expand to the full-width available inside the column.

Below is my markup: 

 <div class="container">
    <div class="row">

        <div class="col-lg-2 title">

            <h2>Make a Gift:</h2>
            <p>Give Generously</p>

        </div>
        <div class="col-lg-10">


            <form class="form-inline ">

                <label class="sr-only">Donation Type</label>
                <select class="form-control my-1 mr-sm-2">
                    <option selected>One Time Donation</option>
                    <option value="1">Recurring Donation</option>
                </select>

                <label class="sr-only">Donation Amount</label>
                <input class="form-control my-1 mr-sm-2" type="number" placeholder="Donation Amount">

                <label class="sr-only">Choose Fund</label>
                <select class="form-control my-1 mr-sm-2">
                    <option selected>Syria Emergency</option>
                    <option value="1">Winterisation</option>
                </select>

                <button type="submit" class="btn btn-primary my-1">Donate Now</button>

            </form>

        </div>

    </div>
</div>

I'd love to hear from the community on where to go from here.

Fuzz
  • 31
  • 1
  • 2

1 Answers1

2

You can use flex-grow to utilize the available spaces. In your case you can apply to the form-controls like below.

.form-inline .form-control {flex-grow:1}

DEMO

You can get more information for expanding items using flex on the below stack overflow link.

Make flex-grow expand items based on their original size

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54