<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form role="form" id="infoForm"> <div class="header"> <h4>Datos del usuario</h4> </div> <div class="form-group"> <label for="txtNombre">Nombre:</label> <input type="text" class="form-control" id="txtNombre"> </div> <div class="form-group"> <label for="txtApellido">Apellido:</label> <input type="text" class="form-control" id="txtApellido"> </div> <div class="form-group"> <label for="txtTelefono">Telefono:</label> <input type="email" class="form-control" id="txtTelefono"> </div> <div class="form-group"> <label for="txtEmail">Correo electronico:</label> <input type="email" class="form-control" id="txtEmail"> </div> <div class="header"> <h4>Datos del caso</h4> </div> <div class="form-group"> <label for="txtTitulo">Titutlo:</label> <input type="text" class="form-control" id="txtTelefono"> </div> <div class="form-group"> <label for="txtCaso">Descripcion:</label> <textarea class="form-control" id="txtCaso"></textarea> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

#infoForm { width: 50%; margin-right: 25%; margin-left: 25%; } @media only and screen(max-width: 480px){ #infoForm { width: 100%; margin-right: 0%; margin-left: 0%; } } @media only and screen(max-width: 720px){ #infoForm { width: 70%; margin-right: 15%; margin-left: 15%; } } @media only and screen(max-width: 1600px){ }