Alignment of input fields and labels in Bootstrap by utilizing the Grid System

Currently, I am in the process of developing a form that includes multiple input fields. To organize these fields, I have utilized the Bootstrap 4 Grid system. However, I am encountering challenges when it comes to aligning certain input fields.

Snippet

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
    <br>
    <div class="row container">
      <label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled">
      <label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container">
      <div class="input-group mt">
        <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-3 ">
        <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-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <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-3 ">
        <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">
      <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-3 ">
        <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-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
        <label for="usr" class="col-lg-2 text-primary ">Selling Price
:</label> <input type="text" class="col-lg-3 form-control ">
      </div>
    </div>
    <br>
  </div>
</form>

On smaller screens, the alignment appears flawless, but on larger screens, the fields do not line up properly.

My goal is to achieve a design similar to this:

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

While enhancing the visual appeal with Bootstrap 4, my primary focus is to ensure proper field alignment across different devices.

htmlcssbootstrap-4

Answer №1

Implement the following styles

.container .input-group {
  align-items: center;
}

.container .input-group label {
  margin: 0;
}

Ensure there is an invisible button labeled "Cost price" and "Company Id," similar to the dropdowns, to maintain proper alignment of your fields.

<button type="button" class="btn btn-info dropdown-toggle invisible d-none d-lg-block"></button>


.container .input-group {
  align-items: center;
}

.container .input-group label {
  margin: 0;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray">
    <br>
    <div class="row container">
      <label class="col-lg-2 text-primary">Company Id :</label> <input type="text" class="col-lg-3 form-control" disabled="disabled"><button type="button" class="btn btn-info dropdown-toggle invisible"></button>
      <label for="usr" class="col-lg-2 text-primary ">Company Name
:</label> <input type="text" class="col-lg-3 form-control " disabled="disabled">
          
    </div>
    <hr style="border: 1px solid gray">
    <div class="row container">
      <div class="input-group mt">
        <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-3 ">
        <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-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <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-3 ">
        <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">
      <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-3 ">
        <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-3 form-control  ">
      </div>
    </div>
    <div class="row container">
      <div class="input-group mt-3">
        <label class="col-lg-2 text-primary">Cost Price :</label> <input type="text" class="col-lg-3 form-control">
        <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-3 form-control ">
      </div>
    </div>
    <br>
  </div>
</form>

Answer №2

Give this a shot:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<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" style="border: 2px solid gray; padding: 25px;">
<br>
<div class="row">
<label class="col-lg-2 text-primary">Company Id :</label>
<input type="text" class="col-lg-3 form-control" disabled="disabled">
<div class="col-lg-2"></div>
<label for="usr" class="col-lg-2 text-primary ">Company Name:</label>
<input type="text" class="col-lg-3 form-control " disabled="disabled">
</div>
<hr style="border: 1px solid gray">
<div class="row">
<div class="input-group mt">
<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-3 ">
<button type="button" class="btn btn-info dropdown-toggle col-lg-1" data-toggle="dropdown" style="margin: 0 -5px 0 5px;"></button>
<div class="col-lg-1"></div>
<label for="usr" class="col-lg-2 text-primary ">Item Name :</label>
<input type="text" class="col-lg-3 form-control  ">
</div>
</div>
<div class="row">
...

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 creating a responsive HTML5 form

I am trying to center and make my form responsive. Can you help me achieve that with the code below? HTML5 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ...

csshtml

Hovering over the Laravel Breeze dropdown will activate a dropdown feature

Recently, I've been working on a project with Laravel Breeze and have been utilizing some default components. The dropdown component used in the navigation bar caught my attention. By default, it requires a click for the menu to drop down below. Howev ...

htmllaravelvue.jstailwind-csslaravel-breeze

Creating a table-style format from a JSON string fetched via AJAX: a step-by-step guide

Hi, I recently started learning web programming and I've been facing some challenges with using AJAX to parse data as a string and display it in a table. [{"source":"1","name":"random","amount":"5"},{"source":"1","name":"random","amount":"5"}] After ...

javascriptphphtmlajax

JavaScript: Implementing dynamic image loading with JavaScript

In a tutorial, I came across this piece of JavaScript code focusing on loading an image to a canvas and performing manipulations afterward. To enhance clarity, I have removed irrelevant portions of the code. 1) I am puzzled as to why the line containing t ...

javascripthtmlimage

Setting the height of a div to 100% is not effective

I've designed a two-column layout. You can view the code on jsfiddle.net. My problem is that I want the center line with a width of 10px to have a height of 100%. I have a container div with the ID #obal (set to height: auto). When I set the height of ...

htmlcss

What is the best way to set up the Bootstrap 4 popover in a React project?

Struggling with implementing popovers in my project, following the guidelines at: https://getbootstrap.com/docs/4.0/components/popovers/. The documentation mentions that popovers are a plugin and require the tooltip plugin as well. After making changes to ...

javascripttwitter-bootstrapreactjsbootstrap-4

Adjustable Text Size with HTML5 and CSS3

Looking to enhance the accessibility of a website by implementing text size adjustment buttons ' A A A ' using just HTML5 and CSS3. Avoiding the use of jQuery or Javascript for this task. Inspiration drawn from this link. Appreciate any assistan ...

htmlcss

Creating Text Transitions with JavaScript in Qualtrics: An In-Depth Guide

Currently, I am creating a survey using Qualtrics and I require various texts that will fade in and out within the same area. The goal is to have text that changes every second, displaying the following: Choose a language Escolha um idioma Elija un idiom ...

javascripthtmlprototypejsqualtrics

What is the best way to ensure the main container fills the entire screen?

Given: Bootstrap 5.1 Visual Studio 2022 Professional Edition Blazor Server Application How do I modify the container to occupy the entire screen without any margins? <div class="container bg-primary"> Hello World! </div> Thi ...

csstwitter-bootstrapblazorbootstrap-5blazor-server-side

Adding link styles to the <a> tag in Bootstrap 4 Alpha 3: A simple guide

The following code is quite simple: <a>This is a link</a> In a demonstration of Bootstrap 4 Alpha 2 here, the link appears blue. When you hover over it, it turns dark blue. However, in a demonstration of Bootstrap 4 Alpha 3 here, it displays ...

csstwitter-bootstraptwitter-bootstrap-4

Website form phone number verification server

I am currently working on developing a website form where users can input their information, including their phone number. I am looking for a simple way to verify the user's phone number using PHP without the need for installation of SDKs or complex c ...

phphtmlwebsmsverification

Is there a way to automatically increase the input id when adding a new row?

I have been working on dynamically adding new inputs and trying to assign a new ID that increments by 1 each time I add a new input. However, I am facing an issue where the value is not incrementing as expected. Can someone please help me identify what&apo ...

jqueryhtml

Inconsistent Animation Issue with jQuery Toggle for Expanding Div and Text

My expanding div functionality is almost perfect, but I've noticed that the transition when opening abruptly on divs with text. However, the closing transition is smooth. Can anyone help me make the opening transition as smooth as the closing one? Bel ...

javascriptjqueryhtmlcss

What may be causing the MuiThemeProvider to override the style of a component?

Within my outer component, I am utilizing MuiThemeProvider: <MuiThemeProvider theme={full_theme_e}> <div> <AppBar /> <Filter /> </div> </MuiThemeProvider> Inside the Filter component, I have specified a ...

cssreactjsmaterial-ui

A fixed HTML div with a relative div is like having your own

I am in search of two divs with the following styles: <div style="height:20px;" /> <div style="height:100%;" /> These divs result in one being 20px tall and the other spanning 100% of the screen height, causing a vertical scrollbar that is eq ...

html

I am having trouble adjusting my web page to fit the screen fluidly as it appears too large and requires horizontal scrolling

As a student learning html/css, I am currently facing some challenges with my first website. My main issue is setting up the page to be fluid rather than fixed. The box, image, and text are all configured to be absolute on the page, but I cannot seem to ma ...

htmlcss

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

What is the best way to control the overflow length and display only a specific amount of content at once?

I am currently designing the homepage for a social media platform. I have around 45 dummy posts and I am looking for a way to limit the overflow in CSS so that only 5 posts are displayed at a time. Once the user reaches the bottom of those 5 posts, another ...

javascripthtmlcssreactjsmaterial-ui

Having trouble accessing the 'checked' property of the checkbox

I've been developing a web application using Vite, JavaScript, jQuery, and Bootstrap. I'm facing an issue where the jQuery .is(':checked') function is not working as expected on one specific page. Despite the checkboxes being checked, t ...

javascripthtmljquerycheckboxbootstrap-5

The hover effect is implemented across all image elements

Below is the code snippet in question: #mg1 { margin-left: 3%; } #mg1:hover { margin-top: 4%; } <div id="section1"> <center> <div id="bgp"> <center> <p>THUMBNAILS</p> </center> ...

htmlcss