forms
Butter cake provides an easiest way to create nicer looking input fields just add .input
class to any input
element including select
Use .group
inside form to group fields, .group
will add padding-top: 10px
and padding-bottom: 10px
Example
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 -->
<div class="radio-group group">
<input type="radio" id="confirmField1">
<label for="confirmField1">Radio Button</label>
</div>
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 name="" id="" cols="30" rows="10" class="input py-1" placeholder="Message"></textarea>
</div>
<div class="group">
<input class="btn-primary w-100 btn-lg uppercase" type="submit" value="Send">
</div>
</div>
</div>
</form>
More Examples
Check Examples page for more form designs Examples Page