Attempting to position the input field beside the label

I need help aligning the input field box next to my label. Currently, there is a gap between the text (label) and the input field when clicking on Item#1 and Invoice Number. I want the input field to be directly next to the label. Can anyone assist me with this? Below is a link to a jsfiddle example:

https://jsfiddle.net/silosc/7amzvfL6/6/

Here is the code snippet:

<div class="accordion" id="accordion1">
   <div class="accordion" id="accordion1">

    <div class="accordion-group">
        <div class="accordion-heading" id="item1" onclick="changeIcon('item1')">
            <p class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <i class="fa fa-angle-down" onclick="changeIcon('id')">
                    Item #1
                </i>
            </p>
        </div>
        <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
            <div class="accordion-inner">
                <div class="accordion" id="accordion2">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneOne">
                                <i class="fa fa-angle-down">
                                    Invoice number:
                                </i>
                            </a>
                        </div>
                        <div id="collapseOneOne" class="accordion-body collapse" style="height: 0px;">
                            <div class="accordion-inner">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label>Tracking #:</label>
                                        <input />
                                    </div>
                                    <div class="col-sm-4">
                                        <label>From Street:</label>
                                        <input />
                                    </div>
                                    <div class="col-sm-4">
                                        <label> To Street:</label>
                                        <input />
                                    </div>
                                </div>
                                <br />
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label>Div. Code #:</label>
                                        <input />
                                    </div>
                                    <div class="col-sm-4">
                                        <label>Invoice #:</label>
                                        <input />
                                    </div>
                                    <div class="col-sm-4">
                                        <label> Bill Date:</label>
                                        <input />
                                    </div>
                                </div>
                                <br />
</div>


<Style> 
   .row label{
        display: inline-block;
        text-align: right;
        float: left;
        margin: 0 auto;
        width: 210px;

    }

    .row input{
        display: inline-block;
        text-align: left;
        float: right;
        margin: 0 auto;
        width: 210px;

    }
    .dropbtn {
        background-color: orangered;
        color: white;
        padding: 16px;
        font-size: 12px;
        cursor: pointer;
        border: none;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

            .dropdown-content a:hover {
                background-color: #f1f1f1
            }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

    .btn {
        background-color: orangered;
        color: white;
        padding: 16px;
        font-size: 20px;
        cursor: pointer;
        border: none;
        border-radius: 16px;
    }

        .btn:hover {
            background-color: #3e8e41;
            color: white;
        }

    .accordion-heading a {
        color: black;
        font-weight: bold;
        font-size: 25px;
    }

    .accordion-heading p {
        font-weight: bold;
        font-size: 25px;
    }

    .accordion-inner label {
        font-size: 20px;
    }

    .commentbox {
        align-content: center;
    }
</Style>

Answer №1

To properly utilize bootstrap, it is recommended to implement the following structure:

<div class="form-group row">
    <label class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" class="form-control">
    </div>
</div>

It is advised to remove any custom styles as they are redundant in this context.

Answer №2

One approach is to utilize the form-row together with the grid auto layout columns for the label/input pairs. This method allows the label columns to adjust based on their content. However, the downside is that each consecutive row may not align perfectly with adjacent rows...

<div class="form-row">
    <label class="col-form-label col-sm-auto">Tracking #:</label>
    <input class="col" />
    <label class="col-sm-auto">From Street:</label>
    <input class="col" />
    <label class="col-sm-auto">To Street:</label>
    <input class="col" />
</div>
<br />
<div class="form-row">
    <label class="col-form-label col-sm-auto">Div. Code #:</label>
    <input class="col" />
    <label class="col-sm-auto">Invoice #:</label>
    <input class="col" />
    <label class="col-sm-auto">To Bill Date:</label>
    <input class="col" />
</div>

Another method is to employ the form-row with the classic grid columns for the label/inputs. This ensures that each row aligns properly, and then incorporating text-right to position the labels on the right side...

<div class="form-row text-right">
    <label class="col-form-label col-sm-2">Tracking #:</label>
    <input class="col" />
    <label class="col-sm-2">From Street:</label>
    <input class="col" />
    <label class="col-sm-2">To Street:</label>
    <input class="col" />
</div>
<br />
<div class="form-row text-right">
    <label class="col-form-label col-sm-2">Div. Code #:</label>
    <input class="col" />
    <label class="col-sm-2">Invoice #:</label>
    <input class="col" />
    <label class="col-sm-2">To Bill Date:</label>
    <input class="col" />
</div>

Check out a demonstration of both techniques here:

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

Height of the div dynamically increases upwards

Just a quick question - is there a way to make position: fixed divs at the bottom of an element (such as the body) grow upwards as content is dynamically added? Maybe something like anchor: bottom or increase: up? I'm thinking that using JavaScript m ...

What is a method to prevent a div from being rendered in CSS, rather than simply hiding it from view

Although I am aware that the div can be hidden using CSS, its persistent existence is causing layout issues. Is there a way to completely eliminate any rendering of the div so that it ceases to exist? ...

Concerns with the Width of Gutters in Susy

I am working with a 24 Susy column grid and trying to create boxes that span 6 columns each, allowing for 4 boxes per row. However, I also want to add gutters around them within a wider container that is 24 columns wide. Despite my efforts, the columns do ...

The functionality of scrolling ceases to work once the bootstrap modal is closed

I am utilizing Bootstrap v3.1.1 to showcase a modal popup on one of my web pages. The following code shows how I have implemented it. <!--Start show add student popup here --> <div class="modal fade" id="add-student" tabindex="-1" role="dialog" a ...

Printing from a Windows computer may sometimes result in a blank page

Looking to incorporate a print button into an HTML page, I'm facing an issue. The majority of the content on the page should not be included in the printed version, so my approach involves hiding everything in print and then showing only the designate ...

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

Is there a way to modify the style value within AngularJS?

<div class="meter"> <span style="width: 13%"></span> </div> I have the following HTML code snippet. I am looking to update the width value using AngularJS. Does anyone have a solution for this issue? ...

Nested divs with CSS padding inside

I'm curious about the excessive padding above and below the text in this fiddler box. http://jsfiddle.net/fZ6d7/1/ CODE <style> .simplebox { padding: 6px; background: #eee; border-radius: 8px; border: 1px ...

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

I am interested in showcasing a single image at the forefront of the page when it is selected. While there are numerous plug-ins that offer this feature, many come with unnecessary extras like galleries, video support, and thumbnails which I do not requir ...

Arranging elements within a div using inline positioning

Currently, I am trying to arrange elements within a div. Below is the div that needs positioning: https://i.sstatic.net/5nZUt.jpg This is the desired layout: https://i.sstatic.net/vXSV9.jpg Here is the HTML and CSS code snippet: #channel-header * { ...

Can a local image be incorporated into an HTML or CSS project through the use of Javascript or alternative methods?

I've been trying, but all I can manage is: <img width='220' height='280' src='chrome-extension://okjaohhbffepkcfacapapdhkmnebgiba/johnny.jpg' class="me"/> Unfortunately, this code only works in Chrome. Is there a ...

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

Bootstrap 4, with nested rows and columns set to full height

I'm attempting to create a header for my website that resembles the design shown here: https://i.sstatic.net/jn7kg.jpg Below is the code I have created using Bootstrap 4. <div class="container h400"> <div class="row h-100"> <div c ...

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Source Code Repository: https://github.com/qcaodigital/cocktail_curations Live Site: I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change ...

How can we align the Recaptcha and Send button with the text box in a DIV using CSS exclusively?

Struggling to line up my send button and recaptcha with the end of the text box in a contact form in a responsive manner. I've spent days trying to make it work without success. Check out my jsfiddle here: Example Here's the current CSS: /*cust ...

Creating a Pop-Up on Website Load with HTML, CSS, and Jquery

<script> // utilizing only jquery $(document).ready(function(){ $('#overlay-back').fadeIn(500,function(){ $('#popup').show(); }); $(".close-image").on('click', function() { $('#po ...

The loader image does not appear on mobile screens during an AJAX call, but it functions correctly on desktop screens

While I have successfully implemented a loader (.gif) using a div tag in an AJAX call for desktop screens, the same code is not functioning properly on mobile devices. Instead of displaying the loading animation, it simply shows a white screen. <div ...

Step-by-step guide for implementing LoadGo animation with HTML

I'm in the process of loading my logo on my website's homepage. I found a LoadGo animation that I want to use, which can be downloaded Here Currently, the logo is set to load when a button is clicked. However, I would like it to load automatical ...

The second pop-up modal fails to appear

I have successfully implemented 2 modal windows with the help of bootstrap. The first modal is used for adding a user to the database, and the second one is meant for editing an existing user. While the first modal works perfectly fine, the editing modal d ...