Conflict with @modal-title-padding variable in Bootstrap #377

MikeElghali opened this Issue Feb 21, 2014 · 6 comments


None yet

7 participants



There is a conflict with your variable : @modal-title-padding : 17px 19px 15px 24px;
(FLAT UI PRO 1.2.5) and the Bootstrap (3.0.3+) variable @modal-title-padding :15px;.

Indeed, when i compile BS less files and Flat UI less files, i got this error Operation on an invalid type.

After investigation, is because of those lines (bootstrap/modals.less - line 79) :

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
      padding: @modal-title-padding;
      border-bottom: 1px solid @modal-header-border-color;
      min-height: @modal-title-padding + @modal-title-line-height;


dlupu commented Feb 22, 2014

Having exactly the same problem (FLAT UI PRO 1.2.5 + Bootstrap 3.1.0)

For the time beeing, I've just replaced the line @modal-title-padding : 17px 19px 15px 24px with @modal-title-padding :15px; in flat-ui/less/variables.less

pytkin commented Feb 22, 2014

ok, we fix this in next release.

vjpr commented Feb 26, 2014


@pytkin pytkin closed this Mar 13, 2014
benstr commented Aug 6, 2014

@pytkin when is the next release of Pro? It has been awhile and this simple bug still exists in a premium product.

This problem has not been fixed with the new release of 1.3.0. The problem is that Bootstrap defines modal-title-padding as a single value, and performs calculations in modals.less under the assumption it is a single value: min-height: (@modal-title-padding + @modal-title-line-height);, whereas flat-ui-pro defines multiple values: @modal-title-padding: 17px 19px 15px 24px;

The "solution" is to change the variable name to something else, eg:

Line 32 in modules\modals.less becomes:

padding: @modal-title-padding-all;

Line 708 in variables.less becomes:

@modal-title-padding-all: 17px 19px 15px 24px;


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