Customize input field width in Bootstrap 4

Question

Customize input field width in Bootstrap 4

Is it possible to adjust the width of the input field using the provided starter template?

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

I am specifically looking to reduce the size of this section:

<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 attempted to encapsulate the input field in a <div class="col-xs-2">, but it had no effect. Are there any other methods I can explore?

css bootstrap-4

Answer 1

Answer №1

Resolution 1: To control the width of your input element, you can set a "max-width" property:

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>

Resolution 2: Alternatively, you can utilize the col-* classes in the select and input elements.

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

Answer 2

Resolution 1: To control the width of your input element, you can set a "max-width" property:

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>

Resolution 2: Alternatively, you can utilize the col-* classes in the select and input elements.

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

Answer 3

Answer №2

One easy way to adjust the width of an input field is by using the w-25 class.

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

You have the flexibility to set the width to your liking with options such as w-25, w-50, w-75, & w-100 or w-auto.

The w class defines the width in percentage.

Answer 4

One easy way to adjust the width of an input field is by using the w-25 class.

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

You have the flexibility to set the width to your liking with options such as w-25, w-50, w-75, & w-100 or w-auto.

The w class defines the width in percentage.

Answer 5

Answer №3

To achieve this styling effect in a CSS file, simply add the following code:

Embedding CSS Code in File or Style Tag

input{
   width:50px;
}

Answer 6

To achieve this styling effect in a CSS file, simply add the following code:

Embedding CSS Code in File or Style Tag

input{
   width:50px;
}

Customize input field width in Bootstrap 4

Answer №1

Answer №2

Answer №3

Similar questions

Ion-row appears out of frame

Swap out the input file with a custom button within the form

I'm having trouble with my bootstrap dropdown and I've exhausted all of my options trying to fix it based on my current understanding

How can I remove the unsightly scrollbar caused by overflow: auto?

Adjusting image sizes in WordPress using CSS and HTML

Accessibility considerations for anchor tags with no content

Display of content visible via stationary div

Determining the optimal time to utilize the addClass function in jQuery and CSS

Tips for utilizing the grid system in Bootstrap 4 to transform a dropdown menu into the desired shape shown in the image

Changing the absolute layout to utilize floats

Ensure that the div is aligned properly with the div above

Center aligning elements in React using CSS with HTML can be achieved through Flexbox. However, sometimes images

How to toggle between two background colors in a webpage with the click of a button using JavaScript

Are the links drifting to the left?

Transforming an image into a geometric shape using html and css - step by step guide

Is there a way to apply the 'absolute' or 'fixed' with a width of 100% to the parent div specifically, rather than to the window size?

Maximizing Screen Size for Videos on Internet Explorer: A Step-by-Step Guide

Is there a way to make the edges of this table more curved?

Bootstrap navbar partially collapsed with inner items concealed not at the edges

Positioning JQuery sliders