Project Info
This is the most basic and default form having form sections. To add form section use
.form-section class with any heading tags. This form has the buttons on the bottom left corner which is the default
position.
User Profile
You can always change the border color of the form controls using
border-* class. In this example we have user
border-primary class for form controls. Form action buttons are on the bottom right position.
Issue Tracking
This form shows tooltips on hover to provide useful information while user is filling the form. Use data
attributes like toggle
data-toggle, trigger
data-trigger, placement
data-placement, title
data-title to show tooltips on form controls.
Timesheet
This form shows the use of icons with form controls. Define the position of the icon using
has-icon-left or
has-icon-right class. Use
icon-* class to define the icon for the form control. See Icons sections for the list of icons you can use.
Complaint Form
This is a variation to the default form control styling. In this example all the form controls has round
styling. To apply round style add class
round to any form control.
Donation
This is another variation to the default form control styling. In this example all the form controls
has square styling. To apply square style add class
square to any form control.
Event Registration
This example shows a way to center your form in the card. Here we have used
.justify-content-md-center .row classe to center the form in a full width card. User can always change column classes according to
his requirements. This example also uses form action buttons in the center bottom position of the card.
Event Registration
This example shows a ways to center your card with form. Here we have used
.justify-content-md-center .row classes to center the card as its not full width. User can always change column classes according
to his requirements. This example also uses form action buttons in the center bottom position of the
card.
