<div class="container my-5">

  <div class="row">

    <div class="col-md-12">

​

      <select class="mdb-select colorful-select dropdown-primary md-form" multiple>

        <option value="1">USA</option>

        <option value="2">Germany</option>

        <option value="3">France</option>

        <option value="4">Poland</option>

        <option value="5">Japan</option>

        <option value="6">Peru</option>

        <option value="7">Chile</option>

        <option value="8">Mexico</option>

        <option value="9">Marocco</option>

        <option value="10">Italy</option>

        <option value="11">Spain</option>

        <option value="12">Greece</option>

      </select>

      <label>Label example</label>

​

    </div>

  </div>

</div>

​

<div class="container my-5">

  <div class="row">

    <div class="col-md-12">

​

      <select class="mdb-select md-form" multiple>

        <option value="1">USA</option>

        <option value="2">Germany</option>

        <option value="3">France</option>

        <option value="4">Poland</option>

        <option value="5">Japan</option>

        <option value="6">Peru</option>

        <option value="7">Chile</option>

        <option value="8">Mexico</option>

        <option value="9">Marocco</option>

        <option value="10">Italy</option>

        <option value="11">Spain</option>

        <option value="12">Greece</option>

      </select>

      <label>Label example</label>

​

    </div>

  </div>

</div>

.select-wrapper ul {

  columns: 6;

}

.colorful-select .dropdown-content li span:hover,

.colorful-select .dropdown-content li.active span {

  box-shadow: none;

}

// Material Select Initialization

$(document).ready(function() {

  $('.mdb-select').materialSelect();

});