Skip to content

Instantly share code, notes, and snippets.

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;
}
}
}
@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