CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-4
Anh Pham
Anh Pham

Reputation: 695

Adjust the input size in Bootstrap 4

It seems that the width of select element and input element are equal. How can I make it so that input element would take much more space and select would take less space?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control">
</div>

Upvotes: 6

Views: 10288

Answers (2)

patelarpan
patelarpan

Reputation: 7991

You need to add col-* class to your select

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select col-3" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control col">
</div>

.input-group has already .row style so no need to give .row class. if you give .row then it gives negative margin that doesn't need.

Upvotes: 4

K K
K K

Reputation: 18099

Try adding col-* classes in the select and input:

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
      <div class="input-group mb-3 row">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" type="button">Button</button>
        </div>
        <select class="custom-select col-4" id="inputGroupSelect03">
          <option selected>Choose...</option>
          <option value="1">One</option>
        </select>
        <input class="col-8 form-control">
      </div>

Upvotes: 5

Related Questions