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