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>

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!!

Support Butter Cake 😃

Monthly donation

Patreon

One Time donation

Page Content