<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-pills">
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li class="disabled"><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Messages <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Messages <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>
<br>

<header class="navbar navbar-static-top" role="banner">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Orders</a>
        </li>
        <li class="active">
          <a href="#">Glossaries</a>
        </li>
        <li>
          <a href="#">Translators</a>
        </li>
        <li>
          <a href="#">String</a>
        </li>
        <li>
          <a href="#">Support</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<header class="navbar navbar-static-top" role="banner">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group form-search">
          <input type="text" class="form-control form-search input-sm" placeholder="Search">
        </div>
      </form>
    </nav>
  </div>
</header>

<header class="navbar navbar-static-top" role="banner">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <div class="navbar-right">
        <button class="btn btn-primary navbar-btn">Submit</button>
      </div>
    </nav>
  </div>
</header>

<header class="navbar navbar-static-top" role="banner">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <div class="navbar-right">
        <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">User-123</a></p>
      </div>
    </nav>
  </div>
</header>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

<form role="form" class="form-inline">
  <div class="form-group pagination col-xs-10">
    <button type="button" class="btn btn-default"><i class="icon-previous"></i></button>
    <input type="text" class="form-control" value="2">
    <span class="pages-text">of 10 pages</span>
    <button type="button" class="btn btn-default"><i class="icon-next"></i></button>
  </div>
</form>

<div class="dropdown clearfix">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Personal</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Translator</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Manage</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
  </ul>
</div>

<div class="dropdown clearfix">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
    <li role="presentation" class="dropdown-header">SWITCH ACCOUNT</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Personal</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Translator</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Manage</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
  </ul>
</div>

<div class="dropdown clearfix">
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Personal</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Translator</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Manage</a></li>
  </ul>
</div>

<div class="dropdown clearfix">
  <select role="menu" aria-labelledby="dropdownMenu" class="dropdown-menu dropdown-select-search" multiple="multiple">
    <option role="presentation">California</option>
    <option role="presentation">Colorado</option>
    <option role="presentation">Connecticut</option>
  </select>
</div>

<div class="dropdown clearfix">
  <select role="menu" aria-labelledby="dropdownMenu" class="dropdown-menu dropdown-select" multiple="multiple">
    <option role="presentation">California</option>
    <option role="presentation">Colorado</option>
    <option role="presentation">Connecticut</option>
  </select>
</div>

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Gengo color button -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Translator color button (add a class to the <body>) -->
<span class="translator">
  <button type="button" class="btn btn-primary">Translator</button>
</span>

<!-- Developer color button (add a class to the <body>) -->
<span class="developer">
  <button type="button" class="btn btn-primary">Developer</button>
</span>

<!-- Standard link -->
<button type="button" class="btn btn-link">Link</button>

<!-- Translator color link (add a class to the <body>) -->
<span class="translator">
  <button type="button" class="btn btn-link">Translators</button>
</span>

<!-- Developer color link (add a class to the <body>) -->
<span class="developer">
  <button type="button" class="btn btn-link">Developers</button>
</span>

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

<button type="button" class="btn btn-default active">Default</button>
<button type="button" class="btn btn-primary active">Primary</button>

<button type="button" class="btn btn-default disabled">Default</button>
<button type="button" class="btn btn-primary disabled">Primary</button>

<div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default"><i class="icon-previous"></i></button>
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
    <button type="button" class="btn btn-default"><i class="icon-next"></i></button>
  </div>
</div>

<!-- Large -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">Left</button>
    ...
  </div>
</div>

<!-- Default -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    ...
  </div>
</div>

<!-- Small -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">Left</button>
    ...
  </div>
</div>

<!-- Extra Small -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">Left</button>
    ...
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

<div class="btn-group btn-group-justified">
  <a class="btn btn-default" role="button">Left</a>
  <a class="btn btn-default" role="button">Middle</a>
  <a class="btn btn-default" role="button">Right</a>
</div>

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<!-- Single button - translator-->
<div class="btn-group translator">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Translator <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    ...
  </ul>
</div>

<!-- Split button dropdowns -->
<div class="btn-group">
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Split button dropdowns translator -->
<div class="btn-group translator">
  <button type="button" class="btn btn-primary">Translator</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Medium button group -->
<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Medium Button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
  ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group dropup">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </div>
</div>

<!-- Single line -->
<table class="table table-dashboard">
  <thead>
    <tr>
      <th class="col-md-1 reward">REWARD</th>
      <th class="col-md-5 translator">TEXT<span class="caret"></span></th>
      <th class="col-md-2">LANG.</th>
      <th class="col-md-1">WORDS</th>
      <th class="col-md-1">TIME LEFT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="reward">$6.25</td>
      <td class="text">Lorem ipsum dolor sit amet, consetetur...</td>
      <td><span class="lang-from">en</span><span class="lang-to">jp</span></td>
      <td>8523</td>
      <td>6:56</td>
    </tr>
  </tbody>
</table>

<!-- Two line -->
<table class="table table-dashboard">
  <thead>
    <tr>
      <th class="col-md-1 reward">REWARD</th>
      <th class="col-md-5 translator">TEXT<span class="caret"></span></th>
      <th class="col-md-2">LANG.</th>
      <th class="col-md-1">WORDS</th>
      <th class="col-md-1">TIME LEFT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="reward">$6.25</td>
      <td class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy emod...</td>
      <td><span class="lang-from">en</span><span class="lang-to">jp</span></td>
      <td>8523</td>
      <td>6:56</td>
    </tr>
  </tbody>
</table>

<!-- Compact -->
<table class="table table-dashboard table-condensed">
  <thead>
    <tr>
      <th class="col-md-1 reward">REWARD</th>
      <th class="col-md-6 translator">TEXT<span class="caret"></span></th>
      <th class="col-md-1">LANG.</th>
      <th class="col-md-1">WORDS</th>
      <th class="col-md-1">TIME LEFT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="reward">$6.25</td>
      <td class="text">Lorem ipsum dolor sit amet, consetetur...</td>
      <td><span class="lang-from">en</span><span class="lang-to">jp</span></td>
      <td>8523</td>
      <td>6:56</td>
    </tr>
  </tbody>
</table>

<!-- Basic Example -->
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign In</button>
</form>

<!-- Inline Form -->
  <form class="form-inline" role="form">
    <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" placeholder="Password">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
  </form>

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-3 control-label">Email address</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-3 control-label">Password</label>
    <div class="col-sm-9">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

<!-- Form with categories -->
<form class="form-category clearfix" role="form">
  <div class="form-group clearfix">
    <div class="col-sm-3"><p class="form-category-title">Address Details</p></div>
    <div class="col-sm-9">
          <label for="inputFullName">Full Name</label>
          <input type="text" class="form-control" id="inputFullName" placeholder="First Name,Last Name">
          <label for="selectCountry">Country</label>
          <select id="selectCountry" class="form-control">
            <option>United States</option>
            ...
          </select>
    </div>
  </div>
  <div class="form-group clearfix">
    <div class="col-sm-3"><p class="form-category-title">Timezone</p></div>
    <div class="col-sm-9">
      <select class="form-control">
        <option>(UTC - 07:00) USA / San Francisco</option>
        ...
      </select>
    </div>
  </div>
</form>

<!-- html  -->
<a id="username" href="#" data-type="text">superuser</a>

//javascript
$('#username').editable();

<!-- html  -->
<a href="#" id="firstname" data-type="text" data-placeholder="Required"></a>

// javascript
$('#firstname').editable({
  validate: function(value) {
    if ($.trim(value) === '') {
      return 'This field is required';
    }
  }
});

<!-- html  -->
<a href="#" id="gender" data-type="select" data-value=""></a>

// javascript
$('#gender').editable({
  prepend: 'not selected',
  source: [
    { value: 1, text: 'Male' },
    { value: 2, text: 'Female' }
  ]
});

<!-- html -->
<a href="#" id="group" data-type="select" data-value="5" data-source="/groups">Admin</a>

// javascript
$('#group').editable({
  showbuttons: false
});

<!-- html -->
<a href="#" id="status" data-type="select" data-value="0" data-source="/status">Active</a>

//javascript
$('#status').editable();

<!-- html -->
<a href="#" id="dob" data-type="combodate" data-value="1984-05-15" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1"  data-title="Select Date of birth"></a>

// javascript
$('#dob').editable();

<!-- html -->
<a href="#" id="event" data-type="combodate" data-template="D MMM YYYY  HH:mm" data-format="YYYY-MM-DD HH:mm" data-viewformat="MMM D, YYYY, HH:mm"></a>

// javascript
$('#event').editable({
  placement: 'right',
  combodate: {
    firstItem: 'name'
  }
});

<!-- html -->
<a href="#" id="comments" data-type="textarea" data-placeholder="Your comments here...">Awesome User</a>

// javascript
$('#comments').editable({
  showbuttons: 'bottom',
  rows:3
});

<!-- html -->
<a href="#" id="state2" data-type="typeaheadjs" data-placement="right"></a>

// javascript
$('#state2').editable({
  value: 'California',
  typeahead: {
    name: 'state',
    local: [ "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming" ]
  }
});

<!-- html -->
<a href="#" id="fruits" data-type="checklist" data-value="2,3"></a>

// javascript
$('#fruits').editable({
  pk: 1,
  limit: 3,
  source: [
    { value: 1, text: 'banana' },
    { value: 2, text: 'peach' },
    { value: 3, text: 'apple' },
    { value: 4, text: 'watermelon' },
    { value: 5, text: 'orange' }
  ]
});

<!-- html -->
<a href="#" id="tags" data-type="select2" data-pk="1">html, javascript</a>

// javascript
$('#tags').editable({
  inputclass: 'input-large',
  select2: {
    tags: [ 'html', 'javascript', 'css', 'ajax' ],
    tokenSeparators: [ ',', ' ' ]
  }
});

<!-- html -->
<a href="#" id="country" data-type="select2" data-value="BS">

// javascript
var countries = [];
$.each({ "BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina", "BB": "Barbados", "WF": "Wallis and Futuna", "BL": "Saint Bartelemey", "BM": "Bermuda", "BN": "Brunei Darussalam", "BO": "Bolivia", "BH": "Bahrain", "BI": "Burundi", "BJ": "Benin", "BT": "Bhutan", "JM": "Jamaica", "BV": "Bouvet Island", "BW": "Botswana", "WS": "Samoa", "BR": "Brazil", "BS": "Bahamas", "JE": "Jersey", "BY": "Belarus", "O1": "Other Country", "LV": "Latvia", "RW": "Rwanda", "RS": "Serbia", "TL": "Timor-Leste", "RE": "Reunion", "LU": "Luxembourg", "TJ": "Tajikistan", "RO": "Romania", "PG": "Papua New Guinea", "GW": "Guinea-Bissau", "GU": "Guam", "GT": "Guatemala", "GS": "South Georgia and the South Sandwich Islands", "GR": "Greece", "GQ": "Equatorial Guinea", "GP": "Guadeloupe", "JP": "Japan", "GY": "Guyana", "GG": "Guernsey", "GF": "French Guiana", "GE": "Georgia", "GD": "Grenada", "GB": "United Kingdom", "GA": "Gabon", "SV": "El Salvador", "GN": "Guinea", "GM": "Gambia", "GL": "Greenland", "GI": "Gibraltar", "GH": "Ghana", "OM": "Oman", "TN": "Tunisia", "JO": "Jordan", "HR": "Croatia", "HT": "Haiti", "HU": "Hungary", "HK": "Hong Kong", "HN": "Honduras", "HM": "Heard Island and McDonald Islands", "VE": "Venezuela", "PR": "Puerto Rico", "PS": "Palestinian Territory", "PW": "Palau", "PT": "Portugal", "SJ": "Svalbard and Jan Mayen", "PY": "Paraguay", "IQ": "Iraq", "PA": "Panama", "PF": "French Polynesia", "BZ": "Belize", "PE": "Peru", "PK": "Pakistan", "PH": "Philippines", "PN": "Pitcairn", "TM": "Turkmenistan", "PL": "Poland", "PM": "Saint Pierre and Miquelon", "ZM": "Zambia", "EH": "Western Sahara", "RU": "Russian Federation", "EE": "Estonia", "EG": "Egypt", "TK": "Tokelau", "ZA": "South Africa", "EC": "Ecuador", "IT": "Italy", "VN": "Vietnam", "SB": "Solomon Islands", "EU": "Europe", "ET": "Ethiopia", "SO": "Somalia", "ZW": "Zimbabwe", "SA": "Saudi Arabia", "ES": "Spain", "ER": "Eritrea", "ME": "Montenegro", "MD": "Moldova, Republic of", "MG": "Madagascar", "MF": "Saint Martin", "MA": "Morocco", "MC": "Monaco", "UZ": "Uzbekistan", "MM": "Myanmar", "ML": "Mali", "MO": "Macao", "MN": "Mongolia", "MH": "Marshall Islands", "MK": "Macedonia", "MU": "Mauritius", "MT": "Malta", "MW": "Malawi", "MV": "Maldives", "MQ": "Martinique", "MP": "Northern Mariana Islands", "MS": "Montserrat", "MR": "Mauritania", "IM": "Isle of Man", "UG": "Uganda", "TZ": "Tanzania, United Republic of", "MY": "Malaysia", "MX": "Mexico", "IL": "Israel", "FR": "France", "IO": "British Indian Ocean Territory", "FX": "France, Metropolitan", "SH": "Saint Helena", "FI": "Finland", "FJ": "Fiji", "FK": "Falkland Islands (Malvinas)", "FM": "Micronesia, Federated States of", "FO": "Faroe Islands", "NI": "Nicaragua", "NL": "Netherlands", "NO": "Norway", "NA": "Namibia", "VU": "Vanuatu", "NC": "New Caledonia", "NE": "Niger", "NF": "Norfolk Island", "NG": "Nigeria", "NZ": "New Zealand", "NP": "Nepal", "NR": "Nauru", "NU": "Niue", "CK": "Cook Islands", "CI": "Cote d'Ivoire", "CH": "Switzerland", "CO": "Colombia", "CN": "China", "CM": "Cameroon", "CL": "Chile", "CC": "Cocos (Keeling) Islands", "CA": "Canada", "CG": "Congo", "CF": "Central African Republic", "CD": "Congo, The Democratic Republic of the", "CZ": "Czech Republic", "CY": "Cyprus", "CX": "Christmas Island", "CR": "Costa Rica", "CV": "Cape Verde", "CU": "Cuba", "SZ": "Swaziland", "SY": "Syrian Arab Republic", "KG": "Kyrgyzstan", "KE": "Kenya", "SR": "Suriname", "KI": "Kiribati", "KH": "Cambodia", "KN": "Saint Kitts and Nevis", "KM": "Comoros", "ST": "Sao Tome and Principe", "SK": "Slovakia", "KR": "Korea, Republic of", "SI": "Slovenia", "KP": "Korea, Democratic People's Republic of", "KW": "Kuwait", "SN": "Senegal", "SM": "San Marino", "SL": "Sierra Leone", "SC": "Seychelles", "KZ": "Kazakhstan", "KY": "Cayman Islands", "SG": "Singapore", "SE": "Sweden", "SD": "Sudan", "DO": "Dominican Republic", "DM": "Dominica", "DJ": "Djibouti", "DK": "Denmark", "VG": "Virgin Islands, British", "DE": "Germany", "YE": "Yemen", "DZ": "Algeria", "US": "United States", "UY": "Uruguay", "YT": "Mayotte", "UM": "United States Minor Outlying Islands", "LB": "Lebanon", "LC": "Saint Lucia", "LA": "Lao People's Democratic Republic", "TV": "Tuvalu", "TW": "Taiwan", "TT": "Trinidad and Tobago", "TR": "Turkey", "LK": "Sri Lanka", "LI": "Liechtenstein", "A1": "Anonymous Proxy", "TO": "Tonga", "LT": "Lithuania", "A2": "Satellite Provider", "LR": "Liberia", "LS": "Lesotho", "TH": "Thailand", "TF": "French Southern Territories", "TG": "Togo", "TD": "Chad", "TC": "Turks and Caicos Islands", "LY": "Libyan Arab Jamahiriya", "VA": "Holy See (Vatican City State)", "VC": "Saint Vincent and the Grenadines", "AE": "United Arab Emirates", "AD": "Andorra", "AG": "Antigua and Barbuda", "AF": "Afghanistan", "AI": "Anguilla", "VI": "Virgin Islands, U.S.", "IS": "Iceland", "IR": "Iran, Islamic Republic of", "AM": "Armenia", "AL": "Albania", "AO": "Angola", "AN": "Netherlands Antilles", "AQ": "Antarctica", "AP": "Asia/Pacific Region", "AS": "American Samoa", "AR": "Argentina", "AU": "Australia", "AT": "Austria", "AW": "Aruba", "IN": "India", "AX": "Aland Islands", "AZ": "Azerbaijan", "IE": "Ireland", "ID": "Indonesia", "UA": "Ukraine", "QA": "Qatar", "MZ": "Mozambique" }, function(k, v) {
  countries.push({id: k, text: v});
});

$('#country').editable({
  source: countries,
  select2: {
    width: 200,
    placeholder: 'Select country',
    allowClear: true
  }
});

<!-- html -->
<a href="#" id="address" data-type="address"></a>

// javascript
$('#address').editable({
  url: '/post',
  value: {
    city    : 'Moscow',
    street  : 'Lenina',
    building: '12'
  },
  validate: function(value) {
    if (value.city == '') {
      return 'city is required!';
    }
  },
  display: function(value) {
    if (! value) {
      $(this).empty();
      return;
    }
    var html = '<b>' + $('<div>').text(value.city).html() + '</b>, '
             + $('<div>').text(value.street).html() + ' st., bld. '
             + $('<div>').text(value.building).html();

    $(this).html(html);
  }
})
.on('click', function() {
  $(this).next('span').find('input').each(function() {
    $(this).addClass('form-control');
  });
});

<input type="text" class="form-control" placeholder="Text input">

<textarea class="form-control" rows="3"></textarea>

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three
  </label>
</div>

<div class="bs-example">
  <label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1" checked> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<br>
<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <p class="form-control-static">email@example.com</p>
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
      </div>
    </div>
  </form>

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
  </fieldset>
</form>

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error" style="right:0;">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
</div>

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="icon-validation form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="icon-warning form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback" style="right:0;">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="icon-error form-control-feedback"></span>
</div>

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="icon-validation form-control-feedback"></span>
    </div>
  </div>
</form>

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="icon-validation form-control-feedback"></span>
  </div>
</form>

<div class="form-group">
  <input type="text" class="form-control input-lg" placeholder=".input-lg">
</div>

<select class="form-control input-lg">
  <option>input-lg</option>
  ...
</select>

<form class="form row" role="form">
  <div class="form-group input-sm col-xs-2">
    <input type="text" class="form-control col-xs-2" placeholder=".col-xs-2">
  </div>
  <div class="form-group input-sm col-xs-3">
    <input type="text" class="form-control col-xs-3" placeholder=".col-xs-3">
  </div>
  <div class="form-group input-sm col-xs-4">
    <input type="text" class="form-control col-xs-4" placeholder=".col-xs-4">
  </div>
</form>

<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

<ul class="nav nav-pills nav-stacked ge-nav-stacked">
  <li>
    <a href="#">
      <span class="badge pull-right">31</span>
      All
    </a>
  </li>
  ...
</ul>

<!-- With dark backgorund -->
<ul class="nav nav-pills nav-stacked ge-nav-stacked ge-dark">
  <li>
    <a href="#">
      <span class="badge pull-right">31</span>
      All
    </a>
  </li>
  ...
</ul>

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 60%;"></div>
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 82%;">82%</div>
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 82%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-translator" role="progressbar" style="width: 61%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-secondary" role="progressbar" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-developer" role="progressbar" style="width: 20%"></div>
</div>

<div class="progress-striped">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 82%"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-translator" role="progressbar" style="width: 61%"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-secondary" role="progressbar" style="width: 40%"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-developer" role="progressbar" style="width: 20%"></div>
  </div>
</div>

<div class="progress-striped">
  <div class="progress active">
    <div class="progress-bar active"  role="progressbar" style="width: 45%"></div>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-primary" style="width: 30%"></div>
  <div class="progress-bar progress-translator" style="width: 20%"></div>
  <div class="progress-bar progress-secondary" style="width: 15%"></div>
  <div class="progress-bar progress-developer" style="width: 5%"></div>
</div>
<!-- Workbench footer progress bar -->
<div class="progress">
  <div class="progress-bar progress-translating" style="width: 30%"></div>
  <div class="progress-bar progress-submitted" style="width: 15%"></div>
  <div class="progress-bar progress-error" style="width: 5%"></div>
</div>