Skip to content

Instantly share code, notes, and snippets.

@jasny
Last active January 5, 2020 15:36
Embed
What would you like to do?
Use em or rem font-size in Bootstrap 3
/**
* 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;
}
}
}
@steven-prybylynskyi
Copy link

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

@koddo
Copy link

koddo commented Apr 6, 2015

@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?

@bisubus
Copy link

bisubus commented May 21, 2015

@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.

@ezersky
Copy link

ezersky commented Oct 3, 2015

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

@MilosFe
Copy link

MilosFe commented Dec 30, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment