Bootstrap 4 select styling

Question

In my Bootstrap v4 forms I increased the padding of my form-control elements but I noticed that this padding isn't being applied to the select element.

 .form-control { padding: .6rem .8rem !important; border: 2px solid #ced4da !important; transition: none !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <form> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> <div class="form-group col-md-6"> <label for="inputState">State</label> <select id="inputState" class="form-control"> <option selected>Choose...</option> <option>...</option> </select> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> </div> </div> 

Unfortunately I can't build a custom version of Bootstrap so I have to override the behaviour by applying pure css.

I have created a JSFiddle that demonstrates the problem.

How can I correctly apply my padding to the select element in a Bootstrap v4 form?

Answer 1

The way you are trying to apply padding to Bootstrap 4 form-control elements is incorrect. Because Bootstrap 4 has native classes specifically designed to satisfy all your spacing needs. And also because applying css hacks like that can (and often does) lead to problems that require even more css hacks to fix the problems caused by the original css hacks.

So, use p-* and m-* classes to apply spacing to your elements and avoid unnecessary hacks.

More info about Bootstrap 4 spacing utilities:

https://getbootstrap.com/docs/4.0/utilities/spacing/

EDIT:

To fix your issue with custom css, you'll need to add the following rules:

 select.form-control{ height: auto !important; padding: .6rem .8rem calc(.6rem + 1px) .8rem !important; } 

Here's the full, working snippet (click "run code snippet" and expand to full screen to compare side to side):

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> .form-control { padding: .6rem .8rem !important; border: 2px solid #ced4da !important; transition: none !important; } select.form-control{ height: auto !important; padding: .6rem .8rem calc(.6rem + 1px) .8rem !important; } </style> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <form> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> <div class="form-group col-md-6"> <label for="inputState">State</label> <select id="inputState" class="form-control"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="form-group col-md-6"> <label for="inputEmail4">Test</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Choose... (normal input for comparison)"> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> </div> </div> 

EDIT 2:

An even better solution would be to use a .custom-select because the normal select is inherently buggy. The custom-select was specifically designed for easy styling because the normal select is so buggy (and there isn't much that can be done about it).

Here's a code snippet with custom-select for comparison:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> .form-control { padding: .6rem .8rem !important; border: 2px solid #ced4da !important; transition: none !important; } select.form-control{ height: auto !important; padding: .6rem .8rem calc(.6rem + 1px) .8rem !important; } .custom-select { height: auto !important; padding: .6rem .8rem !important; border: 2px solid #ced4da !important; transition: none !important; } </style> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <form> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> <div class="form-group col-md-6"> <label for="inputState">State</label> <select id="inputState" class="form-control"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="form-group col-md-6"> <label for="inputEmail4">Test</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Choose... (normal input for comparison)"> </div> <div class="form-group col-md-6"> <label for="inputState">custom-select:</label> <div class="input-group"> <select class="custom-select" id="inputGroupSelect04"> <option selected>Choose... (custom-select)</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> </div> <div class="form-group col-md-6"> <label for="inputEmail4">Test</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Choose... (normal input for comparison)"> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> </div> </div> </div> 

Answer 2

Padding is being applied correctly, but you have to change the height

select.form-control{
  height:auto !important;
}

https://jsfiddle.net/oon0pmup/3/

Answer 3

Use more specificity on the CSS selector to override the Bootstrap height:

select.form-control:not([size]):not([multiple]) {
    height: initial;
}

The select will be the same height as the text inputs (assuming equal padding, borders, etc.. are applied to all the inputs).

https://www.codeply.com/go/rJKOyAx1QA