The colon seperator on Bootstrap forms

Most times, the visual designs that i handle contains a colon in between the label and the input element for form elements . But bootstrap2 by default doesnt have the colon seperator. Visually, the thing is very subtle, most times hardly noticeable, but when the testing team raises the same as a "BUG" saying that "The HTML doesnt match the visual design with the reason of a missing colon in between", the developer in myself gives a cold stare at the testers. "Was that a bug? " Duh!!  Grow up dude! :D

But whether i like it or not, that was a point right!
The solution is simple!


From this

To this : ( notice the column )

All we need to add is this along with our default bootstrap.css / bootstrap.css.min.

.form-horizontal .control-label::after
 {
  content:":";
  color:#999999;
  font-weight:bold;
  float:right;
  margin-right:10px;
 }

We might need to adjust the "margin-right" based on our form size / requirements. I know its a silly post, but at times, i do get stuck on silly things like this, and frantically searches for the solution in google, most times, on the last possible moment before the code gets handed over to the development team and then onto the production!