This is the most basic and default form having form sections. To add form section use .form-sectionclass with any heading tags. This form has the buttons on the bottom left corner which is the default position.

You can always change the border color of the form controls using border-*class. In this example we have user border-primaryclass for form controls. Form action buttons are on the bottom right position.

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.

This form shows the use of icons with form controls. Define the position of the icon using has-icon-left or has-icon-rightclass. Use icon-* class to define the icon for the form control. See Icons sections for the list of icons you can use.

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 roundto any form control.

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 squareto any form control.

This example shows a way to center your form in the card. Here we have used col-md-6 ml-autoclasses 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.