CODEWITHSUNDEEP
cssbootstrap-4
geogrow
geogrow

Reputation: 505

Bootstrap 4 - Adjust width of input field

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?

Upvotes: 0

Views: 19296

Answers (3)

Nitin Shinde
Nitin Shinde

Reputation: 165

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.

Upvotes: 3

Raos
Raos

Reputation: 394

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>

Upvotes: 3

Usama
Usama

Reputation: 336

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;
}

Upvotes: -1

Related Questions