{% extends "partials/layouts/main-layout.html.twig" %} {% block body_attributes %} {% endblock %} {% block sidebar %} {% include "partials/sidebar.html.twig" %} {% endblock %} {% block hr_sidebar %} {% include "partials/horizontal-sidebar.html.twig" %} {% endblock %} {% block content %}

{% include "partials/breadcrumb.html.twig" with {'title': "Floating-Input", 'subtitle': "Home"} %}

Animated Line Inputs Form With Floating Labels

Just add floating-labels class to the form.

Regular Input

Password

Placeholder

Helping text A block of help text that breaks onto a new line and may extend beyond one line.

Input with tooltip

Gender

Text area

Animated Line Inputs Form With Floating Labels

Just add floating-labels class to the form and has-warning, has-success, has-danger & has-error for various inputs. For input with icon add has-feedback class.

{% endblock %} {% block js1 %} {% endblock %} {% block js2 %} $('.floating-labels .form-control') .on('focus blur', function (e) { $(this) .parents('.form-group') .toggleClass('focused', e.type === 'focus' || this.value.length > 0) }) .trigger('blur') {% endblock %}