Bootstrap field groups

by cactus77kiki

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/i18n/defaults-*.min.js (The translation files)"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="input-group col-sm-8">
   <input type="text" class="form-control" value="test1" />
   <span class="input-group-addon">
       <input type="checkbox" class="btn btn-default" checked="">
   </span>
   <span class="input-group-addon">
       <input type="checkbox" class="btn btn-default" checked="">
   </span>
   <input type="text" class="form-control" value="test2" />
   <span class="input-group-btn"></span>
   <input type="text" class="form-control" value="test3" />
   <span class="input-group-btn"></span>
   <input type="text" class="form-control" value="test4" />
   <span class="input-group-btn">
       <button class="btn btn-default" type="button"><i class="fa fa-globe"></i></button>
   </span>
   <input type="text" class="form-control" value="test5" />
</div>

<br /><br />

<div class="input-group col-sm-8">
   <span class="input-group-btn">
       <button class="btn btn-default" type="button"><i class="fa fa-warning"></i></button>
       <button class="btn btn-default" type="button"><i class="fa fa-users"></i></button>
   </span>
   <input type="text" class="form-control" value="test1" />
   <span class="input-group-btn"></span>
   <input type="text" class="form-control" value="test4" />
   <span class="input-group-btn">
       <button class="btn btn-default" type="button"><i class="fa...

CSS

/* To remove space between text inputs */
.input-group > .input-group-btn:empty {
    width: 0px;
}

/* Fix right border radius on Bootstrap-select when is the first element */
.input-group-btn:first-child:not(:last-child) > .bootstrap-select > button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: red; /* Delete this line */
}

/* Fix left border radius on Bootstrap-select when is the last element */
.input-group-btn:last-child > .bootstrap-select > button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: blue; /* Delete this line */
}

/* Fix border radius on Bootstrap-select and buttons when they are in the middle */
.input-group-btn:not(:first-child):not(:last-child) > .bootstrap-select > button, .input-group-btn:not(:first-child):not(:last-child) > button {
    border-radius: 0;
    color: green; /* Delete this line */
}

JavaScript

//Initialize bootstrap select
$('.browserselectpicker').selectpicker();