How to shorten width of input field - Bootstrap v5 or CSS

user_12883813 0
Viewed 12599

I can't find a way to reduce the width of the input window. I do not see/find any code that controls the width of the input window. The code below is the Cut-&-Paste from Bootstrap v5, of a code.

<form>
       <div class="input-group mb-3">
          <span class="input-group-text">@</span>
          <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
          <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
       </div>          
   </form>
bootstrap-5 flexbox twitter-bootstrap css html
4 Answers

This is simple. Add w class like following examples :

This is default width of Boostrap Input :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<form>
   <div class="input-group mb-3">
      <span class="input-group-text">@</span>
      <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
      <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
   </div>
</form>

So we will reduce it by adding w-25 class like below :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<form>
   <div class="input-group mb-3 w-25">
      <span class="input-group-text">@</span>
      <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
      <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
   </div>
</form>

If you want to also to reduce it or make it bigger So edit w class like w-50 or w-75or w-100 or w-auto.

This all called Bootstrap Utilities Sizing.

Here is documentation of Bootstrap Utilities Sizing.

Note : The code above from Boostrap Documentation.

user_149456960

The input element in BootStrap v5 is a flex item. To change it's width, just set the input element's flex-grow property to 0 and the flex-basis property to the value you want for the width (e.g. 100px) like this:

flex-grow: 0;
flex-basis: 100px;

Or you can use the flex shorthand property (the second value is for the flex-shrink property) like this:

flex: 0 1 100px;

Check and run the following Code Snippet for a practical example of the above approach:

/* CSS */
.input-group>input.someInput {flex: 0 1 100px;}
<!-- HTML -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

<form>
     <div class="input-group mb-3">
        <span class="input-group-text">@</span>
        <input type="email" id="email" class="form-control someInput" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1">
        <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
     </div>          
 </form>

user_41149070

Because of using form-control, it is taking the full width allotted. You can use the column property like col-md-4 or other property to make the size you wanted.

user_159442540

Just use the 'size' property of input.

<form>
       <div class="input-group mb-3">
          <span class="input-group-text">@</span>
          <input type="email" id="email" class="form-control" placeholder="Your email" aria-label="Email" aria-describedby="basic-addon1" size="20">
          <button type="submit" class="btn btn-primary btn-md">Sign up</button> 
       </div>          
   </form>

user_130116710
Related