Adjust the width of an HTML input using the Bootstrap 5 form-control class

Question

Adjust the width of an HTML input using the Bootstrap 5 form-control class

Is it possible to set the width of an input using Bootstrap's form-control or input-group classes?

In the example below, each input should have a width based on its maxlength attribute:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1d10100b0c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div>
  <label for="mygroup" class="form-label">Numbers</label>
  <div class="input-group has-validation mb-2" id="mygroup">
    <input type="text" class="form-control" maxlength="11" pattern="^\d{1,11}$" required placeholder="Number" />
    <input type="text" class="form-control" minlength="7" maxlength="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" placeholder="IP" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <input type="text" class="form-control" maxlength="8" min="1" max="16777215" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <button class="btn btn-outline-secondary" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-plus-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM12.5 1a.5.5 0 0 1 .5.5V3h1.5a.5.5 0 0 1 0 1H13v1.5a.5.5 0 0 1-1 0V4h-1.5a.5.5 0 0 1 0-1H12V1.5a.5.5 0 0 1 .5-.5z"/></svg></button>
    <div class="invalid-feedback">Enter valid number</div>
  </div>
</div>

html css bootstrap-5

Answer 1

Answer №1

maxlength - it's not considered a style property. However, you can achieve something similar to this:

#mygroup input[maxlength="11"] {
  flex: 11;
}
#mygroup input[maxlength="7"] {
  flex: 7;
}
#mygroup input[maxlength="5"] {
  flex: 5;
}
#mygroup input[maxlength="8"] {
  flex: 8;
}

<link href="https://examplecdn.com/example.min.css" rel="stylesheet" />
<div>
  <label for="mygroup" class="form-label">Numbers</label>
  <div class="input-group has-validation mb-2" id="mygroup">
    <input type="text" class="form-control" maxlength="11" pattern="^\d{1,11}$" required placeholder="Number" />
    <input type="text" class="form-control" maxlength="7" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" placeholder="IP" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <input type="text" class="form-control" maxlength="8" min="1" max="16777215" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <button class="btn btn-outline-secondary" type="button">Button Text</button>
    <div class="invalid-feedback">Enter valid number</div>
  </div>
</div>

Alternatively, you could also try this approach:

#mygroup {
  display: grid!important;
  grid-template-columns: 11fr 7fr 5fr 8fr 5fr auto;
}

#mygroup input {
  width: 100%!important;
}

<link href="https://examplecdn.com/example.min.css" rel="stylesheet" />
<div>
  <label for="mygroup" class="form-label">Numbers</label>
  <div class="input-group has-validation mb-2" id="mygroup">
    <input type="text" class="form-control" maxlength="11" pattern="^\d{1,11}$" required placeholder="Number" />
    <input type="text" class="form-control" maxlength="7" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" placeholder="IP" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <input type="text" class="form-control" maxlength="8" min="1" max="16777215" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <button class="btn btn-outline-secondary" type="button">Button Text</button>
    <div class="invalid-feedback">Enter valid number</div>
  </div>
</div>

Answer 2

maxlength - it's not considered a style property. However, you can achieve something similar to this:

#mygroup input[maxlength="11"] {
  flex: 11;
}
#mygroup input[maxlength="7"] {
  flex: 7;
}
#mygroup input[maxlength="5"] {
  flex: 5;
}
#mygroup input[maxlength="8"] {
  flex: 8;
}

<link href="https://examplecdn.com/example.min.css" rel="stylesheet" />
<div>
  <label for="mygroup" class="form-label">Numbers</label>
  <div class="input-group has-validation mb-2" id="mygroup">
    <input type="text" class="form-control" maxlength="11" pattern="^\d{1,11}$" required placeholder="Number" />
    <input type="text" class="form-control" maxlength="7" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" placeholder="IP" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <input type="text" class="form-control" maxlength="8" min="1" max="16777215" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <button class="btn btn-outline-secondary" type="button">Button Text</button>
    <div class="invalid-feedback">Enter valid number</div>
  </div>
</div>

Alternatively, you could also try this approach:

#mygroup {
  display: grid!important;
  grid-template-columns: 11fr 7fr 5fr 8fr 5fr auto;
}

#mygroup input {
  width: 100%!important;
}

<link href="https://examplecdn.com/example.min.css" rel="stylesheet" />
<div>
  <label for="mygroup" class="form-label">Numbers</label>
  <div class="input-group has-validation mb-2" id="mygroup">
    <input type="text" class="form-control" maxlength="11" pattern="^\d{1,11}$" required placeholder="Number" />
    <input type="text" class="form-control" maxlength="7" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$" placeholder="IP" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <input type="text" class="form-control" maxlength="8" min="1" max="16777215" required />
    <input type="text" class="form-control" maxlength="5" min="1" max="65535" required />
    <button class="btn btn-outline-secondary" type="button">Button Text</button>
    <div class="invalid-feedback">Enter valid number</div>
  </div>
</div>

Adjust the width of an HTML input using the Bootstrap 5 form-control class

Answer №1

Similar questions

Having trouble locating elements using Selenium in Python?

Exploring the textures of an imported 3D model mesh with multiple materials in A-Frame and Three JS

Tips for aligning an image vertically

Tips for Successfully Passing Personal Parameters Using Html.BeginForm

Use the on-screen keyboard to move around by using the arrow keys and choose a value from the list to

When taking a vertical picture on my iPhone, my Vue component does not function properly

Leverage the power of Bootstrap 4 without incorporating its pre-built components

When the CSS style sheet is not embedded within the HTML document, it fails

How can JSON data be passed to the Google Charts API?

Choosing specific text below an element

Code in JavaScript that shows only a portion of the selected option in a dropdown menu

Changing ch to Px in CSS

Unable to transmit HTML emails

"I'm facing an issue with aligning elements in my ReactJS application using CSS Flexbox. Despite setting up a flexbox layout, I am unable to

Sort the DOM elements in jQuery based on their CSS color property

display directories and subdirectories within a side panel

Unable to apply color changes with jQuery

Issue with loading scripts in CodeIgniter, jQuery Mobile, and jQuery UI - scripts are not loading initially, requires a refresh to

What is the best way to ensure that the sidebar appears after the content on mobile devices, even when there are full-width blocks within

Executing jQuery on page update can be achieved by utilizing event handlers to trigger