<html>
  <head>
    <title>Styling Bootstrap Select</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-4 col-xs-offset-4">
          <div class="form">
            <input type="text" class="form-control" placeholder="Enter your name">
            <input type="text" class="form-control" placeholder="Enter your address">
            <input type="text" class="form-control" placeholder="Enter your contact info">
            <select class="selectpicker form-control">
                <option selected="selected">Select one</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
       </div>
     </div>
  </body>
</html>
.form {
    max-width: 330px;
    padding: 15px;
    padding-top: 120px;
    margin: 0 auto;
}
.form .form-heading {
    margin-bottom: 20px;
    text-align: center;
}
.form .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form .form-control:focus {
    z-index: 2;
}
.form input[type="text"] {
    margin-bottom: -1px;
    border-radius: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.