beautiful and friendly forms based on Bootstrap and popovers

Categories Projects, Uncategorized

If you’ve seen anything built with Bootstrap you’ll know that the overall  design is just beautiful.

Now, mix in that design mojo with the Popover functionality and you’ll get stunning and user-friendly forms like you’ve never had before. It’s so simple to implement and has such a great impact that I’m actually inclined to call this free end-user value.

beautiful and useful forms based on Bootstrap and popovers

Bootstrap powered form – I just love it

To add this to your forms you just have to set some data attributes on your inputs and enable the popover plugin.

The code below will enable the popovers. Triggering them on ‘focus’ has the advantage that the popover for the first field will be available when the form is shown (as the field gains the focus).

The code is just to demonstrate the simplicity of implementation, don’t expect it to work.


       this.registrationDialog.on('shown', function () {
           setTimeout(function () {
               $('.form-register input').popover({trigger:'focus'});
               $('#firstName').focus();
           });
       })

You can read more about popovers and how to use them on the Bootstrap Javascript page.

Leave a Reply

Your email address will not be published. Required fields are marked *