stackoverflow question 52240557: bootstrap-selectpicker not changing box width

Cleaned up code for the question

by nsmcan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<body>
  <h3>START OF TESTING</h3>
  <p><br><br></p>
  <select class="selectpicker" data-style="btn-custom" multiple data-max-options="4" data-actions-box="true">

    <optgroup label="Select options below">
      <option>Active</option>
      <option>Inactive</option>
      <option>Leave</option>
      <option>No Status</option>
    </optgroup>
  </select>

  <p><br><br></p>
  <p><br><br></p>
  <p><br><br></p>
  <p><br><br></p>
  <h3>END OF TESTING</h3>
  <p><br><br></p>
  <p><br><br></p>
  <p><br><br></p>
  <p><br><br></p>
  <p><br><br></p>
</body>

CSS

.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 {
 ...

JavaScript

$('.selectpicker').selectpicker({
      'selectedText': 'cat'
    });

  $(function() {
    $('[data-toggle="tooltip"]').tooltip()
  })
  
    // $('.selectpicker').selectpicker('hide');