Form addons
Basic Material inputs
Just add form-material class to the form that's it.
Different Widths
Just add col* class to form-group
Basic Examples
With Material Design Colors
With Material Design Colors - Filled In
Basic Radio button Examples
With Material Design Colors
You can use material design colors which examples are .radio-col-pink, .radio-col-cyan class
With Material Design Colors - With Gap
Add to .with-gap class
Switch Button
With Different Colors
RED
PINK
PURPLE
DEEP PURPLE
INDIGO
BLUE
LIGHT BLUE
CYAN
TEAL
GREEN
LIGHT GREEN
LIME
YELLOW
AMBER
ORANGE
DEEP ORANGE
BROWN
GREY
BLUE GREY
BLACK
Default Basic Forms
All bootstrap element classies
<div class="form-group row">
<label for="example-text-input" class="col-md-2 col-form-label">Text</label>
<div class="col-md-10">
<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
</div>
</div>
<div class="form-group row">
<label for="example-search-input" class="col-md-2 col-form-label">Search</label>
<div class="col-md-10">
<input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
</div>
</div>
<div class="form-group row">
<label for="example-email-input" class="col-md-2 col-form-label">Email</label>
<div class="col-md-10">
<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
</div>
</div>
<div class="form-group row">
<label for="example-url-input" class="col-md-2 col-form-label">URL</label>
<div class="col-md-10">
<input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
</div>
</div>
<div class="form-group row">
<label for="example-tel-input" class="col-md-2 col-form-label">Telephone</label>
<div class="col-md-10">
<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
</div>
</div>
<div class="form-group row">
<label for="example-password-input" class="col-md-2 col-form-label">Password</label>
<div class="col-md-10">
<input class="form-control" type="password" value="hunter2" id="example-password-input">
</div>
</div>
<div class="form-group row">
<label for="example-number-input" class="col-md-2 col-form-label">Number</label>
<div class="col-md-10">
<input class="form-control" type="number" value="42" id="example-number-input">
</div>
</div>
<div class="form-group row">
<label for="example-datetime-local-input" class="col-md-2 col-form-label">Date and time</label>
<div class="col-md-10">
<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
</div>
</div>
<div class="form-group row">
<label for="example-date-input" class="col-md-2 col-form-label">Date</label>
<div class="col-md-10">
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
</div>
</div>
<div class="form-group row">
<label for="example-month-input" class="col-md-2 col-form-label">Month</label>
<div class="col-md-10">
<input class="form-control" type="month" value="2011-08" id="example-month-input">
</div>
</div>
<div class="form-group row">
<label for="example-week-input" class="col-md-2 col-form-label">Week</label>
<div class="col-md-10">
<input class="form-control" type="week" value="2011-W33" id="example-week-input">
</div>
</div>
<div class="form-group row">
<label for="example-time-input" class="col-md-2 col-form-label">Time</label>
<div class="col-md-10">
<input class="form-control" type="time" value="13:45:00" id="example-time-input">
</div>
</div>
<div class="form-group row">
<label for="example-color-input" class="col-md-2 col-form-label">Color</label>
<div class="col-md-10">
<input class="form-control" type="color" value="#563d7c" id="example-color-input">
</div>
</div>
Default Horizontal Forms
All bootstrap element classies
Input groups
All bootstrap element classies
Input States
Validation styles for error, warning, and success states on form controls.
Sample Basic Forms
Bootstrap Elements
Sample Horizontal form
Use Bootstrap's predefined grid classes for horizontal form
Service Panel
