forms
Butter cake provides an easiest way to create nicer looking input fields
just add
.input class to input elements.
Use .group inside form to group inputs, .group will add
padding-top: 10px and padding-bottom: 10px
Example
Single Input
<!-- INPUT -->
<div class="group">
<input type="text" class="input">
</div>To group checkbox or radio button simply wrap inside
.checkbox-group or .radio-group
Checkbox 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
Snippet for above form
<form class="py-4" method="" action="">
<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>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>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>Custom Radio Buttons
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>Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!