[v4 css] form-control-sm styling

[Mottie]

When comparing form elements with a "form-control" versus a "form-control-sm" class in Bootstrap v4.0.0-alpha.6, there are some notable differences – I'm using Windows 10 and Chrome version 55.0.2883.87 m (64-bit), in case that matters.

demo (updated!)

• select.form-control-sm – border too dark
• input.form-control-sm– mismatched height & inset border

---

Update: sorry, I didn't realize that both classes needed to be applied.... the input height is still slightly off.

[sergiopantoja]

Same on macOS Sierra and Chrome version 55.0.2883.95 (64-bit).

[sergiopantoja]

@Mottie

So it looks like .form-control-sm needs to be used with .form-control. For example:

<input class="form-control form-control-sm" type="text">

<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Can you try this and see if you still encounter the same issue?

[Mottie]

Ahh, you're right!... but the input height is still not matching perfectly... here is a zoomed in screenshot:

[mdo]

Fixed by #22287.