<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <div class="container"> <div class="row"> <aside class="col-sm-4"> <select class="mdb-select md-form colorful-select dropdown-primary" multiple searchable="Search here.."> <option value="" disabled selected>Choose your country</option> <option value="1">USA</option> <option value="2">Germany</option> <option value="3">France</option> <option value="3">Poland</option> <option value="3">Japan</option> </select> <label class="mdb-main-label">Label example</label> <select class="mdb-select" multiple searchable="Search here.."> <optgroup label="team 1"> <option value="1">Option 1</option> <option value="2">Option 2</option> </optgroup> <optgroup label="team 2"> <option value="3">Option 3</option> <option value="4">Option 4</option> </optgroup> </select> </div> </div> </div>