Make the Bootstrap Inline Form Fill the Entire Width of the Column

Just starting out with Bootstrap v4 and experimenting with it. I have a question regarding how to make an inline form expand to the full width available inside the column.

Here is the code snippet:

<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>

Would greatly appreciate any tips or input from the community on where to go next.

Answer №1

To maximize the available space, you can take advantage of the flex-grow property. In this scenario, it can be applied to form controls as shown below.

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

Check out the DEMO for a live example.

If you need more insights on how flex works and expanding items, refer to the following Stack Overflow post:

How to make flex-grow expand items proportionally

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging different API's in a table in ascending order of price

This task might be a bit confusing, but it should have a straightforward solution. I am working with two API links in JSON format to pull data into a table. Currently, all data from API1 is inserted into the table first, followed by data from API2. Both ...

Applying CSS through Jquery to dynamically loaded content is proving to be a challenge

When clicking on an anchor tag, a qtip is triggered to appear. This qtip is generated dynamically. <a class="change-zip" href="#zip-change-tooltip">something</a> /*this is dynamically loaded */ <div class="qtip"> <div class="conten ...

Issue: Trouble with Rotating Tooltips in Javascript

I am facing a challenge with the tooltips on my website. I want to ensure that all tooltips have a consistent look and transition effects, but I am struggling to achieve this. The rotation and other effects applied using javascript are not functioning prop ...

Using CSS to select a specific class within an attribute

Having trouble targeting a specific navigation item in a div using an attribute value in CSS. Here's the code I have so far: My goal is to target the navDepts class. HTML <div class="primary-nav" data-name="about"> <div class="sub ...

Modify the color of the text to be white

How can I modify the code below to change the text color to white? The original code is inspired by this question. I am unsure about how the text color was originally set to blue. .footer-background { padding-top: 20px; padding-bottom: 20px; bac ...

New Issue in Firefox 15: When using divs, content spills over into border images

Before anything else, I want to acknowledge the unprefixing of -moz-border-image in Firefox 15. You can read more about it here: . I made adjustments to my CSS to accommodate Firefox 15. However, I am facing a different issue that needs attention. To ela ...

Create an HTML page that allows for vertical scrolling even when there is no

After creating a basic html-page with only a navbar and footer using bootstrap, I noticed that the site has become scrollable. Why is this happening? Below is my Footer CSS: /* Sticky footer styles -------------------------------------------------- */ ht ...

Responsive design is causing issues with the stacking of rows in Bootstrap

Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies. Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example: ht ...

Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect an ...

What is the process for installing bootstrap in MVC on a Linux system without using automated tools?

Currently, I am in the process of developing a web application using Visual Studio Code on Linux. My goal is to manually integrate Bootstrap into the project. After downloading Bootstrap 4.1.3, extracting it and storing it in the directory wwwroot/lib/bo ...

What is the best way to loop through every header tag within a designated div container?

Is there a way to cycle through all the header tags within a specific div tag? I am looking to automatically generate a document map tree for everything inside my div tag and display it in a sidebar menu... If there is a user-friendly javascript library av ...

What causes the less-than-perfect smoothness in my CSS3/jQuery transitions and how can I improve their fluidity?

After tirelessly searching for answers all over the web, I've hit a dead end and now I turn to you for assistance. My current dilemma revolves around the lack of smoothness in my animations, whether it be through jQuery .animate or CSS3 transitions. ...

How can I arrange an array of strings with dates in C# or use ordering functionality in AngularJS?

I've got an array of dates in the following format: string[] arr=["08.02.2017","09.02.2017","30.01.2017","31.01.2017"] What is the most efficient method to sort this array in C# so that the order is descending? I want the data to be displayed within ...

Boosting Your SCSS (SASS) Productivity

I'm curious if there are any ways to make the code below more efficient or dynamic. I've already achieved the desired result, but I'm interested in optimizing it further. The Script Any suggestions would be highly appreciated, Cheers, ...

Strategies for iterating through a collection of responses once and showcasing exclusively the incorrect ones

Let's consider the following as the correct and incorrect answers for each question: Question Number: 1 Correct Answer(s) B Incorrect Answers A C D Question Number: 2 Correct Answer(s) A C Incorrect Answers B D Question Number: 3 Correct ...

Scrolling Horizontally with a <div> containing <a> and <img> elements

I currently have a table with three columns. The third column consists of multiple images that are clickable to perform an action, so I need this column to be horizontally scrollable. To achieve this, I inserted a <div> in the third column and added ...

Animation in CSS/transform drifting out of view

I have a challenge with animating text to each corner of the screen, where the text is rotated in every corner. However, I am facing an issue where the text goes off-screen in the top right and bottom left corners. It seems like the rotation might be causi ...

The simple CSS trick to transforming a horizontal menu into a vertical menu for mobile

In my website publishing class, I am working on designing a responsive template. Leveraging my knowledge of jquery, I decided to switch the horizontal navigation menu on the desktop version to a vertical menu on mobile devices. Instead of displaying all na ...

Make sure to load the <img> html tag before implementing js masonry for optimal

I am facing an issue with jQuery Masonry as it arranges my 'bricks' immediately without waiting for images to load in. Additionally, I need the images to be responsive so I cannot define their height and width like this: <img src="asas" heigh ...

Borders are absent on several div elements

There is a strange issue I'm facing where some borders on identical divs are not showing up. I have spent hours trying to troubleshoot this problem, and it seems like zooming in or out sometimes makes the border appear or disappear. My hunch is that i ...