title: bootstrap-selectpicker not changing box width
body: <p>I am trying to change the width of the selectpicker box that shows selected options, but no matter what I try I am unable to change it, nor am I able to change the color of the box.</p>
  
  <p>Any ideas or suggestions are appreciated.</p>
  
  <p>Code Snippet for what I have assuming should change the box width is as follows (as you can see I set it all the way down to 25 but the width is still quite wide):</p>
  
  <pre><code>.selectpicker {
  width: 25px;
  </code></pre>
  
  <p>Code snippet you can run:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
    $(function() {
      $('[data-toggle="tooltip"]').tooltip()
    }) 
  &lt;/script&gt;
  
  &lt;script type = "text/javascript"&gt;
    $(window).on('load', function() {
        $('.selectpicker').selectpicker({
        'selectedText': 'cat'
        });
        // $('.selectpicker').selectpicker('hide');  
    }); 
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-muted {
    font-size: small;
  }
  
  .text-bold {
    font-weight: bold;
    font-size: small;
  }
  
  .button {
    background-color: #008CBA;
    /* Light Blue */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    padding: 6px 10px;
  }
  
  .button2 {
    background-color: #008CBA;
    /* Light Blue */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    margin: 8px 2px;
    cursor: pointer;
    border-radius: 4px;
    padding: 6px 10px;
  }
  
  .button2:hover {
    background-color: #008CBA;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 30px 0 rgba(0, 0, 0, 0.19);
    padding: 6px 10px;
  }
  
  
  /* Blue */
  
  .button3 {
    background-color: #f44336;
  }
  
  
  /* Red */
  
  .button4 {
    background-color: #e7e7e7;
    color: black;
  }
  
  
  /* Gray */
  
  .button5 {
    background-color: #555555;
  }
  
  
  /* Black */
  
  .button6 {
    font-size: 12px;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #D35324;
    color: white;
    padding: 6px 10px;
  }
  
  .button6:hover {
    background-color: #037BA2;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 30px 0 rgba(0, 0, 0, 0.19);
  }
  
  .button7 {
    font-size: 12px;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #008CBA;
    color: white;
  }
  
  .button7:hover {
    background-color: #008CBA;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 30px 0 rgba(0, 0, 0, 0.19);
  }
  
  td {
    text-align: left;
    valign="middle";
  }
  
  i {
    border: solid white;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 2px;
  }
  
  .right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  
  .left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
  
  .up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  
  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  
  .dropbtn {
    background-color: #008CBA;
    color: white;
    padding: 12px;
    font-size: 12px;
    border: none;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: #037BA2;
    padding: 6px 6px;
    text-align: center;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {
    background-color: #037BA2;
    color: white;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    padding-top: 3px;
    right: 0;
  }
  
  .dropdown:hover .dropbtn {
    background-color: #037BA2;
  }
  
  input[id=Search],
  select {
    padding: 8px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  input[value=Apply] {
    font-size: 12px;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #D35324;
    color: white;
  }
  
  input[value=Reset] {
    font-size: 12px;
    padding: 8px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #D35324;
    color: white;
  }
  
  input[value=Apply]:hover {
    background-color: #C44E22;
  }
  
  input[value=Reset]:hover {
    background-color: #C44E22;
  }
  
  table.table1,
  th.th1,
  td.td1 {
    width: 100%;
    color: white;
    font-size: 16px;
    padding-left: 10px;
    background-color: #008CBA;
  }
  
  .tooltip {
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  
  .glyphicon.glyphicon-info-sign {
    font-size: 25px;
    top: 5px;
  }
  
  .selectpicker {
    width: 25px;
    height: 37px;
    background-color: #008CBA !important;
    border-style: solid;
    border-left-width: 3px;
    border-top: none;
    border-bottom: none;
    border-right: none;
    color: black;
    font-size: 14px;
    font-weight: 200;
    padding-left: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  
  
    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href="dist/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  
  
    &lt;!-- JQUERY --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
    &lt;!--  BOOTSTRAP SELECT --&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /&gt;
  
  
  
  
    &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
    &lt;link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"&gt;
  
    &lt;!-- Custom styles for this template --&gt;
    &lt;link href="dashboard.css" rel="stylesheet"&gt;
  
    &lt;!-- Just for debugging purposes. Don't actually copy these 2 lines! --&gt;
    &lt;!--[if lt IE 9]&gt;&lt;script src="assets/js/ie8-responsive-file-warning.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
    &lt;script src="assets/js/ie-emulation-modes-warning.js"&gt;&lt;/script&gt;
  
    &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h3&gt;START OF TESTING&lt;/h3&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;select class="selectpicker" data-style="btn-info" multiple data-max-options="4" data-actions-box="true"&gt;
  
      &lt;optgroup label="Select options below"&gt;
        &lt;option&gt;Active&lt;/option&gt;
        &lt;option&gt;Inactive&lt;/option&gt;
        &lt;option&gt;Leave&lt;/option&gt;
        &lt;option&gt;No Status&lt;/option&gt;
      &lt;/optgroup&gt;
    &lt;/select&gt;
  
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;h3&gt;END OF TESTING&lt;/h3&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;p&gt;&lt;br&gt;&lt;br&gt;&lt;/p&gt;
  
  
  
  
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>