Bootstrap Snippet Form 3 using HTML CSS Bootstrap jQuery

.wizard { margin: 20px auto; background: #fff; } .wizard .nav-tabs { position: relative; margin: 40px auto; margin-bottom: 0; border-bottom-color: #e0e0e0; } .wizard > div.wizard-inner { position: relative; } .connecting-line { height: 2px; background: #e0e0e0; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus { color: #555555; cursor: default; border: 0; border-bottom-color: transparent; } span.round-tab { width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tab i{ color:#555555; } .wizard li.active span.round-tab { background: #fff; border: 2px solid #5bc0de; } .wizard li.active span.round-tab i{ color: #5bc0de; } span.round-tab:hover { color: #333; border: 2px solid #333; } .wizard .nav-tabs > li { width: 20%; } .wizard li:after { content: " "; position: absolute; left: 46%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #5bc0de; transition: 0.1s ease-in-out; } .wizard li.active:after { content: " "; position: absolute; left: 46%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #5bc0de; } .wizard .nav-tabs > li a { width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .wizard .nav-tabs > li a:hover { background: transparent; } .wizard .tab-pane { position: relative; padding-top: 50px; } .wizard h3 { margin-top: 0; } @media( max-width : 585px ) { .wizard { width: 90%; height: auto !important; } span.round-tab { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } .wizard .nav-tabs > li a { width: 50px; height: 50px; line-height: 50px; } .wizard li.active:after { content: " "; position: absolute; left: 35%; } } /* layout.css Style */ .upload-drop-zone { height: 100px; border-width: 2px; margin-bottom: 20px; } /* skin.css Style*/ .upload-drop-zone { color: #ccc; border-style: dashed; border-color: #ccc; line-height: 100px; text-align: center } .upload-drop-zone.drop { color: #222; border-color: #222; }

$(document).ready(function () { //Initialize tooltips $('.nav-tabs > li a[title]').tooltip(); //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".next-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass('disabled'); nextTab($active); }); $(".prev-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); prevTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); } (function($) { /** * attaches a character counter to each textarea element in the jQuery object * usage: $("#myTextArea").charCounter(max, settings); */ $.fn.charCounter = function (max, settings) { max = max || 100; settings = $.extend({ container: "<span></span>", classname: "charcounter", format: "(%1 characters remaining)", pulse: true, delay: 0 }, settings); var p, timeout; function count(el, container) { el = $(el); if (el.val().length > max) { el.val(el.val().substring(0, max)); if (settings.pulse && !p) { pulse(container, true); }; }; if (settings.delay > 0) { if (timeout) { window.clearTimeout(timeout); } timeout = window.setTimeout(function () { container.html(settings.format.replace(/%1/, (max - el.val().length))); }, settings.delay); } else { container.html(settings.format.replace(/%1/, (max - el.val().length))); } }; function pulse(el, again) { if (p) { window.clearTimeout(p); p = null; }; el.animate({ opacity: 0.1 }, 100, function () { $(this).animate({ opacity: 1.0 }, 100); }); if (again) { p = window.setTimeout(function () { pulse(el) }, 200); }; }; return this.each(function () { var container; if (!settings.container.match(/^<.+>$/)) { // use existing element to hold counter message container = $(settings.container); } else { // append element to hold counter message (clean up old element first) $(this).next("." + settings.classname).remove(); container = $(settings.container) .insertAfter(this) .addClass(settings.classname); } $(this) .unbind(".charCounter") .bind("keydown.charCounter", function () { count(this, container); }) .bind("keypress.charCounter", function () { count(this, container); }) .bind("keyup.charCounter", function () { count(this, container); }) .bind("focus.charCounter", function () { count(this, container); }) .bind("mouseover.charCounter", function () { count(this, container); }) .bind("mouseout.charCounter", function () { count(this, container); }) .bind("paste.charCounter", function () { var me = this; setTimeout(function () { count(me, container); }, 10); }); if (this.addEventListener) { this.addEventListener('input', function () { count(this, container); }, false); }; count(this, container); }); }; })(jQuery); $(function() { $(".counted").charCounter(320,{container: "#counter"}); $('form').resizable({ handles: { s: $('#resizable') }, alsoResize: $('textarea') }); });