<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-7 col-lg-6">

      <form class="form-vertical" role="form">
        <fieldset>
          <legend>Bootstrap Buttons</legend>
          <div class="form-group">
            <button class="btn btn-default">Default</button>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-warning">Warning</button>
            <button class="btn btn-danger">Danger</button>
            <button class="btn btn-info">Info</button>

            <br />
            <br />
            <label for="">Disabled buttons</label>
            <br />

            <button class="btn btn-default" disabled>Default</button>
            <button class="btn btn-primary" disabled>Primary</button>
            <button class="btn btn-success" disabled>Success</button>
            <button class="btn btn-warning" disabled>Warning</button>
            <button class="btn btn-danger" disabled>Danger</button>
            <button class="btn btn-info" disabled>Info</button>
          </div>
        </fieldset>

        <fieldset>
          <legend>Fieldset with dynamic numbering</legend>

          <div class="form-group">
            <label for="input-text" class="control-label">Label for text input</label>
            <input type="text" class="form-control" id="input-text" placeholder="">
          </div>
          <div class="form-group">
            <label for="input-date" class="control-label">Date input masked</label>
            <input type="text" class="form-control mask-date" id="input-date" placeholder="dd/mm/yyyy">
          </div>
          <div class="form-group">
            <label for="input-money" class="control-label">Money input (€)</label>
            <input type="text" class="form-control mask-money" id="input-money" placeholder="0,00">
          </div>
          <div class="form-group">
            <label for="address" class="control-label">Label for address input</label>
            <input type="text" class="form-control" id="address" placeholder="Address street">
          </div>
          <div class="form-group">
            <label for="address-number" class="control-label">Label for address number</label>
            <input type="text" class="form-control" id="address-number" placeholder="Street N.">
          </div>
          <div class="form-group">
            <label for="input-select" class="control-label">Bootstrap select</label>
            <select class="form-control" id="input-select">
              <option value="">-</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
          </div>

          <div class="form-group">
            <label for="job" class="control-label">Custom radio buttons</label>
            <div class="radio">
              <label>
                <input type="radio" name="job" value="designer" checked="checked" />
                <span>Designer</span>
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="job" value="frontend" />
                <span>Front-end Developer</span>
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="job" value="backend" />
                <span>Back-end Developer</span>
              </label>
            </div>
          </div>

          <div class="form-group">
            <label for="countries" class="control-label">Select with search</label>
            <select id="countries" name="countries" class="form-control" data-live-search="true">
              <option value="" disabled="disabled">-</option>
              <option value="1">Afghanistan</option>
              <option value="2">Aland</option>
              <option value="3">Albania</option>
              <option value="4">Algeria</option>
              <option value="5">American Samoa</option>
              <option value="6">Andorra</option>
              <option value="7">Angola</option>
              <option value="8">Anguilla</option>
              <option value="9">Antarctic Territory</option>
              <option value="10">Antigua and Barbuda</option>
              <option value="11">Argentina</option>
              <option value="12">Armenia</option>
              <option value="13">Aruba</option>
              <option value="14">Ascension</option>
              <option value="15">Australia</option>
              <option value="16">Austria</option>
              <option value="17">Azerbaijan</option>
              <option value="18">Bahamas</option>
              <option value="19">Bahrain</option>
              <option value="20">Baker Island</option>
              <option value="21">Bangladesh</option>
              <option value="22">Barbados</option>
              <option value="23">Belarus</option>
              <option value="24">Belgium</option>
              <option value="25">Belize</option>
              <option value="26">Benin</option>
              <option value="27">Bermuda</option>
              <option value="28">Bhutan</option>
              <option value="29">Bolivia</option>
              <option value="30">Bosnia</option>
              <option value="31">Botswana</option>
              <option value="32">Bouvet Island</option>
              <option value="33">Brazil</option>
              <option value="34">British Indian Ocean Territory</option>
              <option value="35">British Sovereign Base Areas</option>
              <option value="36">British Virgin Islands</option>
              <option value="37">Brunel</option>
              <option value="38">Bulgaria</option>
              <option value="39">Burkina Faso</option>
              <option value="40">Burundi</option>
              <option value="41">Cambodia</option>
              <option value="42">Cameroon</option>
              <option value="43">Canada</option>
              <option value="44">Cape Verde</option>
              <option value="45">Cayman Islands</option>
              <option value="46">Central African Republic</option>
              <option value="47">Chad</option>
              <option value="48">Chile</option>
              <option value="49">China</option>
              <option value="50">China, Republic of (Taiwan)</option>
              <option value="51">Christmas Island</option>
              <option value="52">Cocos (Keeling) Islands</option>
              <option value="53">Colombia</option>
              <option value="54">Comoros</option>
              <option value="55">Cook Islands</option>
              <option value="56">Costa Rica</option>
              <option value="57">Cote d'Ivoire</option>
              <option value="58">Croatia</option>
              <option value="59">Cuba</option>
              <option value="60">Cyprus</option>
              <option value="61">Czech Republic</option>
              <option value="62">Democratic Republic of the Congo</option>
              <option value="63">Denmark</option>
              <option value="64">Djibouti</option>
              <option value="65">Dominica</option>
              <option value="66">Dominican Republic</option>
              <option value="67">Ecuador</option>
              <option value="68">Egypt</option>
              <option value="69">El Salvador</option>
              <option value="70">Equatorial Guinea</option>
              <option value="71">Eritrea</option>
              <option value="72">Estonia</option>
              <option value="73">Ethiopia</option>
              <option value="74">Falkland Islands (Islas Malvinas)</option>
              <option value="75">Faroe Islands</option>
              <option value="76">Fiji</option>
              <option value="77">Finland</option>
              <option value="78">France</option>
              <option value="79">French Guiana</option>
              <option value="80">French Polynesia</option>
              <option value="81">French Southern and Antarctic Lands</option>
              <option value="82">Gabon</option>
              <option value="83">Gambia</option>
              <option value="84">Georgia</option>
              <option value="85">Germany</option>
              <option value="86">Ghana</option>
              <option value="87">Gibraltar</option>
              <option value="88">Greece</option>
              <option value="89">Greenland</option>
              <option value="90">Grenada</option>
              <option value="91">Guadeloupe</option>
              <option value="92">Guam</option>
              <option value="93">Guatemala</option>
              <option value="94">Guernsey</option>
              <option value="95">Guinea</option>
              <option value="96">Guinea-Bissau</option>
              <option value="97">Guyana</option>
              <option value="98">Haiti</option>
              <option value="99">Heard Island and McDonald Islands</option>
              <option value="100">Honduras</option>
              <option value="101">Hong Kong</option>
              <option value="102">Hungary</option>
              <option value="103">Iceland</option>
              <option value="104">India</option>
              <option value="105">Indonesia</option>
              <option value="106">Iran</option>
              <option value="107">Iraq</option>
              <option value="108">Ireland</option>
              <option value="109">Isle of Man</option>
              <option value="110">Israel</option>
              <option value="111" selected="selected">Italia</option>
              <option value="112">Jamaica</option>
              <option value="113">Japan</option>
              <option value="114">Jersey</option>
              <option value="115">Jordan</option>
              <option value="116">Kazakhstan</option>
              <option value="117">Kenya</option>
              <option value="118">Kiribati</option>
              <option value="119">Korea, North</option>
              <option value="120">Korea, South</option>
              <option value="121">Kuwait</option>
              <option value="122">Kyrgyzstan</option>
              <option value="123">Laos</option>
              <option value="124">Latvia</option>
              <option value="125">Lebanon</option>
              <option value="126">Lesotho</option>
              <option value="127">Liberia</option>
            </select>
          </div>

          <div class="form-group">
            <label for="signin" class="checkbox">
              <input type="checkbox" name="signin">
              <span>Lorem ipsum dolor sit amet, consectetur</span>
            </label>
            <label for="signin" class="checkbox">
              <input type="checkbox" name="signin">
              <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero nesciunt modi possimus.</span>
            </label>
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-primary">Save Data</button>
          </div>
        </fieldset>

        <fieldset>
          <legend>Radio buttons group</legend>

          <div class="btn-group radio-group" data-toggle="buttons">
            <label class="btn btn-default">
              <input type="radio" name="options" id="option1" checked> <span>Option 1</span>
            </label>
            <label class="btn btn-default">
              <input type="radio" name="options" id="option2"> <span>Option 2</span>
            </label>
            <label class="btn btn-default">
              <input type="radio" name="options" id="option3"> <span>Option 3</span>
            </label>
          </div>
        </fieldset>


      </form>
    </div>
  </div>
</div>
////////////////
// VARIABLES //
//////////////

$brand-primary: #428bca;

body {
  padding: 5%;
  font-size: 16px;
  line-height: 1.6;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.form-group {
    margin-bottom: 0;
    padding: 10px 0;
    &:first-child { border-color: transparent; }
}

.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-width: 2px;
    min-height: 40px;
    height: auto;
    &:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
.form-vertical {
    counter-reset: fieldset;
  
    fieldset {
        padding-top: 10px;
        margin: 50px 0;

        > legend:before {
            content: counter(fieldset);
            counter-increment: fieldset;
            position: absolute;
            left: -25px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            text-align: center;
            background: $brand-primary;
            color: white;
            font-size: 75%;
            font-weight: bold;
        }
    }
}

label {
  &.checkbox {
    margin-bottom: 15px;
    position: relative;
    
    .icheckbox_square-blue {
      position: absolute;
      top: 0; left: 0;
    }
    input {
      position: absolute;
      left: 0;
      top: 0;
    }
    span {
      padding-left: 35px;
      display: block;
    }
  }
}

.radio {
  label {
    padding-left: 0;
  }
  span {
    vertical-align: middle;
    margin-left: 5px;
  }
}

.btn {
    height: 40px;
    padding: 10px 16px;
    border-radius: 3px;
  min-width: 80px;
}

.btn-group.radio-group {
  .btn {
    height: 50px;
    line-height: 22px;
    padding: 12px 20px;
    span {
      line-height: 22px;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
}


/* bootstrap select styles */
.bootstrap-select {
    .btn {
        min-height: 40px;
        border-width: 2px;
        -webkit-box-shadow: none;
        box-shadow: none;
        outline: 0;
        &:hover { background: white; }
    }
}
.bootstrap-select .btn:focus,
.bootstrap-select.btn-group.open .dropdown-toggle {
    border-color: $brand-primary;
//    background: $brand-primary;
//    color: white;
    background: white;
    outline: 0;
}
.bootstrap-select .btn.bootstrap-select.btn-group.open .dropdown-toggle {
    border-color: $brand-primary;
    color: white;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background: $brand-primary;
    color: white;
}

label { cursor: pointer; }
:-ms-input-placeholder { color:#ccc; }
::-moz-placeholder { color:#ccc; }
::-webkit-input-placeholder { color:#ccc; }
View Compiled
// test on mobile
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');

// bootstrap-select
$('select').selectpicker({
  mobile: false
});

// inpu mtasking
$('.mask-date').mask("00/00/0000", {
  placeholder: "__-__-____"
});
$('.mask-money').mask('000.000.000.000.000,00', {
  reverse: true
});

// custom checkbox and radio
$('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue'
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic,600,600italic,800,800italic
  3. https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css
  4. https://oss.maxcdn.com/icheck/1.0.2/skins/square/blue.min.css

External JavaScript

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  3. https://oss.maxcdn.com/icheck/1.0.2/icheck.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js