Creating a Bootstrap 4 column form label with a maximum width limit

I am currently working on creating a form within a full-width fluid layout that consists of 2 columns - the label column and the inputs column.

The issue I'm running into is that due to the wide screens on fluid layouts, the col-2 label appears too large while the col-1 label seems too small.

Is there a method to set a maximum width for the col-form-label column or would I need to develop custom CSS for these columns?

Here's a simple demo: https://codepen.io/seltix/pen/aWgVjR

<div class="formcontainer">
  
  <div class="form-group row">
    <label class="col-12 col-lg-2 col-form-label">Label</label>
    <div class="col-12 col-lg-10">
      <input class="form-control" type="text" value="">
    </div>
  </div>
  
  <div class="form-group row">
    <label class="col-12 col-lg-2 col-form-label">Longer label</label>
    <div class="col-12 col-lg-10">
      <input class="form-control" type="text" value="">
    </div>
  </div>
  
  <div class="form-group row">
    <label class="col-12 col-lg-2 col-form-label">Longer label (extra)</label>
    <div class="col-12 col-lg-10">
      <input class="form-control" type="text" value="">
    </div>
  </div>
  
</div>

Bootstrap 4 form source:

htmlcssbootstrap-4dynamic-columns

Answer №1

When working with Bootstrap 4, the col-lg-2 class has a max-width of 16.6667% and is designed for screens with a min-width of 992px. If you need to customize the maximum width of these columns in this view, you can create your own custom classes like so:

Custom CSS Styles

@media(min-width: 992px) {
      .col-percent-13 {
           max-width: 13% !important;
      }
    }

@media(min-width: 992px) {
          .col-percent-11 {
               max-width: 11% !important;
          }
        }

HTML Examples

<div class="form-group row">
    <label class="col-12 col-lg-2 col-form-label col-percent-13">Label</label>
    <div class="col-12 col-lg-10">
      <input class="form-control" type="text" value="">
    </div>

<div class="form-group row">
    <label class="col-12 col-lg-2 col-form-label col-percent-11">Label</label>
    <div class="col-12 col-lg-10">
      <input class="form-control" type="text" value="">
    </div>

Feel free to adjust the width values and class names according to your needs.

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

Can you help me troubleshoot an issue I am facing with the expand table in Angular 9 and JS? I am getting an

Here you can find the code demonstration and behavior: No extensive explanation is necessary. Check out the StackBlitz demo by clicking on the first row to view its details. Then, click on the second row to see how the details from the first row are repl ...

javascripthtmlangulartypescript

What is the best way to insert an image icon within an input field using bootstrap?

I am currently working on enhancing the design of my input text field by incorporating an image icon using Bootstrap. I have successfully used a font-awesome icon within the input tag as an example. Here is the example of what I have implemented: https:/ ...

htmlcssbootstrap-4

How to Retrieve Multiple Values by Passing Arguments using AJAX, PHP, and MYSQL

I am currently working on developing an ajax Based Search feature. This is just a demo showing how it will function. However, I have encountered an issue with returning the results. I want to display the result twice, but it is only appearing once. Below i ...

phpmysqlhtmlajaxjquery

The logo on my header is being covered by the menu due to the CSS code

Check out my website at bee-barcelona.herokuapp.com I'm facing an issue where the menu overlaps with the logo when I resize the browser or view the webpage on a tablet. I want to fix this using CSS. What changes do I need to make to ensure that the e ...

htmlcss

What is the most effective way to showcase PHP Multidimensional Arrays?

Is there a way to utilize the foreach loop in PHP to display this content as a list? I am aiming to present it in a list format. $quantity=0; $quantities = array( array('Jan',($quantity += $ppmpitem->m1)), array ...

phphtmlarraysmultidimensional-arraydisplay

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

Looking to connect several points with a curve rather than just a straight line. I attempted using the lineTo() and bezierCurveTo() methods to draw the points. Is there anyone who can assist me in solving this dilemma? Perhaps there is a different approac ...

javascripthtmlcanvas

The div is incorrect and causing the label and input to move in the wrong direction

Whenever I try to adjust the position of the current-grade-name-input, the entire grade-point-input moves along with it inexplicably. /* final grade calculator: (wanted-grade - (current-grade * (1 - final%))) / final% Ex: have a 80 an ...

javascripthtmlcss

What is the reason for the jquery change event failing to fire when the select value is modified using val()?

I'm experiencing a peculiar issue where the logic inside the change() event handler is not triggering when the value is set using val(), but it does work when the user manually selects a value with their mouse. Any idea why this might be happening? & ...

jqueryhtmlselectinput

Is there a way to eliminate the .html extension from the end of URLs for web pages?

Can someone provide guidance on how to eliminate the .html extensions from file names? Specifically, I noticed this feature on the site tekmillion.com. Your assistance is greatly appreciated. Thank you! ...

html

I seem to be experiencing difficulties with my dropdown menu as it is not

Having trouble creating a dropdown menu in HTML and CSS? If the subset of items in the parent items <ul> tags is not displaying properly on hover, you're not alone. The child items may be invisible or displayed incorrectly across the page. Chec ...

htmlcss

Pug conditional elements not styling with CSS

Currently immersed in the world of Pug, node.js, and express as I build a web application. Facing hurdles when trying to style elements within Pug conditionals using CSS. For instance, consider this Pug snippet: div(id='outside') if authoris ...

javascripthtmlcssexpresspug

Validate if a certain value exists within an array of data using NgIf

Is there a way to verify the existence of a value in an array of data? gjhg = [ id, name ] ...

javascripthtmlangular

Exploring the options: choosing an element from a dropdown menu using a div tag

Struggling to choose an option from a drop-down that contains a div tag instead of the usual select tag. While my code successfully opens the corresponding div, it fails to select the desired element. Here is the snippet of HTML tags: <div id="selecta ...

javahtmlmavenseleniumautomation

Move your cursor over the top and bottom of the image to experience distinct effects

Trying to create an effect where the top 50% of an image shows a different color and text when hovered over, and same for the bottom 50%. Currently, only able to achieve this effect for the lower half of the image. Is there a way to make it work for both h ...

htmlcss

Flawlessly Outputting PHP and HTML

When querying a result from a table, I face an issue where the text does not automatically wrap to a new line if it's too long. This results in the text being displayed on a single line and often extending off the page. How can I ensure that the text ...

phphtml

Resource loading unsuccessful: server returned a 405 status code, indicating method not permitted

An error occurs when attempting to send an email using PHP. Failed to load resource: the server returned a 405 (Method Not Allowed) status for sendmail.php This is the form: <form action="sendmail.php" method="post" id="contactform" > <div ...

phpjqueryhtml

Dynamically altering the CSS4 variables in real time

I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company? Note: My specific requirement is to update the primary variable glo ...

cssangulartypescriptangular7ionic4

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

I have been working on a script to parse an HTML page using jQuery. The script runs smoothly in Chrome, IE, and Safari, but I'm facing some unexpected behavior while testing it in Firefox (version 36.0.1). Here's the code snippet: $.ajax({ u ...

javascriptjqueryhtmlfirefox

Step-by-step guide for setting up CodeMirror

I'm feeling a bit lost with what to do next: <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { mode: "text/html" }); ...

javascripthtmlcodemirror

What is the best way to create a circular div that complements a circular navbar design?

Is there a way to make the red div align perfectly with the corners and height of the navbar? I have been experimenting with Bootstrap components and trying to customize them according to my needs. If using a button instead of a div is an option, that woul ...

htmlcssbootstrap-4