Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
<!-- form input control -->
<div class="form-group">
<label class="form-label" for="input-example-1">Name</label>
<input class="form-input" type="text" id="input-example-1" placeholder="Name">
</div><!-- form textarea control -->
<div class="form-group">
<label class="form-label" for="input-example-3">Message</label>
<textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
</div><!-- form select control -->
<div class="form-group">
<select class="form-select">
<option>Choose an option</option>
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div><!-- form radio control -->
<div class="form-group">
<label class="form-label">Gender</label>
<label class="form-radio">
<input type="radio" name="gender" checked>
<i class="form-icon"></i> Male
</label>
<label class="form-radio">
<input type="radio" name="gender">
<i class="form-icon"></i> Female
</label>
</div><!-- form switch control -->
<div class="form-group">
<label class="form-switch">
<input type="checkbox">
<i class="form-icon"></i> Send me emails with news and tips
</label>
</div><!-- form checkbox control -->
<div class="form-group">
<label class="form-checkbox">
<input type="checkbox">
<i class="form-icon"></i> Remember me
</label>
</div>If you want to have a horizontal form, add the form-horizontal class to the <form> container.
And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
<form class="form-horizontal">
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-1">Name</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" type="text" id="input-example-1" placeholder="Name">
</div>
</div>
<!-- form structure -->
</form>