Select styling

Bootstrap 5 Select styling component

Responsive Select styling built with Bootstrap 5. Simple example of how to style MDB select element.

Basic example

In this example we see differences between MDB select and standard select from bootstrap. If you want to add different styles to the Select element use data-mdb-attributes=" ".

In Select Docs, you can find available attributes.

Default select

MDB select

Edit in sandbox 
        
            
      <!-- Bootstrap select -->
       <select class="form-select" aria-label="Default select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
      </select>

      <!-- MDB select -->
      <select data-mdb-select-init>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
      </select>