Tips for positioning Bootstrap form labels and input fields in alignment

Currently, I am enhancing bootstrap-4 forms that consist of multiple input fields and labels. The form is functional, but I aim to elevate its visual appeal and user-friendliness.

Working Snippet

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>

  <div class="container-fluid" style="border: 2px solid gray">
    <br>
    <div class="row container">
      <div class="input-group ">
        <label class="col-lg-2  text-primary">Company ID :</label> <input type="text" class="col-lg-4  form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-2 text-primary ">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container-fluid">
      <div class="input-group ">
        <label for="usr" class="col-lg-2 text-primary ">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Category Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Category Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Sub Category Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Sub Category Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Unit Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Unit Name :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">Supplier Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">Supplier Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">GST Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-2 text-primary ">GST Percentage :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">SGST Percentage:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">CGST Percentage:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-2 text-primary ">Cost Price :</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">Selling Price :</label>
        <input type="text" class="col-lg-4 form-control  ">
        <label for="usr" class="col-lg-2 text-primary ">MRP:</label>
        <input type="text" class="form-control col-lg-4 ">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label for="usr" class="col-lg-2 text-primary ">Box Weight:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i>&nbsp;Save
</button>
    <button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i>&nbsp;Clear
</button>
    <button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i>&nbsp;Close
</button>

    <br>
    <br>
  </div>

</form>

While the output appears fine on smaller devices, there are certain issues encountered on larger screens:

  • There seems to be excess space between label and input field, causing the input fields to appear narrower than desired in a row of 4 elements.
  • The header containing "Company ID" and "Company Name" needs to be centered on larger screens.
  • For input fields without dropdowns, they should occupy the full width as seen on small devices.

To address these issues, here are the changes I'm attempting:

https://i.sstatic.net/0XFgz.png

I intend for input fields with dropdowns to display both the input field and dropdown selection options.

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

htmlcssbootstrap-4

Answer №1

To achieve this effect, consider the following code snippet:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<style>
    .container {
        margin: 5px auto;
        padding: 5px;
        color: #17A2B8;
        font-family: Verdana, Geneva, sans-serif;
    }
    h1 {
        text-align: center;
    }
    .btn, .btn-outline-secondary {
        border-color: #17A2B8;
        background-color: #17A2B8;
        color: #ffffff;
    }
    .btn:hover, .btn-outline-secondary:hover {
        background-color: #ffffff;
        color: #17A2B8;
        border-color: #17A2B8;
    }
    .show > .btn-outline-secondary.dropdown-toggle {
        color: #ffffff;
        background-color: #17A2B8;
        border-color: #17A2B8;
    }
</style>

<div class="container">
    <h1>Form</h1>
    <form>
        ...
        [Placeholder HTML for form inputs]
        ...
    </form>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

You can also customize and add placeholders based on your specific requirements.

Answer №2

To enhance the visibility of the inputs, I decided to adjust the column sizes in the code. Specifically, I converted all instances of "col-lg-2" to "col-lg-1" and changed "col-lg-4" to "col-lg-5". This modification has made the inputs appear more substantial on wider screens. You can view the updated version on CodePen.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form>

  <div class="container-fluid" style="border: 2px solid gray">
    <br>
    <div class="row container" id="center">
      <div class="input-group ">
        <label class="col-lg-1  text-primary">Company ID :</label> <input type="text" class="col-lg-5 form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-1  text-primary ">Company Name :</label> <input type="text" class="col-lg-5 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container-fluid">
      <div class="input-group ">
        <label for="usr" class="col-lg-1 text-primary ">Item Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-5 form-control  ">
        <label for="usr" class="col-lg-1 text-primary ">Brand Code:</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-5 ">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
        <label for="usr" class="col-lg-1 text-primary ">Brand Name:</label>
        <input type="text" class="col-lg-3 form-control ">

      </div>
    </div>
    <div class="row container-fluid">
      <div class="input-group mt-3">
        <label for="usr" class="col-lg-1 text-primary ">Category Code :</label>
        <div class="dropdown-menu ">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
        … (truncated for brevity) 
    </div>
    …
</form>

Answer №3

I previously addressed a similar issue on this thread. The challenge with setting a specific column width is that it may not accommodate all label sizes due to variations in width.

Several workarounds exist, such as utilizing CSS grid or table-cell width. However, in my opinion, the simplest solution involves applying display:table-cell along with a media query for screen widths above a certain threshold. Additionally, ensure proper markup by using col-form-label and organizing input groups accordingly.

      <div class="form-row align-items-center">
            <label for="usr" class="col-form-label col-md-2 text-primary">Item Code:</label>
            <div class="input-group col-lg col-md-4 align-items-start py-2">
                <input type="text" class="form-control">
                <div class="input-group-append">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"></button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
                    </div>
                </div>
            </div>
            ...
      </div>

See a live demonstration here:

Please note: Avoid combining row and container-fluid within the same element.

Answer №4

In my previous comment about alignment, I made adjustments to the code for the first row. The rest have been commented out; if you approve, we can proceed further.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<form>

  <div class="container-fluid" style="border: 2px solid gray;float: left;width: 100%;">
    <br>
    <div class="row container" style="float: left;width: 100%; margin: auto 6% auto 6%;">
      <div class="input-group ">
        <label class="col-lg-2  text-primary">Company ID :</label> <input type="text" class="col-lg-4  form-control" disabled="disabled">
        <button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>
        <label class="col-lg-2 text-primary">Company Name :</label> <input type="text" class="col-lg-4 form-control " disabled="disabled">
      </div>
    </div>
    <hr style="border: 1px solid gray;float: left;width: 100%;">


<div class="row container-fluid">
      <div class="input-group mt-3">
        <div class="col-lg-3">
        <label for="usr" class="col-lg-12 text-primary">Item Code :</label>
        <div class="dropdown-menu col-lg-2">
          <a class="dropdown-item" href="#">Link 1</a> 
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
        <input type="text" class="form-control col-lg-10" style="float:left;margin:auto;width: 83%;">
        <button type="button" class="btn btn-info dropdown-toggle col-lg-12" data-toggle="dropdown" style="height: 36px;width: auto;"/>
    </div>

    <div class="col-lg-3">
        <label for="usr" class="col-lg-10 text-primary ">Item Name :</label>
        <input type="text" class="col-lg-10 form-control  ">
    </div>

    ...
    
    // Some code has been removed for brevity

    ...

   <!-- Original code commented out -->

    <hr style="border: 1px solid gray">

    <button id="btn-search" class="btn btn-default " type="submit">
<i class="fa fa-save"></i>&nbsp;Save
</button>
    <button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-eraser'></i>&nbsp;Clear
</button>
    <button id="btn-search" class="btn btn-default " type="submit">
<i class='fa fa-window-close'></i>&nbsp;Close
</button>

    <br>
    <br>
  </div>

</form>

When viewed on a browser, this code provides perfectly aligned text boxes for small screens.

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

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

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

htmlcssangularflexbox

Is it possible for me to generate HTML using JavaScript?

Below is the javascript code I have written, saved as create.js: var stuff = document.querySelector(".stuff"); var item = document.createElement('div'); item.className = 'item'; stuff.appendChild(item); This is the corresponding HT ...

javascripthtmlcssdom

Tips for Choosing Two Classes Using CSS

I'm currently exploring ways to select two classes so that when one of them is hovered over, a specific animation will occur. Here is my latest attempt: .news1 { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-i ...

htmlcss

Using Javascript to open a new page and execute a script

I need to be able to launch a new window window.open(url,'_blank'); After that, I want to execute a JavaScript script like this: window.open(url,'_blank').ready("javascript code here"); However, I'm unsure how to accomplish thi ...

javascripthtml

Utilizing SCSS Interpolation within a mixin invocation

My goal is to incorporate a simple interpolation into a mixin call: $shapes: "square", "square-green", "circle"; $platforms: "facebook", "twitter", "linkedin", "gplus", "feed"; @each $shape in $shapes { @include sprite-#{$shape}; @each $platform ...

csssass

Comprehending the Syntax of the ExtJS Framework

I have recently inherited a project utilizing Sencha's ExtJS framework without any handover or documentation. As I navigate through the code, I find myself trying to decipher certain syntax and exploring resources tailored for newcomers to this specif ...

javascriptjquerycssextjs

Fancybox causing issue with submit button functionality

When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...

phphtmlfancyboxfancybox-2fancybox-3

Attempting to create a discord bot using Selenium in Python for seamless integration

I am currently attempting to create a Discord bot using Selenium in Python. I have been working on the script to connect the bot to my discord account. Below are the required imports: from selenium import webdriver from selenium.webdriver.common.keys imp ...

pythonhtmlseleniumweb-scrapingbots

Update the height definition for the alert box

I need to adjust the height of my alert box, so I attempted the following: @alert-box: 60px; .alert-msg { height: @alert-box; margin: 20px 0px; } However, the outcome was In the image provided, it is evident that the text within the secon ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

I am attempting to calculate the ratio of height and width for each image on a webpage. Unfortunately, I am consistently receiving a NaN result and I cannot figure out why. I have been using get() and find() <div class='image-wrapper'> ...

jqueryhtml

Deleting an item from a Vue.js list

I'm currently working on a project to develop a basic webpage that allows users to add or remove textboxes using vue.js. new Vue({ el: "#app", data() { return { list: [] }; }, methods: { deleteFromList(index) { this ...

javascripthtmlcssvue.jsweb

Creating geometric designs on an image and storing them using PHP

I am attempting to retrieve an image from a specific location on my server, draw lines on it, and then save the modified image back to the same location. Below is the code I am using: function drawShapes($src_path, $json) { echo "---inside dra ...

phphtml

obtain the image number by extracting a portion of the text

How can I extract the image number from a string using the sub-string function? I have applied the sub-string function to the property below. It returns 3 at the end in Chrome, but it does not work properly in Mozilla. Issue : After "-->", when I chec ...

javascriptjqueryhtmlcss

Determine the precise x and y coordinates of a centered element using JQuery

How can I determine the exact left and top positions of an element? The parent container has text-align: center, causing potential confusion when there are multiple elements on the bottom row. For instance, the first one may have a position of 0px instea ...

javascriptjquerycsspositiontext-align

Height that is determined in real-time

I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

css

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

javascriptjqueryhtmlcss

Expanding the size of one div causes the surrounding divs to shift positions

I am currently working on creating a row of divs that expand when hovered over by the mouse. I have managed to achieve this functionality, but now I want the expanding div to cover its neighboring divs partially, without affecting their sizes or moving the ...

javascripthtmlcss

I'm experiencing an issue when trying to align TextPath to the center in an SVG file - a certain character

When using the startOffset or text-anchor attributes, I noticed that some characters are missing. How can I fix this issue? Thank you. It appears that in this scenario, the characters `1234` are missing. <svg xmlns="http://www.w3.org/2000/svg" versi ...

javascriptcsssvg

When the next button is clicked, the button content disappears

I am struggling with a problem involving two buttons that store tables. The issue is, I want the table to disappear when the second button is clicked and show the contents of the second button immediately after clicking it once, rather than having to click ...

javascripthtmlcssbuttonsvg

Four boxes sharing identical code, yet yielding distinct outcomes

Can someone help me understand the concept of positioning in CSS? I created a simple code with 4 boxes that have identical width and height settings. When I position them as fixed or absolute, they look fine and identical. However, when I position them wit ...

cssposition