Bootstrap 4 - Adjust width of input field

Question

Using this starter template how can I control the with of the input width?

https://getbootstrap.com/docs/4.1/examples/starter-template/

This is the portion I would like to make smaller

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

I have tried to wrap the input in a div <div class="col-xs-2"> but that did not do anything. What alternatives do I have?

Looks like you're editing the navbar search field. Take a look at these: https://stackoverflow.com/questions/50750931/what-do-css-classes-like-my-2-my-lg-0-mr-sm-2-do-in-bootstrap-4 https://stackoverflow.com/questions/41574776/what-is-class-mb-0-in-bootstrap-4 https://getbootstrap.com/docs/4.1/utilities/spacing/ — Bennett Garner, Oct 27 '18 at 15:49

score 4 · Answer 1 · edited Jun 25 '23 at 01:57

4

the simplest way to manage width of input field is just add the w-25 class to input field.

 <input class="form-control w-25" type="text" placeholder="Search" aria-label="Search">

you can set width as you require w-25 w-50 w-75 & w-100 or w-auto

w defines the width in percent.

edited Jun 25 '23 at 01:57

Brockley John

325
2
10

answered Nov 16 '20 at 09:35

Nitin Shinde

136
9

score 2 · Answer 2 · answered Apr 07 '20 at 10:10

Solution 1: Specify "max-width" for your input element:

input[type=text] {
  max-width: 200px;
}

input[type=button] {
  max-width: 100px;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">

<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>

Solution 2: Or try adding col-* classes in the select and input.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<form class="row">
  <div class="col-10">
    <input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
  </div>
  <div class="col-2">
    <input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
  </div>
</form>

score -1 · Answer 3 · answered Oct 27 '18 at 15:45

-1

you can do this in css file by doing:

CSS code to put in css file or to put inside a style tag

input{
   width:50px;
}

answered Oct 27 '18 at 15:45

Usama

336
1
14

this will change width of all input controls, if you want to change width of a particular input field than assign that field your custom class or id and then use that id/class to change width – Usama Oct 27 '18 at 15:51

Bootstrap 4 - Adjust width of input field

3 Answers3