Hasta ahora hemos visto que todos los controles se ubican uno debajo de otro (que será lo más común), pero hay situaciones que podemos necesitar que haya varios controles de distinto tipo en la misma línea, en estos casos Bootstrap nos proporciona una clase que debemos asignársela a la marca form llamada "form-inline".
Veamos un ejemplo donde disponemos tres controles en una misma línea:
<!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 class="form-inline" role="form">
<div class="form-group">
<label for="mail">mail:</label>
<input type="email" class="form-control" id="mail">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Acepta términos
</label>
</div>
</div>
<button type="submit" class="btn btn-default">Entrar</button>
</form>
</div>
</body>
</html>
Cuando definimos el form lo inicializamos con la clase "form-inline":
<form class="form-inline" role="form">
Tenemos en pantalla como resultado todos los controles uno al lado del otro:
Cuando utilizamos formularios en línea podemos inicializar la propiedad size del control para fijar distintos tamaños, por ejemplo que queremos que el control donde se ingresa el email tenga un ancho de 50 luego codificamos:
<input type="email" class="form-control" id="mail" size="50" >