Use em or rem font-size in Bootstrap 3

bootstrap-em.less

/**
 * Use em or rem font-size in Bootstrap 3
 */

@font-size-root: 14px;
@font-unit: 0rem; // Pick em or rem here


// Convert all variables to em

@font-size-base:  1 + @font-unit;
@font-size-large: 1.25 + @font-unit;
@font-size-small: 0.85 + @font-unit;

@font-size-h1:            2.6 + @font-unit;
@font-size-h2:            2.15 + @font-unit;
@font-size-h3:            1.7 + @font-unit;
@font-size-h4:            1.25 + @font-unit;
@font-size-h5:            @font-size-base;
@font-size-h6:            0.85 + @font-unit;

@line-height-computed:    (@font-size-base * @line-height-base);

@padding-base-vertical:     ((6px / @font-size-root) + @font-unit);
@padding-base-horizontal:   ((12px / @font-size-root) + @font-unit);

@padding-large-vertical:    ((10px / @font-size-root) + @font-unit);
@padding-large-horizontal:  ((16px / @font-size-root) + @font-unit);

@padding-small-vertical:    ((5px / @font-size-root) + @font-unit);
@padding-small-horizontal:  ((10px / @font-size-root) + @font-unit);

@padding-xs-vertical:       ((1px / @font-size-root) + @font-unit);
@padding-xs-horizontal:     ((5px / @font-size-root) + @font-unit);

@border-radius-base:        ((4px / @font-size-root) + @font-unit);
@border-radius-large:       ((6px / @font-size-root) + @font-unit);
@border-radius-small:       ((3px / @font-size-root) + @font-unit);

@caret-width-base:          ((4px / @font-size-root) + @font-unit);
@caret-width-large:         ((5px / @font-size-root) + @font-unit);

//** Default `.form-control` height
@input-height-base:         (@line-height-computed + (@padding-base-vertical * 2));
//** Large `.form-control` height
@input-height-large:        ((@font-size-large * @line-height-large) + (@padding-large-vertical * 2));
//** Small `.form-control` height
@input-height-small:        ((@font-size-small * @line-height-small) + (@padding-small-vertical * 2));


// Set root font size

html {
    font-size: @font-size-root;
}


// Change styling for elements that mix pixels and ems

pre {
  font-size: ( @font-size-base - (1 / @font-size-root) );
}

.form-control-feedback {
  width: calc(@input-height-base ~" + 2px");
  height: calc(@input-height-base ~" + 2px");
}
.input-lg + .form-control-feedback {
  width: calc(@input-height-large ~" + 2px");
  height: calc(@input-height-large ~" + 2px");
}
.input-sm + .form-control-feedback {
  width: calc(@input-height-small ~" + 2px");
  height: calc(@input-height-small ~" + 2px");
}

.form-control {
    height: calc(@input-height-base ~" + 2px");
}

.form-horizontal {
    .radio, .checkbox, .radio-inline, .checkbox-inline {
        padding: @padding-base-vertical;
        border: 1px solid transparent;
    }
    .radio, .checkbox {
        min-height: calc((@line-height-computed + @padding-base-vertical) ~"+ 1px");
    }
    .form-control-static {
        padding-top: @padding-base-vertical;
        border-top: 1px solid transparent;
        padding-bottom: @padding-base-vertical;
        border-bottom: 1px solid transparent;
    }

    @media (min-width: @screen-sm-min) {
        .control-label {
            padding-top: @padding-base-vertical;
            border-top: 1px solid transparent;
        }
    }
}

More info available in a stackoverflow topic and a Github Issue

For those following along, we'll be able to change from pixels to REMs in v4 when we drop IE8 support

@pribilinskiy, could you please elaborate on why @line-height-computed here breaks those margin and padding rules? I'm not against patching my copy of bootstrap. How to make it work with this gist?

@koddo, because old @line-height-computed was already applied to the rules that use it, you need to extract all of them and add it to the gist.

Where are variables @line-height-large and @line-height-small ?

does this convert all px in bootstrap into ems or just some controls?