Project Info
This is the most basic and default form having form sections. Just add .sr-only
class to a label to hide. To add form section user .form-section class with any heading tags.
This form has the buttons on the bottom left corner which is the default position.
User Profile
Just add .sr-only class to a label to hide. 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
Just add .sr-only class to a label to hide. 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
Just add .sr-only class to a label to hide. 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
Just add .sr-only class to a label to hide. 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
Just add .sr-only class to a label to hide. 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
Just add .sr-only class to a label to hide. This example shows a way to center
your form in the card. Here we have used .justify-content-md-center .row classes to center the
form in a full width card. User can always change those classes according to width and offset requirements.
This example also uses form action buttons in the center bottom position of the card.
