Column alignment in Bootstrap 4

My objective is to create a page consisting of multiple rows, each containing a label column, a control column, and an optional unit of measure column. I aim for the label column to be consistent across all rows, adjusting to fit the longest label. To achieve this, I am utilizing Bootstrap 4 as a support for my limited HTML expertise. While I have conducted some initial experiments, I suspect that using row and col classes may not be the most effective approach.

  • By aligning columns in this manner, resizing the browser window causes all columns to shrink even if there is ample white space available on the right side.

  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
    </script>
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-1">
          Label
        </div>
        <div class="col-sm-1">
          <input type="number" class="form-control">
        </div>
        <div class="col-sm-1">
          min
        </div>
      </div>
      <div class="row">
        <div class="col-sm-1">
          Longer Label
        </div>
        <div class="col-sm-1">
          <button type="button" class="btn btn-primary">Primary</button>
        </div>
        <div class="col-sm-1">
        </div>
      </div>
    </div>
  • This alternative method results in fixed columns, where each label column has its own width and are not aligned with each other.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>

<div class="container-fluid">
  <div class="row">
    <div class="col-auto">
      Label
    </div>
    <div class="col-auto">
      <input type="number" class="form-control">
    </div>
    <div class="col-auto">
      min
    </div>
  </div>
  <div class="row">
    <div class="col-auto">
      Longer Label
    </div>
    <div class="col-auto">
      <button type="button" class="btn btn-primary">Primary</button>
    </div>
    <div class="col-auto">
    </div>
  </div>
</div>

Therefore, I am considering the use of jQuery to standardize the widths of all first columns, although I remain unsure if this is the optimal approach.

Answer №1

It's not recommended to use jquery for layout design like this. CSS is the preferred method for creating layouts, unless there are specific circumstances that require a different approach.

CSS flexbox would be the perfect solution in this scenario. While Bootstrap is useful, mastering CSS flexbox will provide more flexibility and control over layouts.

To achieve the desired layout, create a flex row and apply flex:1 and max-width properties to the label element.

Check out this example on CodeSandbox

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

extracting an attribute from a class's search functionality

Let's consider the following HTML structure: <div id="container"> <div> <div class="main" data-id="thisID"> </div> </div> </div> If I want to retrieve the value inside the data-id attribute ...

Exploring the combination of Playframework, jQuery Mobile, and file uploads using

I'm running into a bit of trouble trying to upload a file for twitter using scribe, play framework, and jquery mobile. Could someone please assist me in setting the correct parameters for sending a file via $.ajax to play framework? Here is the cont ...

Upon the second attempt, AJAX encounters an error while trying to access the URL, forcing a page refresh

My AJAX function works flawlessly on the first request, but encountering a strange issue on the second request where the site reloads without any errors showing up in Chrome DevTools. The network tab doesn't register the request, and neither the succe ...

Utilizing Shopify API to seamlessly add items to cart without any redirection for a smoother shopping experience

Looking for a solution to submit an add to cart POST request without any redirection at all? I have tried changing return_to to "back" but that still reloads the page, which is not ideal. My goal is to smoothly add the item to the cart and notify the cli ...

Problems with the bottom section

Is there a way to make the middle section extend downwards when the window is resized, keeping the footer at the bottom without overlapping with the content? If anyone has suggestions on how to achieve this, please share! I'm hoping there's a b ...

Problem with rendering Ionic v2 HTML in Angular 2

Issue at Hand: Currently, I am developing a hybrid app using Ionic v2 and everything seems to be functioning correctly. When I use ionic serve, the app works as expected in the browser with no issues. However, when I try running the app on an Android devi ...

How can I retrieve a Jquery tooltip from a HiddenField?

I am trying to utilize a hidden field in my asp.net calendar to display a message using JQ Tooltip. However, when I attempt to use the value of the HiddenField for the tooltip, I encounter an error. $("#hf_taskID_cal").tooltip($("#hf_taskID_cal").val()); ...

What is the process for activating angular.js animation code within your JavaScript file?

Upon reaching the app.controller section, a console.log statement is executed in the Fourth line of angular.js code, displaying output in the console. Why is the animation code not working as expected? Does the ng-repeat directive support repeating element ...

Avoid displaying the identical div through consecutive random fade-ins and fade-outs

I'm trying to make a JavaScript function that selects a random div from a list of divs, displays it for a few seconds, fades it out, and repeats this process in a loop. The issue I'm facing is that sometimes the same div is selected consecutively ...

javascript display an alert when the page is loaded

My customer wants to display an alert upon visiting a website. The problem is, alerts pause the page loading until the user clicks "Ok," and the client needs the page to continue loading in the background while the alert is visible. We could create a cus ...

Issue with AngularJS causing HTML input field to limit the display to only three digits

Whenever I input a number with 4 digits or more (excluding decimals) into the designated box, it mysteriously disappears once I click away (blur). Could it be due to the currency filter causing this issue? Even though the model retains the value when logg ...

"Implement a feature that allows users to click on an image in a queue using

These are the images I have: <img src=img1.jpg class=pic /> <img src=img2.jpg class=pic /> <img src=img3.jpg class=pic /> <img src=img4.jpg class=pic /> <img src=img5.jpg class=pic /> <img src=img6.jpg class=pic /> .Sh ...

What is the reason for utilizing letters as function name and parameters in JavaScript?

(function (a) { var r = a.fn.domManip, d = "_tmplitem", q = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /, b = {}, f = {}, e, p = { key: 0, data: {} }, h = 0, c = ...

Issues with the alignment of ion-grid in Ionic/Angular application

I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. ...

Utilizing JQuery to modify the anchor tag's href attribute based on the content of a Div

I am encountering an issue with updating the href value in an anchor tag. My goal is to utilize a cluetip feature that displays a tooltip page based on the employee ID of the logged-in user. Here is the Cluetip Code: $(document).ready ( fun ...

Place two divs within a parent div, with one div aligned at the top and the other at the bottom

Here is the code snippet I am working with: <div id="container"> <div id="1"> div 1</div> <div id="2"> div 2</div> </div> I am looking to rearrange the order so that div 1 is positioned at the top and div 2 is ...

Display my search box when the button is activated

I have a button labeled "Search" that I want to click in order for my search field (which is currently hidden with display:none) to become visible. However, my current setup is not working as intended. I have created a jsfiddle to illustrate my issue. Al ...

Issue with JQuery integration in ListView components

My goal is to restrict certain textboxes to accept only numbers using jQuery. However, the code snippet I have below is not working when applied to a textbox inside a ListView or on another asp.net page. $(document).ready(function () { $("#<%= ...

Using Angular and ASP.NET for image uploading functionality

Trying to source the image from the PC and upload it into the database as "Images/aaa.jpg". I am relatively new to Angular and have attempted an example that did not work for me. I have been stuck on this issue for almost 3 days trying to find a solution. ...

tables that are intertwined

There are three tables on my page and they are all overlapping. Is there a way to prevent this overlap? Check out this link <table id="inventoryTable" class="table dataTable" aria-describedby="inventoryTable_info"> <thead& ...