How to make Bootstrap text input within inline-form full width with CSS?

Spread the love

Sometimes, we want to make Bootstrap text input within inline-form full width with CSS.

In this article, we’ll look at how to make Bootstrap text input within inline-form full width with CSS.

How to make Bootstrap text input within inline-form full width with CSS?

To make Bootstrap text input within inline-form full width with CSS, we set the input’s max width to 100%.

For instance, we write

<div class="row">
  <div class="col-md-12">
    <form class="form-inline" role="form">
      <input
        type="text"
        class="form-control input-lg"
        id="search"
        placeholder="Your location (City, State, ZIP)"
      />
      <button type="submit" class="btn btn-lg">Search</button>
    </form>
  </div>
</div>

to add the input.

Then we write

input {
  max-width: 100%;
}

to make its max width to 100%.

Conclusion

To make Bootstrap text input within inline-form full width with CSS, we set the input’s max width to 100%.

Leave a Reply

Your email address will not be published. Required fields are marked *