Align labels on top and inputs at the bottom using Bootstrap

I'm facing an issue with alignment in my form using Bootstrap 4.4. Whenever a select element is included, it disrupts the layout by breaking the alignment of labels and inputs on the same row.

Is there a way to always keep the labels at the top and the input elements at the bottom without resorting to custom CSS or additional HTML elements?

<div class="row col-sm-12 col-md-12 col-lg-12">
    <div class="col-sm-12 col-md-3 col-lg-3 form-group">
        <label for="value">Value:</label>
        <select>
            <option>something</option>
        </select>
        <div class="input-group">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-3 form-group">
        <label for="name">Name:</label>
        <div class="input-group">
            <input type="text" class="form-control">
        </div>
    </div>
</div>

https://i.sstatic.net/xcKDY.png

After trying to use justify on one of the containers to align all inputs at the bottom, I realize that I still prefer having labels at the top.

Edit: The desired layout consists of multiple form groups on a single row: https://i.sstatic.net/uzoxC.png

Answer №1

To ensure that elements do not share the same row, you can use the label with class "w-100" to set its width to 100%. Placing certain elements above inputs will always keep them at the end of the form group. Additionally, applying a consistent design to selects and other form elements can improve the overall look.

<div class="row col-sm-12 col-md-12 col-lg-12">
    <div class="col-sm-12 col-md-3 col-lg-3 form-group">
        <label class="w-100" for="value">Value:</label>
        <select>
            <option>something</option>
        </select>
        <div class="input-group">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-3 form-group">
        <label class="w-100" for="name">Name:</label>
        <div class="input-group">
            <input type="text" class="form-control">
        </div>
    </div>
</div>

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

What is the best way to assign a unique color to each circle?

Struggling to assign random colors to each circle in my canvas. Currently, they all have the same color that changes upon refresh. I'm aiming for unique colors on each circle but my attempts have been unsuccessful so far. Check out my code below: v ...

CSS unable to modify the color of the switch in HTML code

I've been struggling to change the color of the Switch to yellow when it's turned on. Despite my attempts, I haven't been successful in doing so. Is it even possible to achieve this color change? <Switch size="small& ...

Troubles arising from the lack of character encoding declaration in the HTML document

Recently, I created a form for users to fill out that has the ability to validate email entries. When a user submits the form: If the email is incorrectly formatted, an error message will be displayed. If the email is correctly formatted, a confirmation ...

Numerous attributes for displaying ngOption values

I have an item that resembles the following: $scope.team = [ { name: "John", number: 1 }, { name: "Emma", number: 2 } ]; Currently, in my HTML code, I am using ngOption to populate a dropdown menu with values from the object. < ...

Utilizing PHP and AJAX to Extract Information from a MySQL Database

My goal is to fetch data from a MySQL database hosted on a webserver and display it in an HTML table. I've been following an example on W3Schools, but I'm facing issues retrieving the data successfully. Here is the source code: (HTML) <html& ...

Achieving fixed width and automatic height for images in Next JS: a guide

I am struggling to showcase a list of images with a fixed width while utilizing the original image height set at 100%. A similar inquiry can be found here, yet it remains unanswered. I have gone through the responses shared here and attempted them. The im ...

Firebase has flagged the Google Authentication process with a message stating: Entry denied: The request made by this application

I have connected my domain to Firebase authentication and granted authorization for authentication access. If you want to test it out, feel free to visit this link signInWithPopup(auth, provider) .then((result) => { // This provides a Google Acc ...

I'm looking to extract information from a webpage using Python by inputting specific criteria

Looking to gather information from a specific website - Link and save it either in a database or another location. The process involves providing input parameters such as entering the vehicle number, submitting it, then verifying if it matches your car. N ...

Set a maximum height for the <td> element within a table, regardless of the length of the text in neighboring cells

Here is the situation I'm dealing with: In the thread, the postbit (blue box with avatar inside) looks fine for most posts (the first three). However, the fourth postbit is vertically elongated due to longer post content. I have been trying differe ...

Problems with WordPress Theme Rendering in Outdated Versions of Internet Explorer

Currently, I am developing a website for Chase on the Lake at http://chaseonthelake.com/. While everything looks perfect in FireFox, there are some display issues when viewing it in Internet Explorer. The dropdown transparency is not showing correctly, m ...

Arrangement of box and buttons on R shiny interface

My dashboard page features action buttons aligned to the left, along with a plot and two additional zoom and reset buttons. I am looking to center the box on the screen and position the zoom and reset buttons at the top right corner. I attempted to use t ...

What are the reasons behind the issues encountered when enabling "Optimization" feature in Angular that affect the proper rendering of PrimeNg elements?

Angular Version : 9.x Primeng Version : 9.x We've encountered an issue with PrimeNg elements not rendering correctly in our dev/prod environments, although they work fine in the local environment. After some investigation, we found that the culprit ...

Adjust image width in column

After searching through various tutorials and Stack Overflow posts, I am still unable to properly resize my image in the right column. I have a layout with a left and right column - the left contains a menu and the right holds some content along with a ba ...

Exploring the world of XML parsing with iText

I am curious to learn whether it is feasible to modify the font, color, and size while converting HTML to PDF using xmlWorker.parser. Thus far, I have successfully parsed the input as is, but now I am seeking ways to customize the font, size, color, and ...

tips for transferring each div to a different location

I am looking to rearrange the div.my-div from containers into sections. How can I achieve this for each section? <section> <div class="container">container <div class="my-div">my div</div> </div> </section&g ...

Add a jQuery click function within a loop indefinitely

Hello there, I have a simple loop set up in PHP and I am trying to figure out how to create an event that triggers whenever the user clicks on any line generated by this loop. Here's my basic PHP while loop: <?php $x = 1; while($x <= 5) { ...

Unable to relocate CSS Loader Container

Can someone help me with adjusting the placement of my container? I'm struggling to maintain the styles while getting rid of the position: absolute; on the .dot class. Every attempt I make is resulting in the dots moving erratically! To clarify, I w ...

strange glitch found in jquery ui resizable

Experimenting with jquery UI, I came across an unusual bug. After clicking a button to make a div resizable, the div unexpectedly moves below the button. resizable.html: <html> <head> <link href="my.css" rel="stylesheet" type=" ...

CORS issue encountered by specific user visiting the hosted website

I recently developed a bot chatting website using Django and React, which I have hosted on HOSTINGER. The backend is being hosted using VPS. However, some users are able to see the full website while others encounter CORS errors where the APIs are not func ...

When applying a vertical-align property to both an anchor tag and a button with the same class, why is the span also aligned to the top?

Why is the span tag aligning to the top when I have only applied properties to the .btn class elements, and not targeted it directly? .btns { text-align: center; } .btn { text-decoration: none; border: 1px solid black; display: inl ...