CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdrop-down-menu
kevin_b
kevin_b

Reputation: 853

How to style boostrap select

My app uses bootstrap-select for dropdowns. But the results look very different and undesirable.

enter image description here

HTML:

<div class="form-group">
    <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>

CSS:

.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;
}

What is the best way to fix this? Should I add CSS for bootstrap-select?

Upvotes: 0

Views: 2129

Answers (2)

vanburen
vanburen

Reputation: 21653

Heres a basic example of what it looks like you are trying to do. If you review the bootstrap-select stylesheet or inspect the element in the browser you'll be able to see what you need to target as bootstrap-select adds a dropdown button to the select field.

Working Example:

$('.selectpicker').selectpicker();
.form {
  max-width: 330px;
  padding: 15px;
  margin: 120px auto 0;
}
.form .form-control {
  font-size: 16px;
  padding: 10px;
  height: auto;
  border-radius: 0;
  margin: 0;
}
.form .bootstrap-select {
  padding: 0;
  height: auto;
}
.form .dropdown-toggle {
  border-radius: 0;
  padding: 10px;
}
.form .dropdown-menu {
  border-radius: 0;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<div class="container">

  <div class="form">

    <div class="form-group">
      <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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

Upvotes: 0

Caleb Anthony
Caleb Anthony

Reputation: 1123

I tested this and it works fine for me:

http://codepen.io/calebanth/pen/grKzkB

Did you remember to use all the dependencies? You need:

jQuery
bootstrap.js
bootstrap.css

Plus

bootstrap-select.css
bootstrap-select.js

Upvotes: 1

Related Questions