Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<!doctype html> <html> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object# article: http://ogp.me/ns/article#"> <meta charset="utf-8"> <title>Playing with Bootstrap Combobox - FormValidation</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Language" content="en"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="FormValidation - The best jQuery validation plugin to validate form fields, support Bootstrap, Zurb Foundation, Pure, Semantic, UIKit frameworks"> <meta name="keywords" content="FormValidation, BootstrapValidator, form validation, form validate, form validator, jQuery validation plugin, jquery validate plugin, jquery validator plugin, Zurb Foundation validation, Pure validation, SemanticUI validation, UIKit validation, Skeleton validation, Bootstrap, Zurb Foundation, Pure, SemanticUI, UIKit, Skeleton"> <meta name="author" content="Nguyen Huu Phuoc"> <meta name="google-site-verification" content="FMmr8kYuIuW27-qJLOb1Z59OgiVgKNgAv4_eMARhIY8" /> <meta name="twitter:site" content="@formvalidation" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:description" content="FormValidation - The best jQuery validation plugin to validate form fields, support Bootstrap, Zurb Foundation, Pure, Semantic, UIKit frameworks" /> <meta name="twitter:title" content="Playing with Bootstrap Combobox - FormValidation" /> <meta name="twitter:image" content="http://formvalidation.io/examples/bootstrap-combobox/cover.png" /> <meta property="og:title" content="Playing with Bootstrap Combobox - FormValidation" /> <meta property="og:description" content="FormValidation - The best jQuery validation plugin to validate form fields, support Bootstrap, Zurb Foundation, Pure, Semantic, UIKit frameworks" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://formvalidation.io/examples/bootstrap-combobox/" /> <meta property="og:image" content="http://formvalidation.io/examples/bootstrap-combobox/cover.png" /> <meta property="og:site_name" content="FormValidation" /> <link rel="icon" type="image/x-icon" href="/asset/img/favicon.ico"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <link href="/bundles/86618a522dcd0b92cc9a34866e45fa9e.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="/bundles/40aab700698a291c5ce712a44ec8bc34.js"></script> <script> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-44786951-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <nav class="doc-nav" tabindex="-1"> <ul> <li><a href="/">Home</a></li> <li class=""><a href="/download/">Download</a></li> <li class=""><a href="/getting-started/">Getting Started</a></li> <li class=""><a href="/settings/">Settings</a></li> <li class=""><a href="/api/">API</a></li> <li class=""><a href="/validators/">Validators</a></li> <li class=""><a href="/addons/"><span></span> Add-ons</a></li> <li class="doc-nav-active"><a href="/examples/"><span></span> Examples</a></li> <li class=""><a href="/developing/">Developing</a></li> <li class=""><a href="/news/">News</a></li> <li class=""><a href="/license/">License</a></li> </ul> <div class="doc-hr"></div> <ul> <li><a href="https://twitter.com/formvalidation/" title="Follow FormValidation on Twitter">Twitter <i class="fa fa-twitter"></i></a></li> <li><a href="https://www.facebook.com/formvalidation/" title="Like FormValidation on Facebook">Facebook <i class="fa fa-facebook"></i></a></li> <li><a href="https://plus.google.com/u/0/communities/114931136856987817254" title="Join FormValidation community on Google+">Google+ <i class="fa fa-google-plus"></i></a></li> </ul> <div class="doc-hr"></div> <div class="doc-creator"> <p> Handcrafted with <span class="doc-heart"><i class="fa fa-heart"></i></span> and a lot of <i class="fa fa-coffee"></i><br /> by <a href="http://twitter.com/nghuuphuoc">@nghuuphuoc</a><br/> <img src="/asset/img/logo.png" width="60px" height="60px" /> </p> <p><a href="mailto: phuoc@huuphuoc.me" class="btn">Hire me</a></p> </div> </nav> <a id="toggleButton" class="doc-nav-toggle" title="Toggle the navigation"><i class="fa fa-navicon"></i></a> <div id="main" class="doc-content-wrapper"> <div class="doc-notification" id="notification"> <i class="fa fa-bell-o"></i> <a href="/news/v0-8-1-released-supports-bootstrap-4-alpha-3/">FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3</a> </div> <script> $(document).ready(function() { var notifications = [], $message = $('#notification').find('a').data('index', 0); notifications.push({ title: 'FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3', url: '/news/v0-8-1-released-supports-bootstrap-4-alpha-3/'}); notifications.push({ title: 'FormValidation v0.8.0 is released, supports Bootstrap 4 alpha and Foundation 6', url: '/news/v0-8-0-released-supports-bootstrap-4-alpha-foundation-6/'}); notifications.push({ title: 'Supporting Spectre framework', url: '/examples/supporting-spectre-framework/'}); notifications.push({ title: 'Preventing user to have same value as the placeholder', url: '/examples/preventing-user-have-same-value-placeholder/'}); notifications.push({ title: 'Using hint library to show message', url: '/examples/using-hint-library-show-message/'}); notifications.push({ title: 'Using hidden field technique', url: '/examples/using-hidden-field-technique/'}); notifications.push({ title: 'Using Balloon CSS library to show message', url: '/examples/using-balloon-css-library-show-message/'}); notifications.push({ title: 'Building a password strength meter with Dropbox zxcvbn libary', url: '/examples/building-password-strength-meter/'}); notifications.push({ title: 'Validating checkbox list placed in multiple columns', url: '/examples/validating-checkbox-list-placed-multiple-columns/'}); notifications.push({ title: 'Using Google material icons', url: '/examples/using-google-material-icons/'}); notifications.push({ title: 'Validating an embed Bootstrap Datepicker', url: '/examples/bootstrap-datepicker/#embedding-a-date-picker'}); setInterval(function() { $message.data('index', $message.data('index') + 1); if ($message.data('index') >= notifications.length) { $message.data('index', 0); } $message .fadeOut('slow') .promise() .then(function() { $message.attr('href', notifications[$message.data('index')].url) .html(notifications[$message.data('index')].title) .fadeIn('slow'); }); }, 5000); }); </script> <div class="doc-content-container"> <div class="doc-heading"> <h1>Playing with Bootstrap Combobox</h1> <p>&larr; <a href="/examples/">Examples</a></p> <div id="shareButton" class="doc-share-button"></div> </div> <div class="container"> <div class="row"> <div class="col-md-9"> <p>In this example, you will see how to integrate FormValidation with the <a href="https://github.com/danielfarrell/bootstrap-combobox">Bootstrap Combobox</a> plugin.</p> <div class="doc-alert doc-alert-info"> You should look at the <a href="/examples#compatibility">basic principles</a> when integrating FormValidation with other plugins </div> <div class="doc-demo"> <ul class="nav nav-tabs"> <li class="active"><a href="#combobox-form-tab" data-toggle="tab">Try it</a></li> <li><a href="#combobox-programmatic-tab" data-toggle="tab">Programmatic code</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="combobox-form-tab"> <!-- Include Bootstrap Combobox --> <link rel="stylesheet" href="/vendor/bootstrap-combobox/css/bootstrap-combobox.css"> <script src="/vendor/bootstrap-combobox/js/bootstrap-combobox.js"></script> <style type="text/css"> /* Adjust feedback icon position */ #productForm .selectContainer .form-control-feedback, #productForm .inputGroupContainer .form-control-feedback { right: -15px; } </style> <form id="productForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Product name</label> <div class="col-xs-5"> <input type="text" class="form-control" name="name" /> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Description</label> <div class="col-xs-8"> <textarea name="description" class="form-control" rows="5"></textarea> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Price</label> <div class="col-xs-3 inputGroupContainer"> <div class="input-group"> <input type="text" class="form-control" name="price" /> <span class="input-group-addon">$</span> </div> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Size</label> <div class="col-xs-5 selectContainer"> <select class="form-control" name="size"> <option value="">Choose a size</option> <option value="s">Small (S)</option> <option value="m">Medium (M)</option> <option value="l">Large (L)</option> <option value="xl">Extra large (XL)</option> </select> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Color</label> <div class="col-xs-5 selectContainer"> <select class="form-control" name="color"> <option value="">Choose a color</option> <option value="black">Black</option> <option value="green">Green</option> <option value="red">Red</option> <option value="yellow">Yellow</option> <option value="white">White</option> </select> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-3"> <button type="submit" class="btn btn-default">Add new shirt</button> </div> </div> </form> </div> <div class="tab-pane" id="combobox-programmatic-tab"> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Include Bootstrap Combobox --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;/vendor/bootstrap-combobox/css/bootstrap-combobox.css&quot;</span><span class="nt">&gt;</span>

<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;/vendor/bootstrap-combobox/js/bootstrap-combobox.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>

<span class="nt">&lt;style </span><span class="na">type=</span><span class="s">&quot;text/css&quot;</span><span class="nt">&gt;</span>
<span class="c">/* Adjust feedback icon position */</span>
<span class="nf">#productForm</span> <span class="nc">.selectContainer</span> <span class="nc">.form-control-feedback</span><span class="o">,</span>
<span class="nf">#productForm</span> <span class="nc">.inputGroupContainer</span> <span class="nc">.form-control-feedback</span> <span class="p">{</span>
    <span class="k">right</span><span class="o">:</span> <span class="m">-15px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>

<span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">&quot;productForm&quot;</span> <span class="na">method=</span><span class="s">&quot;post&quot;</span> <span class="na">class=</span><span class="s">&quot;form-horizontal&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
        <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;col-xs-3 control-label&quot;</span><span class="nt">&gt;</span>Product name<span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-xs-5&quot;</span><span class="nt">&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">name=</span><span class="s">&quot;name&quot;</span> <span class="nt">/&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
        <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;col-xs-3 control-label&quot;</span><span class="nt">&gt;</span>Description<span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-xs-8&quot;</span><span class="nt">&gt;</span>
            <span class="nt">&lt;textarea</span> <span class="na">name=</span><span class="s">&quot;description&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">rows=</span><span class="s">&quot;5&quot;</span><span class="nt">&gt;&lt;/textarea&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
        <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;col-xs-3 control-label&quot;</span><span class="nt">&gt;</span>Price<span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-xs-3 inputGroupContainer&quot;</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-group&quot;</span><span class="nt">&gt;</span>
                <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">name=</span><span class="s">&quot;price&quot;</span> <span class="nt">/&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;input-group-addon&quot;</span><span class="nt">&gt;</span>$<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
        <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;col-xs-3 control-label&quot;</span><span class="nt">&gt;</span>Size<span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-xs-5 selectContainer&quot;</span><span class="nt">&gt;</span>
            <span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">name=</span><span class="s">&quot;size&quot;</span><span class="nt">&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;&quot;</span><span class="nt">&gt;</span>Choose a size<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;s&quot;</span><span class="nt">&gt;</span>Small (S)<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;m&quot;</span><span class="nt">&gt;</span>Medium (M)<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;l&quot;</span><span class="nt">&gt;</span>Large (L)<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;xl&quot;</span><span class="nt">&gt;</span>Extra large (XL)<span class="nt">&lt;/option&gt;</span>
            <span class="nt">&lt;/select&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
        <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">&quot;col-xs-3 control-label&quot;</span><span class="nt">&gt;</span>Color<span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-xs-5 selectContainer&quot;</span><span class="nt">&gt;</span>
            <span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">name=</span><span class="s">&quot;color&quot;</span><span class="nt">&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;&quot;</span><span class="nt">&gt;</span>Choose a color<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;black&quot;</span><span class="nt">&gt;</span>Black<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;green&quot;</span><span class="nt">&gt;</span>Green<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;red&quot;</span><span class="nt">&gt;</span>Red<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;yellow&quot;</span><span class="nt">&gt;</span>Yellow<span class="nt">&lt;/option&gt;</span>
                <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">&quot;white&quot;</span><span class="nt">&gt;</span>White<span class="nt">&lt;/option&gt;</span>
            <span class="nt">&lt;/select&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;form-group&quot;</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;col-xs-5 col-xs-offset-3&quot;</span><span class="nt">&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span><span class="nt">&gt;</span>Add new shirt<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>

<span class="nt">&lt;script&gt;</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#productForm&#39;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">formValidation</span><span class="p">({</span>
            <span class="nx">framework</span><span class="o">:</span> <span class="s1">&#39;bootstrap&#39;</span><span class="p">,</span>
            <span class="nx">icon</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">valid</span><span class="o">:</span> <span class="s1">&#39;glyphicon glyphicon-ok&#39;</span><span class="p">,</span>
                <span class="nx">invalid</span><span class="o">:</span> <span class="s1">&#39;glyphicon glyphicon-remove&#39;</span><span class="p">,</span>
                <span class="nx">validating</span><span class="o">:</span> <span class="s1">&#39;glyphicon glyphicon-refresh&#39;</span>
            <span class="p">},</span>
            <span class="nx">excluded</span><span class="o">:</span> <span class="s1">&#39;:disabled&#39;</span><span class="p">,</span>
            <span class="nx">fields</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">name</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">validators</span><span class="o">:</span> <span class="p">{</span>
                        <span class="nx">notEmpty</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;The name is required&#39;</span>
                        <span class="p">},</span>
                        <span class="nx">stringLength</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">min</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span>
                            <span class="nx">max</span><span class="o">:</span> <span class="mi">30</span><span class="p">,</span>
                            <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;The name must be more than 6 and less than 30 characters long&#39;</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">},</span>
                <span class="nx">description</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">validators</span><span class="o">:</span> <span class="p">{</span>
                        <span class="nx">notEmpty</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;The description is required&#39;</span>
                        <span class="p">},</span>
                        <span class="nx">stringLength</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">min</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span>
                            <span class="nx">max</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span>
                            <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;The description must be more than 50 and less than 1000 characters&#39;</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">},</span>
                <span class="nx">price</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">validators</span><span class="o">:</span> <span class="p">{</span>
                        <span class="nx">notEmpty</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;The price is required&#39;</span>
                        <span class="p">},</span>
                        <span class="nx">numeric</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;The price must be a number&#39;</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">},</span>
                <span class="nx">size</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">validators</span><span class="o">:</span> <span class="p">{</span>
                        <span class="nx">notEmpty</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;The size is required&#39;</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">},</span>
                <span class="nx">color</span><span class="o">:</span> <span class="p">{</span>
                    <span class="nx">validators</span><span class="o">:</span> <span class="p">{</span>
                        <span class="nx">notEmpty</span><span class="o">:</span> <span class="p">{</span>
                            <span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;The color is required&#39;</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">})</span>
        <span class="cm">/* Using Combobox for color and size select elements */</span>
        <span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[name=&quot;color&quot;], [name=&quot;size&quot;]&#39;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">combobox</span><span class="p">()</span>
            <span class="p">.</span><span class="nx">end</span><span class="p">()</span>
<span class="p">});</span>
<span class="nt">&lt;/script&gt;</span></code></pre></figure> </div> </div> </div> </div> <div class="col-md-3 hidden-print hidden-xs hidden-sm"> <div id="toc" class="doc-toc"></div> <!-- Twitter timeline widget --> <a class="twitter-timeline" href="https://twitter.com/formvalidation" data-widget-id="631643197106552832">Tweets by @formvalidation</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </div> </div> </div> <script> $(document).ready(function() { $('#productForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, excluded: ':disabled', fields: { name: { validators: { notEmpty: { message: 'The name is required' }, stringLength: { min: 6, max: 30, message: 'The name must be more than 6 and less than 30 characters long' } } }, description: { validators: { notEmpty: { message: 'The description is required' }, stringLength: { min: 50, max: 1000, message: 'The description must be more than 50 and less than 1000 characters' } } }, price: { validators: { notEmpty: { message: 'The price is required' }, numeric: { message: 'The price must be a number' } } }, size: { validators: { notEmpty: { message: 'The size is required' } } }, color: { validators: { notEmpty: { message: 'The color is required' } } } } }) /* Using Combobox for color and size select elements */ .find('[name="color"], [name="size"]') .combobox() .end() }); </script> <footer class="doc-footer"> <div class="container"> <p> <a class="btn" href="/download/">Download</a> <a class="btn" href="https://github.com/formvalidation/support/issues">Report bug</a> </p> <p> &copy; 2013 - 2016 <a href="http://twitter.com/formvalidation">Nguyen Huu Phuoc</a>. All rights reserved.<br/> Handcrafted with <span class="doc-heart"><i class="fa fa-heart"></i></span> and a lot of <i class="fa fa-coffee"></i> </p> </div> </footer> </div> <script src="/bundles/0e8ece31c98757dd3816d14f69a14d98.js"></script> </body> </html>
              
            
!

CSS

              
                .form-inline.fv-form-bootstrap .form-group,.fv-form-bootstrap4.form-inline .form-group{vertical-align:top}.fv-has-feedback{position:relative}.fv-control-feedback{position:absolute;top:0;right:0;z-index:3;display:block;text-align:center}.fv-help-block{display:block}.fv-form [placeholder]::-ms-clear{display:none}.fv-form-foundation .form-error,.fv-form-uikit .uk-text-danger{display:block}.fv-form-bootstrap .help-block{margin-bottom:0}.fv-form-bootstrap .tooltip-inner{text-align:left}.fv-form-bootstrap .fv-bootstrap-icon-input-group{z-index:100}.fv-form-bootstrap4 .fv-control-feedback{width:38px;height:38px;line-height:38px}.fv-form-bootstrap4 .form-group.row .fv-control-feedback{right:15px}.fv-form-bootstrap4 .form-group.row .form-check~.fv-control-feedback{top:-7px}.fv-form-bootstrap4:not(.form-inline) label~.fv-control-feedback{top:32px}.fv-form-bootstrap4:not(.form-inline) label.sr-only~.fv-control-feedback{top:-7px}.fv-form-bootstrap4:not(.form-inline) .form-check~.fv-control-feedback{top:25px}.fv-form-bootstrap4 .has-success .fv-control-feedback,.fv-form-bootstrap4 .has-success label{color:#5cb85c}.fv-form-bootstrap4 .has-warning .fv-control-feedback,.fv-form-bootstrap4 .has-warning label{color:#f0ad4e}.fv-form-foundation5 .fv-control-feedback{right:15px;width:37px;height:37px;line-height:37px}.fv-form-foundation5 .row .row:not(.collapse) .fv-control-feedback{right:8px}.fv-form-foundation5 .row .collapse .fv-control-feedback{right:0}.fv-form-foundation5.fv-form-horizontal [type=checkbox]~.fv-control-feedback,.fv-form-foundation5.fv-form-horizontal [type=radio]~.fv-control-feedback{top:-8px}.fv-form-foundation5 label .fv-control-feedback{top:21px}.fv-form-foundation5 [type=checkbox]~.fv-control-feedback,.fv-form-foundation5 [type=radio]~.fv-control-feedback{top:15px}.fv-form-foundation5 .error .fv-control-feedback{color:#f04124}.fv-form-foundation5 .fv-has-success .fv-control-feedback,.fv-form-foundation5 .fv-has-success label{color:#43AC6A}.fv-form-foundation .fv-control-feedback{right:15px;width:39px;height:39px;line-height:39px}.fv-form-foundation [type=checkbox]~.fv-control-feedback,.fv-form-foundation [type=radio]~.fv-control-feedback{top:-7px}.fv-form-foundation fieldset [type=checkbox]~.fv-control-feedback,.fv-form-foundation fieldset [type=radio]~.fv-control-feedback,.fv-form-foundation label .fv-control-feedback{top:25px}.fv-form-foundation .fv-has-error .fv-control-feedback,.fv-form-foundation .fv-has-error fieldset legend,.fv-form-foundation .fv-has-error label{color:#ec5840}.fv-form-foundation .fv-has-success .fv-control-feedback,.fv-form-foundation .fv-has-success fieldset legend,.fv-form-foundation .fv-has-success label{color:#3adb76}.fv-foundation-tooltip:before{border-color:transparent transparent #0a0a0a}.fv-form-pure .fv-control-feedback{width:36px;height:36px;line-height:36px}.fv-form-pure.pure-form-aligned [type=checkbox]~.fv-control-feedback,.fv-form-pure.pure-form-aligned [type=radio]~.fv-control-feedback{top:-9px}.fv-form-pure.pure-form-aligned .fv-help-block{margin-top:5px;margin-left:180px}.fv-form-pure.pure-form-stacked .pure-control-group{margin-bottom:8px}.fv-form-pure.pure-form-stacked .fv-control-feedback{top:22px}.fv-form-pure.pure-form-stacked .pure-radio~.fv-control-feedback{top:20px}.fv-form-pure.pure-form-stacked .fv-sr-only~.fv-control-feedback{top:-9px}.fv-form-pure .fv-has-error .fv-control-feedback,.fv-form-pure .fv-has-error .fv-help-block,.fv-form-pure .fv-has-error label{color:#CA3C3C}.fv-form-pure .fv-has-success .fv-control-feedback,.fv-form-pure .fv-has-success .fv-help-block,.fv-form-pure .fv-has-success label{color:#1CB841}.fv-form-semantic .error .icon,.fv-form-semantic.ui.form .fields.error label{color:#9f3a38}.fv-form-semantic .fv-control-feedback{right:7px}.fv-form-uikit .fv-control-feedback{top:25px;width:30px;height:30px;line-height:30px}.fv-form-uikit.uk-form-horizontal .fv-control-feedback{top:0}.fv-form-uikit.uk-form-horizontal [type=checkbox]~.fv-control-feedback,.fv-form-uikit.uk-form-horizontal [type=radio]~.fv-control-feedback{top:-7px}.fv-form-uikit label.fv-sr-only~.fv-control-feedback{top:-7px!important}.fv-form-uikit.uk-form-stacked [type=checkbox]~.fv-control-feedback,.fv-form-uikit.uk-form-stacked [type=radio]~.fv-control-feedback{top:20px}.fv-form-uikit .fv-has-error .fv-control-feedback,.fv-form-uikit .fv-has-error .uk-form-label,.fv-form-uikit .fv-has-error label{color:#D85030}.fv-form-uikit .fv-has-success .fv-control-feedback,.fv-form-uikit .fv-has-success .uk-form-label,.fv-form-uikit .fv-has-success label{color:#659F13}
.hll { background-color: #ffffcc }
.c { color: #999988; font-style: italic } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { color: #000000; font-weight: bold } /* Keyword */
.o { color: #000000; font-weight: bold } /* Operator */
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.c1 { color: #999988; font-style: italic } /* Comment.Single */
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { color: #000000; font-style: italic } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */
.gh { color: #999999 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #aaaaaa } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
.m { color: #009999 } /* Literal.Number */
.s { color: #d01040 } /* Literal.String */
.na { color: #008080 } /* Name.Attribute */
.nb { color: #0086B3 } /* Name.Builtin */
.nc { color: #445588; font-weight: bold } /* Name.Class */
.no { color: #008080 } /* Name.Constant */
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.ni { color: #800080 } /* Name.Entity */
.ne { color: #990000; font-weight: bold } /* Name.Exception */
.nf { color: #990000; font-weight: bold } /* Name.Function */
.nl { color: #990000; font-weight: bold } /* Name.Label */
.nn { color: #555555 } /* Name.Namespace */
.nt { color: #000080 } /* Name.Tag */
.nv { color: #008080 } /* Name.Variable */
.ow { color: #000000; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #009999 } /* Literal.Number.Float */
.mh { color: #009999 } /* Literal.Number.Hex */
.mi { color: #009999 } /* Literal.Number.Integer */
.mo { color: #009999 } /* Literal.Number.Oct */
.sb { color: #d01040 } /* Literal.String.Backtick */
.sc { color: #d01040 } /* Literal.String.Char */
.sd { color: #d01040 } /* Literal.String.Doc */
.s2 { color: #d01040 } /* Literal.String.Double */
.se { color: #d01040 } /* Literal.String.Escape */
.sh { color: #d01040 } /* Literal.String.Heredoc */
.si { color: #d01040 } /* Literal.String.Interpol */
.sx { color: #d01040 } /* Literal.String.Other */
.sr { color: #009926 } /* Literal.String.Regex */
.s1 { color: #d01040 } /* Literal.String.Single */
.ss { color: #990073 } /* Literal.String.Symbol */
.bp { color: #999999 } /* Name.Builtin.Pseudo */
.vc { color: #008080 } /* Name.Variable.Class */
.vg { color: #008080 } /* Name.Variable.Global */
.vi { color: #008080 } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */

/* --- Fonts --- */
@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot');
  src: url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot?#iefix') format('embedded-opentype'), local('Open Sans'), local('Open-Sans-regular'), url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2') format('woff2'), url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'), url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=cJZKeOuBrn4kERxqtaUH3Zbd9NUM7myrQQz30yPaGQ4&skey=62c1cbfccc78b4b2&v=v13#OpenSans') format('svg');
}
@font-face {
  font-family: 'Open Sans';
  font-weight: 700;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot');
  src: url('http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot?#iefix') format('embedded-opentype'), local('Open Sans Bold'), local('Open-Sans-700'), url('http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2') format('woff2'), url('http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff') format('woff'), url('http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=k3k702ZOKiLJc3WVjuplzFlIn5tFQcqMuf-jhyJP0ps&skey=cd9e1a36bb25a3c3&v=v13#OpenSans') format('svg');
}
@font-face {
  font-family: 'Open Sans';
  font-weight: 300;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXZ2MAKAc2x4R1uOSeegc5U.eot');
  src: url('http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXZ2MAKAc2x4R1uOSeegc5U.eot?#iefix') format('embedded-opentype'), local('Open Sans Light'), local('Open-Sans-300'), url('http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2') format('woff2'), url('http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff') format('woff'), url('http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=DXI1ORHCpsQm3Vp6mXoaTVlIn5tFQcqMuf-jhyJP0ps&skey=b33cc031a589c168&v=v13#OpenSans') format('svg');
}
@font-face {
  font-family: 'Lato';
  font-weight: 700;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/lato/v11/sBtfDPlEIwvKKU53nAG7AQ.eot');
  src: url('http://fonts.gstatic.com/s/lato/v11/sBtfDPlEIwvKKU53nAG7AQ.eot?#iefix') format('embedded-opentype'), local('Lato Bold'), local('Lato-700'), url('http://fonts.gstatic.com/s/lato/v11/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2') format('woff2'), url('http://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff') format('woff'), url('http://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=H4oiIt_Ug9TU5ast0nUT-w&skey=3480a19627739c0d&v=v11#Lato') format('svg');
}
@font-face {
  font-family: 'Lato';
  font-weight: 300;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/lato/v11/zLhfkPOm_5ykmdm-wXaiuw.eot');
  src: url('http://fonts.gstatic.com/s/lato/v11/zLhfkPOm_5ykmdm-wXaiuw.eot?#iefix') format('embedded-opentype'), local('Lato Light'), local('Lato-300'), url('http://fonts.gstatic.com/s/lato/v11/22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2') format('woff2'), url('http://fonts.gstatic.com/s/lato/v11/kcf5uOXucLcbFOydGU24WALUuEpTyoUstqEm5AMlJo4.woff') format('woff'), url('http://fonts.gstatic.com/s/lato/v11/nj47mAZe0mYUIySgfn0wpQ.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=7yKIrlBXX_AXuUv3Ts9_8g&skey=91f32e07d083dd3a&v=v11#Lato') format('svg');
}
@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/lato/v11/nQhiC-wSiJx0pvEuJl8d8A.eot');
  src: url('http://fonts.gstatic.com/s/lato/v11/nQhiC-wSiJx0pvEuJl8d8A.eot?#iefix') format('embedded-opentype'), local('Lato Regular'), local('Lato-regular'), url('http://fonts.gstatic.com/s/lato/v11/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2') format('woff2'), url('http://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff') format('woff'), url('http://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=hLECvlEj3pKlnS4NFs8NQw&skey=2d58b92a99e1c086&v=v11#Lato') format('svg');
}
@font-face {
  font-family: 'Cardo';
  font-weight: 400;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/cardo/v8/WLga5RBcBwOgQwbtYXsULg.eot');
  src: url('http://fonts.gstatic.com/s/cardo/v8/WLga5RBcBwOgQwbtYXsULg.eot?#iefix') format('embedded-opentype'), local('Cardo'), local('Cardo-regular'), url('http://fonts.gstatic.com/s/cardo/v8/f9GbO0_LnwwuaRC6yAh0JKCWcynf_cDxXwCLxiixG1c.woff2') format('woff2'), url('http://fonts.gstatic.com/s/cardo/v8/c6Zi_ulq7hv-avk-G9Yut6CWcynf_cDxXwCLxiixG1c.woff') format('woff'), url('http://fonts.gstatic.com/s/cardo/v8/vjI-nu0OQ4awNWMtISxB9w.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=tJfhmb6XM6Nefrs-MUPqRA&skey=6e473b3c3fa37289&v=v8#Cardo') format('svg');
}
@font-face {
  font-family: 'Cardo';
  font-weight: 700;
  font-style: normal;
  src: url('http://fonts.gstatic.com/s/cardo/v8/0nnlDTzzEQXukObx6f9ifPesZW2xOQ-xsNqO47m55DA.eot');
  src: url('http://fonts.gstatic.com/s/cardo/v8/0nnlDTzzEQXukObx6f9ifPesZW2xOQ-xsNqO47m55DA.eot?#iefix') format('embedded-opentype'), local('Cardo Bold'), local('Cardo-700'), url('http://fonts.gstatic.com/s/cardo/v8/X-1BEHTKpRYzad3JEXy9-nYhjbSpvc47ee6xR_80Hnw.woff2') format('woff2'), url('http://fonts.gstatic.com/s/cardo/v8/gHC1KgRPdVNdvvVcxLMCY3YhjbSpvc47ee6xR_80Hnw.woff') format('woff'), url('http://fonts.gstatic.com/s/cardo/v8/V5fEf2Hmfq3L3OwPiowl-vesZW2xOQ-xsNqO47m55DA.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=f8uFIJ6wVLbxDxi8rLJmtvesZW2xOQ-xsNqO47m55DA&skey=90e31575a38858c1&v=v8#Cardo') format('svg');
}
@font-face {
  font-family: 'Cardo';
  font-weight: 400;
  font-style: italic;
  src: url('http://fonts.gstatic.com/s/cardo/v8/RxE5bFgPTBlMPY4Uzh64YQ.eot');
  src: url('http://fonts.gstatic.com/s/cardo/v8/RxE5bFgPTBlMPY4Uzh64YQ.eot?#iefix') format('embedded-opentype'), local('Cardo Italic'), local('Cardo-italic'), url('http://fonts.gstatic.com/s/cardo/v8/aRpKelDgx13ov6asvC3QbgLUuEpTyoUstqEm5AMlJo4.woff2') format('woff2'), url('http://fonts.gstatic.com/s/cardo/v8/mSKSxAIybPTfRoik7xAeTQLUuEpTyoUstqEm5AMlJo4.woff') format('woff'), url('http://fonts.gstatic.com/s/cardo/v8/GRTkKQvSwrQKMUJtWZsm7w.ttf') format('truetype'), url('http://fonts.gstatic.com/l/font?kit=XI1j6UEaGnfkBOdFUUjoUg&skey=26bb5df469a255da&v=v8#Cardo') format('svg');
}
/* --- Variables --- */
/* --- Reset --- */
a,
a:hover,
a:focus {
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
}
pre,
.hljs {
  background: transparent;
}
.hll {
  background-color: #ffffcc;
  display: block;
  width: 100%;
}
body {
  font-family: 'open sans';
}
h1,
h2,
h3,
h4 {
  font-family: 'Lato';
}
/* --- Ads --- */
.doc-ad h6 {
  margin-top: 0;
  font-weight: normal;
}
/* --- Helpers --- */
.doc-hr {
  background: #c5c5c5;
  height: 1px;
  margin: 30px auto;
  width: 50%;
}
.doc-hr-short {
  background: #e5e5e5;
  height: 1px;
  margin: 30px auto;
  width: 30%;
}
.doc-notification {
  /*background-color: #ecf0f1;*/
  border-bottom: 1px solid #eee;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
@media (max-width: 767px) {
  .doc-notification {
    display: none;
  }
}
.doc-sample-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.doc-sample-list li {
  position: relative;
}
.doc-sample-list li i {
  position: absolute;
  right: 0;
}
.doc-sample-error a,
.doc-sample-error i {
  color: #a94442;
}
.doc-share-button {
  margin: 0 auto;
  text-align: center;
}
.doc-share-button label {
  background: transparent !important;
}
/* --- Header --- */
.doc-nav-shown .doc-nav {
  background-color: #191919;
  display: block;
  width: 280px;
  z-index: 1;
}
.doc-nav-shown .doc-nav-toggle {
  left: 280px;
}
.doc-nav-shown .doc-content-wrapper {
  margin-left: 280px;
}
.doc-nav {
  bottom: 0;
  height: 100%;
  display: none;
  overflow: scroll;
  position: fixed;
  top: 0;
  left: 0;
}
.doc-nav ul {
  padding-top: 10px;
  text-align: right;
  text-transform: uppercase;
}
.doc-nav li {
  list-style-type: none;
  padding-right: 20px;
}
.doc-nav li a {
  color: #fff;
  display: block;
  font-size: 15px;
  padding: 0 0 0 20px;
  height: 32px;
  line-height: 32px;
}
.doc-nav li.doc-nav-active {
  border-left: 3px solid #3498db;
}
.doc-nav li i {
  border: 1px solid #ccc;
  border-radius: 15px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
  text-align: center;
}
.doc-nav li span {
  background-color: #CF0000;
  border-radius: 4px;
  display: inline-block;
  margin-right: 5px;
  width: 8px;
  height: 8px;
}
.doc-nav .doc-hr {
  background: #7f8c8d;
  margin: 5px auto;
}
.doc-creator {
  color: #fff;
  margin-top: 20px;
  text-align: center;
}
.doc-creator a {
  color: #fff;
}
.doc-creator i {
  color: #c0392b;
}
.doc-creator img {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  margin: 10px 0;
}
.doc-creator .btn {
  background: #3498db;
  text-transform: uppercase;
}
.doc-creator .btn:hover {
  color: #fff;
}
.doc-nav-toggle {
  background: #3498db;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 20px;
  line-height: 50px;
  position: fixed;
  left: 0;
  top: 0;
  text-align: center;
  z-index: 1000;
  width: 50px;
  height: 50px;
}
.doc-nav-toggle:hover {
  color: #fff;
}
/* --- Footer --- */
.doc-footer {
  border-top: 1px solid #ecf0f1;
  padding: 50px 0;
  position: relative;
  text-align: center;
}
.doc-footer p {
  margin-bottom: 15px;
}
.doc-footer .btn {
  background: #3498db;
  color: #fff;
  font-size: 20px;
  margin: 5px 15px;
}
.doc-footer .btn:hover {
  color: #fff;
}
/* --- Home --- */
.doc-center-wrapper {
  text-align: center;
}
.doc-center-wrapper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.doc-center-container {
  display: inline-block;
  vertical-align: middle;
}
.doc-home-counter {
  color: #3498db;
}
.doc-home-intro {
  background: url('/asset/img/pattern.png') top left repeat;
  color: #fff;
  padding-bottom: 20px;
}
.doc-home-intro h1 {
  font-size: 40px;
  line-height: 1.2;
  margin: 60px 0 30px 0;
}
.doc-home-intro h1 a {
  color: #f1c40f;
}
.doc-home-intro a {
  color: #ccc;
}
.doc-home-intro p {
  font-size: 80%;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
}
.doc-home-feature h2 {
  font-size: 40px;
  margin-bottom: 30px;
}
.doc-home-feature .col-sm-4 {
  margin-bottom: 40px;
}
.doc-home-feature i {
  background: #bdc3c7;
  border-radius: 60px;
  color: #ecf0f1;
  font-size: 60px;
  line-height: 120px;
  height: 120px;
  width: 120px;
}
.doc-home-feature h4 {
  font-size: 30px;
  text-transform: uppercase;
}
.doc-home-feature p {
  margin: 0 auto;
  width: 75%;
}
.doc-home-feature .btn {
  background: #3498db;
  color: #fff;
  font-size: 20px;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.doc-home-feature .btn:hover {
  color: #fff;
}
.doc-home-tweet h2 {
  font-size: 40px;
  margin-bottom: 30px;
}
.doc-home-tweet .col-sm-4 {
  margin-bottom: 10px;
  position: relative;
  text-align: center;
}
.doc-home-tweet .col-sm-4 img {
  border: 1px solid #ccc;
  border-radius: 30px;
  width: 60px;
  height: 60px;
  padding: 5px;
  position: absolute;
  top: 0;
  left: 20px;
}
.doc-home-tweet .col-sm-4 blockquote {
  border-left: none;
  font-size: 14px;
  margin: 0 0 10px 80px;
  padding: 0;
  text-align: left;
}
.doc-home-tweet .col-sm-4 span {
  display: block;
  font-size: 12px;
  text-align: right;
}
.doc-home-tweet p {
  margin-top: 20px;
}
.doc-home-tweet li {
  list-style-type: none;
  display: inline-block;
}
.doc-home-tweet li a {
  color: #fff;
  font-size: 25px;
}
.doc-home-tweet li i {
  background: #3498db;
  border-radius: 25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.doc-home-tweet .btn {
  background: #3498db;
  color: #fff;
  font-size: 20px;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.doc-home-tweet .btn:hover {
  color: #fff;
}
.doc-home-download h3 {
  font-size: 80px;
  margin-bottom: 20px;
}
.doc-home-download h3 span {
  background: #000;
  border-radius: 8px;
  color: #fff;
  padding: 0 5px;
  margin: 0 5px;
}
.doc-home-download .btn {
  background: #3498db;
  color: #fff;
  font-size: 20px;
  margin: 5px;
  text-transform: uppercase;
}
.doc-home-download .btn:hover {
  color: #fff;
}
@media (max-width: 767px) {
  .doc-center-wrapper:before {
    height: auto;
  }
  .onepage-wrapper .section {
    height: auto !important;
  }
  .doc-home-intro h3 {
    position: static;
  }
}
/* --- Download --- */
.doc-download-quote .col-sm-4 {
  margin: 15px 0;
}
.doc-download-quote p {
  text-align: center;
}
.doc-download-quote img {
  border: 1px solid #ccc;
  border-radius: 30px;
  width: 60px;
  height: 60px;
  padding: 5px;
}
.doc-download-quote blockquote {
  border-left: none;
  font-size: 14px;
  margin: 0 0 5px;
  padding: 0;
}
.doc-download-quote span {
  display: block;
  font-size: 12px;
  text-align: right;
}
.doc-plan .btn {
  background: #3498db;
  color: #fff;
  margin: 5px;
  text-transform: uppercase;
}
.doc-plan .btn:hover {
  color: #fff;
}
.doc-sellfy-button {
  background-image: url('/asset/img/sellfy-button.png');
  display: inline-block;
  width: 162px;
  height: 32px;
}
.doc-sellfy-button span {
  display: block;
  text-align: center;
  line-height: 32px;
  color: #595959;
  font-weight: 600;
  font-size: 13px;
  padding-left: 96px;
}
.doc-gumroad-button {
  background: white url('/asset/img/gumroad-button-bar.jpg') repeat-x;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 2px;
  color: #999;
  display: inline-block;
  font-style: normal;
  line-height: 50px;
  padding: 0 15px;
  text-shadow: none;
  text-decoration: none;
}
.doc-gumroad-button span {
  background-image: url('/asset/img/gumroad-button-logo.png');
  background-size: cover;
  height: 17px;
  width: 16px;
  display: inline-block;
  margin-bottom: -3px;
  margin-right: 15px;
}
/* --- Page --- */
.doc-content-container {
  padding-bottom: 30px;
}
.doc-content-container h2 {
  font-weight: bold;
  padding-bottom: 15px;
}
.doc-content-container h5 {
  font-weight: bold;
}
.doc-content-container code {
  background: transparent;
}
.doc-content-container pre {
  word-wrap: normal;
}
.doc-content-container pre code {
  white-space: pre;
}
.doc-list {
  margin: 10px 0 10px 15px;
}
.doc-alert {
  border-left: 5px solid #1ABC9C;
  font-family: 'cardo';
  font-size: 18px;
  font-style: italic;
  margin: 20px 0;
  padding-left: 15px;
}
.doc-alert.doc-alert-warning {
  border-left-color: #c0392b;
}
.doc-alert.doc-alert-info {
  border-left-color: #1ABC9C;
}
.doc-heading {
  border-bottom: 1px solid #ecf0f1;
  margin-bottom: 30px;
  padding-bottom: 30px;
  text-align: center;
}
.doc-heading h1 {
  font-size: 50px;
  font-weight: 700;
  padding: 50px 0 20px 0;
}
.doc-edit-btn {
  background: #3498db;
  color: #fff;
  font-size: 20px;
  margin-bottom: 15px;
}
.doc-edit-btn:hover {
  color: #fff;
}
.doc-demo {
  margin-bottom: 15px;
}
.doc-demo .doc-demo-direct {
  float: right;
  display: none;
}
.doc-demo .tab-pane {
  padding: 10px 15px;
}
.doc-demo .tab-content > .active {
  border: 1px solid #ddd;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: none;
}
.doc-demo pre {
  border: none;
  margin: 0;
  padding: 0;
}
.doc-demo li:before {
  content: '';
}
.doc-demo-frame {
  border: none;
  display: none;
  width: 100%;
}
.doc-demo-loader {
  line-height: 100px;
  width: 100%;
  height: 100px;
  text-align: center;
}
/* --- TOC --- */
.doc-content-container h2,
.doc-content-container h3,
.doc-content-container h4,
.doc-content-container h5,
.doc-content-container h6 {
  position: relative;
}
.doc-content-container h2 .toc-anchor,
.doc-content-container h3 .toc-anchor,
.doc-content-container h4 .toc-anchor,
.doc-content-container h5 .toc-anchor,
.doc-content-container h6 .toc-anchor {
  position: absolute;
  top: 0;
  right: 0;
}
.doc-content-container h4.modal-title {
  position: inherit;
}
.doc-toc {
  margin: 20px 0;
}
.doc-toc .nav > .active > a,
.doc-toc .nav > .active:hover > a,
.doc-toc .nav > .active :focus > a {
  border-left: 2px solid #3498db;
}
.doc-toc .nav > .active > ul {
  display: block;
}
.doc-toc .nav > li > a {
  padding-top: 4px;
  padding-bottom: 4px;
}
.doc-toc .nav .nav > li > a {
  font-size: 90%;
}
.doc-toc a.toc-link-2 {
  padding-left: 25px;
}
.doc-toc .toc-link-3 {
  padding-left: 50px;
}
.doc-toc .toc-link-4 {
  padding-left: 75px;
}
@media (min-width: 992px) {
  .doc-toc.affix {
    position: fixed;
    top: 0;
  }
  .doc-toc.affix,
  .doc-toc.affix-bottom {
    width: 213px;
  }
}
@media (min-width: 1200px) {
  .doc-toc.affix,
  .doc-toc.affix-bottom {
    width: 263px;
  }
}
/* --- Post --- */
.doc-post h2 {
  text-align: center;
}
.doc-post-meta {
  text-align: center;
}
.doc-post-meta img {
  border-radius: 40px;
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}
/* --- Pagination --- */
.doc-pagination {
  float: left;
  margin: 30px 0;
  width: 100%;
}
.doc-pagination a,
.doc-pagination span {
  display: block;
  float: left;
  font-size: 18px;
  line-height: 45px;
  width: 50%;
  height: 45px;
  text-align: center;
}
.doc-pagination span {
  color: #bfbfbf;
}
.doc-pagination a:hover {
  background-color: #44b1f6;
  text-decoration: none;
  color: #fff;
  border-color: #44b1f6;
}
.doc-pagination .doc-pagination-older {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.doc-pagination .doc-pagination-newer {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #e5e5e5;
}
/* --- Addon --- */
.doc-addon {
  border: 1px solid #d5d5d5;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 15px;
}
.doc-addon-image {
  border-bottom: 1px solid #e5e5e5;
}
.doc-addon-meta {
  padding: 10px;
}
.doc-addon-meta h2 {
  margin: 5px 0;
}
/* --- Heart --- */
.doc-heart {
  color: #c0392b;
  -webkit-animation: heart-beat 1s linear infinite;
  -moz-animation: heart-beat 1s linear infinite;
  -ms-animation: heart-beat 1s linear infinite;
  animation: heart-beat 1s linear infinite;
}
@keyframes heart-beat {
  0% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes heart-beat {
  0% {
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    -moz-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes heart-beat {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes heart-beat {
  0% {
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console