Bootstrap Tutorial - Control the form element size with Bootstrap








Set the height

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Create larger or smaller form controls that match button sizes. 

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--   w  w w .ja v  a2  s  .co m-->
<body style='margin: 20px;'>

  <form class="form-inline">
    <input class="form-control input-lg" type="text"
      placeholder=".input-lg"> <br />
    <br />
    <br /> <input class="form-control" type="text"
      placeholder="Default input"> <br />
    <br />
    <br /> <input class="form-control input-sm" type="text"
      placeholder=".input-sm"> <br />
    <br />
    <br /> <select class="form-control input-lg">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select> <br />
    <br />
    <br /> <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select> <br />
    <br />
    <br /> <select class="form-control input-sm">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </form>

</body>
</html>

Click to view the demo





Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths. 

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--   ww  w.  j  ava 2  s  .com-->
<body style='margin:20px;'>

<form class="form-inline">
<div class="row">
  <div class="col-lg-2">
    <input type="text" class="form-control" placeholder=".col-lg-2">
  </div>
  <div class="col-lg-3">
    <input type="text" class="form-control" placeholder=".col-lg-3">
  </div>
  <div class="col-lg-4">
    <input type="text" class="form-control" placeholder=".col-lg-4">
  </div>
</div>
</form>
        
</body>
</html>

Click to view the demo