The flex item is aligned with the label rather than the input box

I'm encountering an issue where the select element is aligning with the ID label instead of the input field. Is there a way to adjust the alignment without adding a label on top of the select element?

<div class="d-flex">
    <div class="d-flex flex-column">
        <label>ID</label>
        <input class="form-control form-control-sm" style="width: 13rem;" />
    </div>
    <select class="form-control" style="width: 13rem;">
        <option value="0">Select...</option>
        <option value="1">Other 1</option>
        <option value="2">Other 2</option>
    </select>
</div>
cssbootstrap-4flexbox

Answer №1

To ensure proper alignment, you can use the code align-items-end within the flex container (first example).

If you want the elements to line up correctly, it is important to also apply the class form-control-sm to the select element (second example).

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-end">
    <div class="d-flex flex-column">
        <label>ID</label>
        <input class="form-control form-control-sm" style="width: 13rem;" />
    </div>
    <select class="form-control" style="width: 13rem;">
        <option value="0">Select...</option>
        <option value="1">Other 1</option>
        <option value="2">Other 2</option>
    </select>
</div>
<hr />
<div class="d-flex align-items-end">
    <div class="d-flex flex-column">
        <label>ID</label>
        <input class="form-control form-control-sm" style="width: 13rem;" />
    </div>
    <select class="form-control form-control-sm" style="width: 13rem;">
        <option value="0">Select...</option>
        <option value="1">Other 1</option>
        <option value="2">Other 2</option>
    </select>
</div>

Answer №2

After reviewing your code, I have made some edits and believe this solution is ideal:

<div class="d-flex">
    <div class="d-flex flex-column">
        <label>User ID</label>
        <input class="form-control form-control-sm" style="width: 13rem;" />
    </div>
    <div class="d-flex flex-column">
        <label style="color: transparent;">ID</label>
        <select class="form-control" style="width: 13rem;">
            <option value="0">Select...</option>
            <option value="1">Other Option 1</option>
            <option value="2">Other Option 2</option>
        </select>
    </div>
</div>

Considering that you are working with bootstrap, there may be some interactions between my code and the bootstrap framework, so please test it out regardless.

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

Space separating the text and underline

Can anyone explain why padding-bottom or margin-bottom does not seem to have any effect on the underline in the li > a:before section? I tried adding padding-bottom but it doesn't create any space. Any suggestions? ul { list-style-type: none ...

htmlcss

What is the method for dynamically assigning navigator handles in highstock programmatically?

Can I dynamically adjust the markers in the highstock navigator? I'd like to keep the marker set as { type: "day", count: 1, text: "1d" }, but without displaying "Zoom 1d." ...

cssangularjshighcharts

Firefox now recognizes 4-digit hex color codes as rgba values during parsing

Recently, while using Firefox version 49, I accidentally discovered that it parses 4-digit hex colors as rgba. After referring to the CSS specification and searching through MDN, I couldn't find any documentation about this feature. Can anyone provide ...

cssfirefox

Learn how to incorporate a HTML page into a DIV by selecting an Li element within a menu using the command 'include('menu.html')'

I have a website with both 'guest' and 'user' content. To handle the different menus for logged-in and logged-out users, I created menuIn.html and menuOut.html files. These menus are included in my MainPage.php using PHP logic as sugges ...

javascriptphpjquerycssajax

Ways to align content in the center using Vuetify3

I have a component positioned at the top of the page, but I would like it to be centered instead. https://i.sstatic.net/wSFBP.png Something like this: https://i.sstatic.net/rfqAB.png Here is my current code: <template> <v-container class=" ...

cssvue.jssassvue-componentvuetify.js

Is it possible to insert an image into a text box? If yes, what is the process for doing

Is there a way to create a text area where users can upload images with the click of a button, similar to how Orkut allows for image insertion? I want the user to be able to select an image to be uploaded and have it automatically added to the text area ...

javascriptjqueryhtmlcssimage

Can anyone provide guidance on how to position a button on the right side of this bootstrap navigation bar?

I have used code from this particular topic: https://getbootstrap.com/docs/4.0/components/navs/#base-nav (Boostrap v4.0). Is there a way to position the "TRY NOW" button on the right side of the bootstrap base navigation? <link rel="stylesheet" href= ...

twitter-bootstrapbootstrap-4

Can you explain the purpose of using "link href="#""?

While browsing through the source code of a website, I came across this interesting snippet. <link href="#" id="colour-scheme" rel="stylesheet"> I'm curious, what exactly does this code snippet do? ...

htmlcss

I'm throwing in the towel on CSS, I just can't seem to get a simple button to sit at the bottom of

Struggling to position a button at the bottom of a div? I've tried everything I could find online but nothing seems to work! Here's my code: <ion-col > <div id="secondCol"> <ion-text> {{card.cardPo ...

htmlcssbuttondivision

Selectors in PHP DOMDocument that mimic jQuery's functionality

Currently, I am working with a DOMDocument and I am curious if there is a way to utilize CSS-like selectors to choose nodes similar to how it is done in jQuery. For instance, let's say I am analyzing an XML file and a portion of it appears as follows ...

phpjquerycssxmlcss-selectors

Modify the href attribute of an anchor tag that does not have a specified class or

I am currently using an event plugin that automatically links all schedule text to the main event page through anchor tags, like this: <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros c ...

javascriptjqueryhtmlcss

What could be the reason for the inconsistent resizing behavior of this DIV container?

Upon viewing this demo, it becomes evident that there is an outer DIV containing an inner DIV on the left side with two inner SPANS. The challenge lies in positioning the two SPANS next to the DIV. If a line break (BR) is used to separate them, the width o ...

htmlcss

Positioning parent and child elements using CSS

If you have a moment, please check out this URL where I've provided a more detailed explanation of the issue: How to Make an Image Responsive Within a Division I am looking to adjust the width of .slider-wrapper to 100%. Can anyone advise on how to u ...

htmlcsstwitter-bootstrap

Looking for assistance to properly center an image within a Bootstrap carousel?

I'm struggling to get the image centered within the slider. You can view my carousel by clicking on the following link: This carousel was created using react-bootstrap with next.js. In an attempt to center the image, I have added the following code ...

cssbootstrap-4react-bootstrap

Something bizarre is happening... a single variable is holding multiple values

Currently, I am in the process of developing a C++ program that involves dealing with CSS. However, I have encountered a perplexing issue that has me completely stumped. The problem lies within my class structure setup where I have a class called HTMLObje ...

htmlc++css

Unexpected problem discovered with Firefox and JqueryUI - content is misaligned within the dialog box

I seem to be having an issue with a dialog that I recently set up. I've been working with jqueryUi for quite a while so I'm not sure why I can't figure this out. When using Firefox, I noticed that the dialog opens and closes when clicking " ...

jquerycssjquery-uimodal-dialog

Troubleshooting a CSS template with padding and margin discrepancies

I have a question regarding my code: http://jsfiddle.net/spadez/rAQYL/1/ Within my code, I am attempting to accomplish three tasks but I seem to be encountering some difficulty. Eliminate padding below "admin" (where you see the green background) Get ...

htmlcss

using generated divs to target a pseudoclass

I have designed a webpage that utilizes the CSS :target selector to determine which tab of information should be displayed. These tabs are generated dynamically through AJAX-loaded data when the page is initially loaded. Below is a snippet of code showcasi ...

javascriptjqueryhtmlcss

Verify whether the text field is filled or not excluding the placeholder

How can I detect if a div is empty except for the placeholder element/value? Scenario 1: Div is empty <div id="textarea" contenteditable="true"> <span id="textarea-placeholder" data-text="Enter comment" ...

javascripthtmljquerycss

Display the menu upon activating the hover event icon using only CSS

Assistance Needed - Unable to activate hover and display the rest of the div I want to activate the hover effect where early levels are visible, and when hovering over the first level, the subsequent levels appear List item body { margin: 3%; } div.ti ...

htmlcss