Form
Butter cake provides an easiest way to create nicer looking input fields
Usage
just add .input class to input elements.
Use .group inside form to group inputs, .group will add padding-top: 10px and padding-bottom: 10px
<div class="sample col-md-8 px-0">
<div class="group">
<label>Disabled</label>
<input class="input" type="text" placeholder="Disabled" disabled="">
</div>
<div class="group">
<label>Name</label>
<input class="input" type="text" placeholder="John Doe">
</div>
<div class="group">
<label>Email Address</label>
<input class="input" type="email" placeholder="example@email.com">
</div>
<div class="group">
<label>Select</label>
<select class="input">
<option value="" disabled="" selected="">select</option>
<option>option one</option>
<option>option two</option>
<option>option three</option>
<option>option four</option>
<option>option five</option>
</select>
</div>
<div class="group">
<label>Select Multiple</label>
<select class="input" multiple="">
<option>option one</option>
<option>option two</option>
<option>option three</option>
<option>option four</option>
<option>option five</option>
</select>
</div>
<div class="group">
<label>Comment</label>
<textarea class="input"></textarea>
</div>
</div>
Single Input
<!-- INPUT -->
<div class="group">
<input type="text" class="input">
</div>
Checkbox Group
To group checkbox or radio button simply wrap inside .checkbox-group or .radio-group
<!-- CHECKBOX -->
<div class="checkbox-group group">
<input type="checkbox" id="confirmField">
<label for="confirmField">Check Box</label>
</div>
Radio Button
<!-- RADIO BUTTON -->
<div class="radio-group group">
<input type="radio" id="confirmField1">
<label for="confirmField1">Radio Button Group</label>
</div>
Form with Grid
<div class="col-md-10 px-0">
<form class="pb-4">
<div class="row">
<div class="col-md-6">
<div class="group">
<input type="text" class="input" placeholder="First Name">
</div>
<div class="group">
<input type="text" class="input" placeholder="Last Name">
</div>
</div>
<div class="col-md-6">
<div class="group">
<input type="email" class="input" placeholder="Your Email">
</div>
<div class="group">
<input type="tel" class="input" placeholder="Phone Number">
</div>
</div>
<div class="col-md-12">
<div class="group">
<textarea class="input" placeholder="Message"></textarea>
</div>
<div class="group">
<input class="btn primary block btn-lg uppercase" type="submit" value="Send">
</div>
</div>
</div>
</form>
</div>
Custom Checkboxes
Custom Checkbox, simple wrap checkbox and label with .custom-checkbox
<!-- CHECKBOX -->
<div class="group">
<div class="custom-checkbox">
<input type="checkbox" id="custom-checkbox-1" checked>
<label for="custom-checkbox-1">Custom Check Box</label>
</div>
</div>
<!-- CHECKBOX -->
<div class="group">
<div class="custom-checkbox">
<input type="checkbox" id="custom-checkbox-2">
<label for="custom-checkbox-2">Custom Check Box</label>
</div>
</div>
Custom Radio
Custom Radio, simple wrap radio and label with .custom-radio
<!-- RADIO -->
<div class="group">
<div class="custom-radio">
<input type="radio" name="same" id="custom-radio-1" checked>
<label for="custom-radio-1">Custom Radio Button</label>
</div>
</div>
<!-- RADIO -->
<div class="group">
<div class="custom-radio">
<input type="radio" name="same" id="custom-radio-2">
<label for="custom-radio-2">Custom Radio Button</label>
</div>
</div>
Toggle Switches
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary">
<input type="checkbox" name="choice1" id="checkbox">
<label for="checkbox">Untoggled switch</label>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary">
<input type="checkbox" name="choice1" id="checkbox1" data-on="ON" data-off="OFF" checked>
<label for="checkbox1">Toggled switch</label>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary">
<input type="checkbox" name="choice1" id="checkbox2" data-on="😍" data-off="😐" checked>
<label for="checkbox2">Toggled switch</label>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary" disabled>
<input type="checkbox" name="choice1" id="checkbox3" data-on="😍" data-off="😐" checked>
<label for="checkbox3">Disabled switch</label>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary rounded">
<input type="checkbox" name="choice1" id="checkbox4">
<label for="checkbox4">Untoggled switch</label>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary rounded">
<input type="checkbox" name="choice1" id="checkbox5" data-on="ON" data-off="OFF" checked>
<label for="checkbox5">Toggled switch</label>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary rounded">
<input type="checkbox" name="choice1" id="checkbox6" data-on="😍" data-off="😐" checked>
<label for="checkbox6">Toggled switch</label>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary rounded" disabled>
<input type="checkbox" name="choice1" id="checkbox7" data-on="😍" data-off="😐" checked>
<label for="checkbox7">Disabled switch</label>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle primary">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle secondary">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle dark">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle gray">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle light">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle success">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle warning">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle info">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle warning">
<input type="checkbox" name="choice1" checked>
</div>
</div>
<!-- SLIDE TOGGLE -->
<div class="group">
<div class="checkbox-toggle danger">
<input type="checkbox" name="choice1" checked>
</div>
</div>
Style modifiers
<div class="group">
<div class="input-group input-addon input-addon-left">
<input type="text" class="input" placeholder="Default with icon">
<div class="pre-append-icon">
<i class="fa fa-search"></i>
</div>
</div>
</div>
<div class="group">
<div class="input-group input-addon input-addon-right" disabled="">
<input type="text" class="input" placeholder="Disabled">
<div class="append-icon">
<i class="fa fa-user"></i>
</div>
</div>
</div>
<div class="group">
<div class="input-group input-addon input-addon-both">
<input type="text" class="input" placeholder="Input with icons">
<div class="pre-append-icon">
<i class="fa fa-user"></i>
</div>
<div class="append-icon">
<i class="fa fa-close"></i>
</div>
</div>
</div>
<div class="group">
<div class="input-group input-addon input-addon-both is-danger">
<input type="text" class="input danger" placeholder="Danger with icon">
<div class="pre-append-icon">
<i class="fa fa-user"></i>
</div>
<div class="append-icon">
<i class="fa fa-close"></i>
</div>
</div>
</div>
<div class="group">
<div class="input-group input-addon input-addon-both is-success">
<input type="text" class="input success" placeholder="Success with icon">
<div class="pre-append-icon">
<i class="fa fa-user"></i>
</div>
<div class="append-icon">
<i class="fa fa-check"></i>
</div>
</div>
</div>
Input with background colors
<div class="group">
<input type="text" class="input danger" placeholder="Danger">
</div>
<div class="group is-success">
<input type="text" class="input success" placeholder="Is Success">
</div>
<div class="group is-danger">
<input type="text" class="input danger" placeholder="Is Danger">
</div>
<div class="group is-warning">
<input type="text" class="input warning" placeholder="Is Warning">
</div>
Input with messages
<div class="group">
<div class="input-group input-addon input-addon-right">
<input type="text" class="input" placeholder="With submit button">
<button class="btn append-icon">
<i class="fa fa-send"></i>
</button>
</div>
<div class="message">
Normal message
</div>
</div>
<div class="group">
<div class="input-group input-addon input-addon-right">
<input type="text" class="input" placeholder="With submit button">
<button class="btn append-icon">
<i class="fa fa-send"></i>
</button>
</div>
<div class="success-message">
Valid Email
</div>
</div>
<div class="group">
<div class="input-group input-addon input-addon-right is-danger">
<input type="password" class="input danger" placeholder="With submit button" value="123456">
<div class="append-icon">
<i class="fa fa-lock"></i>
</div>
</div>
<div class="error-message">
Password is invalid <a href="">Forgot Password?</a>
</div>
</div>
Contact us
Report Bug
Request Feature
Submit Work