8

I can't find a way to reduce the width of the input window. I don't see or find any code that controls the width of the input window. The code below is taken from the Bootstrap v5 documentation, from the form element.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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>

0

5 Answers 5

15

It's pretty simple. Add w class like the following examples:

This is the default width of the Bootstrap input element:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

You will need to reduce it by adding w-25 class like below:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 reduce it even more or make it bigger, change the w class to w-50, w-75, w-100, or w-auto.

This is all called Bootstrap Utilities Sizing.

5
  • your answer works to reduce width, but it all moves to left side of the page and I can't "center" it....... I will resubmit the question, as a new question, so you can see the entire program code.....
    – JoeG
    May 17, 2021 at 22:27
  • @JoeG Try <center></center> tag. May 21, 2021 at 17:18
  • 3
    <center> tag is obsolete and is not recommended to be used, please do not use it. See MDN and the spec Jul 19, 2021 at 1:38
  • 1
    thank you for w class reference.
    – kta
    Jun 20 at 23:54
  • @kta You're welcome, happy to help. Honestly, I'm glad that my 2 year's answers are still helping people to the day. Also, if you ever had an unnecessary reputation points that you wanted to award, you could award this answer with a bounty (joking that you're 19k) xD Jun 21 at 0:10
13

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

7

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.

0
2

Just use the size attribute 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>

2
  • Thanks Prometeu, that didn't quite work; is there a way you can view my entire code? I have to wait about 90 minutes to ask another question.
    – JoeG
    May 16, 2021 at 20:32
  • You can edit your snippet from the post or paste a working part of it on some site like jsfiddle.net
    – Prometeu
    May 16, 2021 at 20:58
0

In your CSS file under input-group add the width you prefer in percentage followed by the important reference.

.input-group {
    width: 95% !important;
}

You will note that everything works but that the input bar is no longer centered. So add in your HTML div class mx-auto as well (which stands for "margin x direction auto").

<div class="input-group mx-auto">

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.