Bootstrap Input Size Options

The last article explained what are different types of bootstrap inputs in forms. This article explains what are different options available to tweak the behavior of these input elements. We shall talk about how to increase and decrease bootstrap input size i.e. both height and width of the bootstrap input elements.

Increasing Input Height

To increase the height of the input control, add class “input-lg” to it. Similarly, to decrease the height of the input, add class “input-sm” to to it. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <form role="form">
          <div class="form-group">
            <label for="fname">First Name</label>
            <input type="text" class="form-control" id="fname">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control input-sm" id="email">
          </div>
             
           <div class="form-group">
            <label for="pass">Password</label>
            <input type="password" class="form-control input-lg" id="pass">
          </div>
            
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
    
    </body>

</html>

Download the code Try the code

Open the above webpage in browser. You should see three text fields with a submit button. If you look at the height of each of the text fields, you will see that they differ from each other. The second text field is smaller than first and third. While the third text field has larger height than both of the previous ones. The reason behind this behavior is the classes added to these input controls. If you look at the email input, you would see that it contains class “input-sm”. Similarly, input password contains a class “input-lg”.

Modifying Input in Horizontal Forms

In horizontal forms, you may want to change the height of the input elements. To do so, wrap the div for label and input in class “form-group-x” where x can be “lg” or “sm”. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
          
        <form class="form-horizontal" role="form">
          <div class="form-group form-group-lg">
            <label class="col-sm-3 control-label" for="name">Name</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" id="name">
            </div>
          </div>
          <div class="form-group form-group-sm">
            <label class="col-sm-3 control-label" for="email">Email</label>
            <div class="col-sm-9">
              <input class="form-control" type="text" id="email">
            </div>
          </div>
        </form>
    
    </body>

</html>

Download the code Try the code

Modifying Column Size

You may want to change the width of the columns of the input elements. The classes col-xs-x is used to set the width of the columns where “x” is the number of the columns occupied by the column. If x is 12, the input element occupies the whole width of the parent element. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <form role="form">
            <div class="col-xs-3">
              <label for="Name">Name</label>
              <input class="form-control" id="Name" type="text">
            </div>
            <div class="col-xs-6">
              <label for="email">Email</label>
              <input class="form-control" id="email" type="text">
            </div>
            <div class="col-xs-3">
              <label for="pass">Password</label>
              <input class="form-control" id="pass" type="text">
            </div>   
        </form>
    
    </body>

</html>

Download the code Try the code

If you run the above page in browser, you should see three text fields on a same line. The width of middle text field is twice the width of the outer ones. This is because the outer text fields have been wrapped in a div with class “col-xs-3”. On the other hand, the middle text field is wrapped inside div with class “col-xs-6”. Remember the sum of column width of all the inputs in one line should be equal to 12 since bootstrap follows 12 column grid system. You are advised to practice bootstrap input size options on your own and try to create column with varying width. This will help you grasp the concept.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .