Arranging Bootstrap inputs horizontally with lengthy labels

When placing two input fields in a row, such as a drop down menu, with labels of varying lengths, the alignment of the inputs can become skewed. This issue persists even when attempting to add breaks in the code due to unpredictable wrapping behavior at different screen widths.

With approximately 100 elements in the form, displaying each element on a single line would result in an excessively long form.

<form>
                 <div class="form-row">
                    <div class="form-group col-md-6">
                        <label>Question 1?</label>
                        <select size="0" class="form-control" name="typeOfEntity">
                            <option disabled selected>Select One...</option>
                            <option>Answer 1</option>
                            <option>Answer 2</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label>This is a really lengthy question 2 that requires an answer?</label>
                        <select size="0" class="form-control" name="whyRegistering">
                            <option disabled selected>Select One...</option>
                            <option>Answer 1</option>
                            <option>Answer 2,3,4,5 etc</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
</form>

To observe the alignment issue, refer to this jsfiddle: https://jsfiddle.net/30mfgLde/

Answer №1

One way to ensure the input is consistently positioned at the bottom and the label at the top is by utilizing flexbox.

.form-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Answer №2

Utilize the col-xs-* or md within your row to properly display content with the form-control class in Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
             crossorigin="anonymous">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"
             crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
             crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
             crossorigin="anonymous"></script>

            <div class="container">



                <form>
                    <div class="form-row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-xs-6 col-md-6">
                                    <label>This is question 1?</label>
                                </div>
                                <div class="col-xs-6 col-md-3">
                                    <select size="0" class="form-control" name="typeOfEntity">
                                        <option disabled selected>Select One...</option>
                                        <option>answer 1</option>
                                        <option>answer 2</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-8 col-md-6">
                                <label>This is a really long question 2 that I need to ask?</label></div>
                            <div class="col-xs-4 col-md-3">
                                <select size="0" class="form-control" name="whyRegistering">
                                    <option disabled selected>Select One...</option>
                                    <option>Answer 1</option>
                                    <option>Answer 2,3,4,5 etc</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="col-xs-12 btn btn-primary">Submit</button>
                </form>


            </div>

https://codepen.io/anon/pen/dQgevq

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

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

The Photoswipe default user interface cannot be located

While attempting to incorporate PhotoSwipe into my website, I encountered an uncaught reference error related to The PhotoswipeUI_Default is not defined at the openPhotoSwipe function Below is the code snippet that I have been working on: <!doctyp ...

When I added a border in CSS and inserted a link within that border, the link ended up extending beyond the border itself

I decided to create a border class for my link and placed the link inside that border. However, when I view it on a responsive device, the link extends beyond the borders while the text within the border remains intact. How can I fix this issue? Here is m ...

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

I attempted the example provided below, but unfortunately, it did not function as expected. The reason behind my endeavor is that adding numerous modifiers (--tuned) to achieve the desired outcome seemed impractical. Therefore, I decided to try and link ...

Tips for capturing changes in a "count" variable and executing actions based on its value

I have a counter on my webpage and I'm trying to change the style of an element based on the count variable. I tried using the .change action but I haven't been able to get it working. It might not be the right solution. Can anyone provide some ...

Can the SVG def element be modified?

In my SVG file, there is a defs element structured as follows: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 330" onclick="tweenGloss()"> <defs> <linearGradient id="grad" x1="174.6 ...

You are unable to align a paragraph with a specific width in the center

I adjusted the width of a paragraph to make it less stretched out horizontally and more compact. However, when I attempted to center align the text within the paragraph using text-align: center;, only the direction of the paragraph was centered. The chall ...

Accessing an image from a directory using Javascript

I have a simple question that I need help with. In my code, I currently pull images from a website using this syntax: icon: 'http://i45.tinypic.com/2yua8ns.png'. However, I would like to use something like this instead: icon: '\images/i ...

Ways to apply a border-bottom to tr elements without affecting td elements

Is there a way to add a bottom border to <tr> elements without affecting <td> cells that have no border? I attempted the following approach, but setting border: 0 for <td> overrides the border for all <tr> elements as well, leaving ...

An HTML document may display a segment of a URL

Is there a way to display part of a URL in an HTML document, so that if the URL changes, the corresponding content in the body also updates? For instance, www.example.com/?key=i - Is it possible for this link to be dynamically displayed within the body o ...

Optimal method for storing large arrays of numbers in localStorage using JavaScript

*"Efficient" in this context refers to smaller size (to reduce IO waiting time) and fast retrieval/deserialization times. Storing times are less important in this scenario. I need to store multiple arrays of integers in the browser's localStorage, ea ...

Can you confirm if the explanation provided is accurate in distinguishing between inline and block-level elements in HTML?

The absence of the align attribute in the font tag is due to its status as an inline element. To center text, utilize the <center> tag instead. ...

What could be causing flexbox not to shrink to fit after wrapping its elements?

My goal is to create a flexbox with a maximum width that allows elements to wrap beyond that width without affecting the overall size of the flexbox's "row." The issue I am encountering is that when an element stretches beyond the maximum width and w ...

Arranging items in a flex container

My goal is to achieve the following layout with flexbox: #box { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; justify-items: center; align-items: center; } #spotLight img { width: 15%; height: 15%; } # ...

Is there a way to prevent elements from resizing when zooming in or out?

What is the best way to prevent elements from resizing on a standard website when users zoom in (CTRL +)? ...

What is the solution for getting `overflow-x` to function in place of `overflow-y`?

I have a main container with several sub-containers inside. When the main container's width exceeds its limit, I want to display a horizontal scroll bar. Instead of using the 'display: inline-block' property because it creates unwanted whit ...

Basic Jquery CSS style requests

Can you help me troubleshoot this issue? var hover = $('<img />').attr('src', hovers[i]).css('position', 'absolute') I'm having trouble getting th ...

The Intriguing Riddle of HTML Semantic

I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...

Responsive full-screen background image display

Why is the background image not appearing as a full image on large screens but fitting fine on small screens? <!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8" dir="ltr" /> <title ...

Tips for enabling both vertical and horizontal scrolling using the mousewheel on a webpage

Our website features a unique scrolling functionality where it starts off vertically and then switches to horizontal once the user reaches the bottom. This allows for a seamless transition between scrolling directions. In addition, users can easily naviga ...