LearnKode

6 Example(s) of Bootstrap Inputs


Description :

Input type of text and password are shown below.


Bootstrap Inputs Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Input Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Inputs</h2>
        <form role="form">
                <input type="text" class="form-control" id="usr" placeholder="Enter Username"></br>
                <input type="password" class="form-control" id="pwd" placeholder="Enter Password">
        </form>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

radio type inputs are shown in below given code snippet.


Bootstrap Inputs Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Input Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h3>Radiobuttons</h3>
        <form role="form">
            <div class="radio">
                <label><input type="radio" name="optradio">Option 1</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="optradio">Option 2</label>
            </div>
            <div class="radio disabled">
                <label><input type="radio" name="optradio" disabled>Option 3</label>
            </div>
        </form>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Textarea is used in the below code snippet.(Textarea is a control which can have multiple number of rows and columns).


Bootstrap Inputs Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Input Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Textarea</h2>
        <form role="form">
            <textarea class="form-control" rows="5" id="comment" placeholder="Enter Comments"></textarea>
        </form>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Single select and multiselect are shown in below code snippet.


Bootstrap Inputs Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Input Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form role="form">
            <div class="form-group">
                <label>select one:</label>
                <select class="form-control">
                    <option>HTML</option>
                    <option>ANGULAR</option>
                    <option>TYPESCRIPT</option>
                    <option>JAVASCRIPT</option>
                </select>
                <br>
                <label>Mutiple select(hold shift to select more than one):</label>
                <select multiple class="form-control">
                    <option>HTML</option>
                    <option>ANGULAR</option>
                    <option>TYPESCRIPT</option>
                    <option>JAVASCRIPT</option>
                    <option>jquey</option>
                </select>
            </div>
        </form>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

checkbox type inputs are shown in following code snippet.


Bootstrap Inputs Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Input Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Checkboxes</h2>
        <form role="form">
            <div class="checkbox">
                <label><input type="checkbox">Option 1</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox">Option 2</label>
            </div>
            <div class="checkbox disabled">
                <label><input type="checkbox" disabled>Option 3</label>
            </div>
        </form>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.input-lg,.input-sm classes are to set height of controls..col-lg,.col-sm classes are used to set width of controls.


Bootstrap Inputs Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Input Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form role="form">
            <div class="form-group">
                <input class="form-control" type="text" placeholder="Input-default">
            </div>
            <div class="form-group">
                <input class="form-control input-lg" type="text" placeholder="Input-large">
            </div>
            <div class="form-group">
                <input class="form-control input-sm" type="text" placeholder="Input-small">
            </div>
            <div class="form-group">
                <label>select list</label>
                <select class="form-control">
                    <option>HTML</option>
                    <option>CSS</option>
                    <option>JAVASCRIPT</option>
                    <option>JQUERY</option>
                </select>
            </div>
            <div class="form-group">
                <label>input-lg</label>
                <select class="form-control input-lg">
                    <option>HTML</option>
                    <option>JAVASCRIPT</option>
                    <option>CSS</option>
                </select>
            </div>
            <div class="form-group">
                <label for="sel3">input-sm</label>
                <select class="form-control input-sm">
                    <option>HTML</option>
                    <option>JQUERY</option>
                    <option>JAVASCRIPT</option>
                </select>
            </div>
        </form>
    </div>
</body>
</html>
Try it » Download Example »

Output