Bootstrap Inputs

Bootstrap supports all HTML5 input types like text, email, password, tel, datetime, url, search etc.

Bootstrap Input

Code Structure
<div class="container">
    <form action="#" role="form">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" class="form-control">
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" class="form-control">
        </div>
    </form>
</div>

Bootstrap Textarea

Code Structure
<div class="container">
    <form action="#" role="form">
        <div class="form-group">
            <label for="message">Message:</label>
            <textarea class="form-control" rows="5" id="message"></textarea>
        </div>
    </form>
</div>

Bootstrap Checkbox

Code Structure
<div class="container">
    <form action="#" role="form">
        <div class="checkbox">
            <label><input type="checkbox" value="">Checkbox 1</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" value="" disabled>Checkbox 2</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" value="">Checkbox 3</label>
        </div>
    </form>
</div>

Bootstrap Inline Checkbox

Code Structure
<div class="container">
    <form action="#" role="form">
        <label class="checkbox-inline"><input type="checkbox" value="">Checkbox 1</label>
        <label class="checkbox-inline"><input type="checkbox" value="">Checkbox 2</label>
        <label class="checkbox-inline"><input type="checkbox" value="">Checkbox 3</label>
    </form>
</div>

Bootstrap Radio

Code Structure
<div class="container">
    <form action="#" role="form">
        <div class="radio">
            <label><input type="radio" name="radiobtn">Radio 1</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="radiobtn" disabled>Radio 2</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="radiobtn">Radio 3</label>
        </div>
    </form>
</div>

Bootstrap Inline Radio

Code Structure
<div class="container">
    <form action="#" role="form">
        <label class="radio-inline"><input type="radio" name="radiobtn">Radio 1</label>
        <label class="radio-inline"><input type="radio" name="radiobtn">Radio 2</label>
        <label class="radio-inline"><input type="radio" name="radiobtn">Radio 3</label>
    </form>
</div>

Bootstrap Select List

Code Structure
<div class="container">
    <form action="#" role="form">
        <label for="select">Select any list:</label>
        <select id="select" class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </form>
</div>

Bootstrap Multiple Select List

Code Structure
<div class="container">
    <form action="#" role="form">
        <label for="select">Mulitple select list:</label>
        <select multiple id="select" class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </form>
</div>

Share this

Related Posts