Input components

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Form controls
Textual form controls like inputs, selects, and textareas are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more. 
 
<div class="form-group">
    <label for="email_input">Email address</label>
    <input type="email" class="form-control" id="email_input" placeholder="name@example.com">
</div>

<div class="form-group">
    <label for="select_input">Example select</label>
    <select class="form-control" id="select_input">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

<div class="form-group">
    <label for="text_area">Example textarea</label>
    <textarea class="form-control" id="text_area" rows="3"></textarea>
</div>
Sizing
Set padding of your inputs using classes like ".form-control-lg" and ".form-control-sm" 
 
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
Readonly
Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. 
 
<input class="form-control" type="text" placeholder="this input is readonly" readonly>

Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements.

Checkboxes
use the ".form-check" class in your checkboxes to bring new designs in your forms. 
 <div class="form-check">
    <input class="form-check-input" type="checkbox" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
        Default checkbox
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="defaultCheck2" disabled>
    <label class="form-check-label" for="defaultCheck2">
        Disabled checkbox
    </label>
</div>
Radios
use the ".form-check" class in your radios to bring new designs in your forms. 
 <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
        Default radio
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
        Second default radio
    </label>
</div>

<div class="form-check disabled">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3">
        Disabled radio
    </label>
</div>
Make it inline
Group checkboxes or radios on the same horizontal row by adding ".form-check-inline" to any ".form-check". 
 <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>