<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'
});