CODEWITHSUNDEEP
bootstrap-4
Nate
Nate

Reputation: 7856

Different sizes for multiple inputs in bootstrap v4

In Bootstrap v4, there is the following example:

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

Source: https://getbootstrap.com/docs/4.1/components/input-group/#multiple-inputs

I'd like to have the first input bigger (width) than the second.

Any suggestion on how to achieve that?

Upvotes: 1

Views: 911

Answers (1)

MichaelvE
MichaelvE

Reputation: 2578

By default the input items are set to flex-grow of 1, flex-shrink of 1 and flex-basis of auto. You can target the flex-basis of the individual inputs and set them to your desired width. I've used px here. If you use %, you also need to account for the prepend which makes up the full 100%. In the second example, I've kept the basis to auto, but changed the grow on the first input to 2, twice as big as the second input. This solution will be easier to manage for responsiveness:

#fname {
  flex: 1 1 180px;
}

#lname {
  flex: 1 1 80px;
}

#fname2 {
  flex: 2 1 auto;
}

#lname2 {
  flex: 1 1 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control" id="fname">
  <input type="text" aria-label="Last name" class="form-control" id="lname">
</div>
<br>
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control" id="fname2">
  <input type="text" aria-label="Last name" class="form-control" id="lname2">
</div>

Upvotes: 2

Related Questions