17 - form : control select

Ya se encuentra disponible el nuevo tutorial para aprender Bootstrap 4 que es la última versión estable y recomendada.


Para aplicar Bootstrap a un control select debemos fijar la clase "form-control" al select respectivo.

Veamos un ejemplo donde inicializamos dos controles select (uno de selección unitario de elemento y otro control select que permita la selección simultanea de varios elementos:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Prueba de Bootstrap</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head> 
<body> 
  <div class="container">

    <form role="form">
       <label for="control1">
        Seleccione un elemento</label> 
         <select class="form-control" id="control1"> 
            <option>1</option> 
            <option>2</option>
            <option>3</option> 
            <option>4</option> 
            <option>5</option> 
          </select> 
       <label for="control2">
       Seleccione varios elementos</label> 
         <select multiple class="form-control" id="control2"> 
            <option>1</option> 
            <option>2</option>
            <option>3</option> 
            <option>4</option> 
            <option>5</option>       
         </select>      
        <button type="submit" class="btn btn-default">Enviar</button> 
    </form>

  </div>
</body> 
</html>

Para la selección unitario lo inicializamos al control select:

         <select class="form-control" id="control1"> 
            <option>1</option> 
            <option>2</option>
            <option>3</option> 
            <option>4</option> 
            <option>5</option> 
          </select> 

Y para la selección múltiple:

         <select multiple class="form-control" id="control2"> 
            <option>1</option> 
            <option>2</option>
            <option>3</option> 
            <option>4</option> 
            <option>5</option>       
         </select>      

En el navegador podemos comprobar como se muestra cada uno de estos tipos de control select:

bootstrap select

Ejecutar Ejemplo

Retornar