bhansa bhansa - 3 months ago 50
Less Question

Importing modal.less in bootstrap

I am trying to import modals.less file in my project, using bootstrap(v3.3.7)

Below is the bootstrap.less code:

* Bootstrap v3.3.7 (
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (
* Custom file

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Core CSS
@import "scaffolding.less";
@import "grid.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "modals.less";
@import "navs.less";
@import "dropdowns.less";
@import "popovers.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

But it's throwing an error while importing

message: '.transition-transform is undefined

which is this line:

// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");

Do I need to also import any other dependencies that I am not aware of to use modal?


// Mixins
// --------------------------------------------------

// Utilities
@import "mixins/tab-focus.less";
@import "mixins/hide-text.less";
@import "mixins/responsive-visibility.less";
@import "mixins/image.less";
@import "mixins/reset-filter.less";
@import "mixins/reset-text.less";
@import "mixins/opacity.less";
@import "mixins/labels.less";
@import "mixins/resize.less";
@import "mixins/size.less";
@import "mixins/vendor-prefixes.less";
@import "mixins/text-emphasis.less";
@import "mixins/text-overflow.less";*/

// Components
@import "mixins/forms.less";
@import "mixins/buttons.less";
@import "mixins/nav-divider.less";
@import "mixins/alerts.less";
@import "mixins/panels.less";
@import "mixins/pagination.less";
@import "mixins/list-group.less";

@import "mixins/progress-bar.less";
@import "mixins/table-row.less";*/

// Skins
@import "mixins/border-radius.less";
@import "mixins/background-variant.less";
@import "mixins/gradients.less";
// Layout
@import "mixins/clearfix.less";
@import "mixins/center-block.less";
@import "mixins/nav-vertical-align.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";

Answer Source

After further investigation via the comments above, it seems the issue was that @import "mixins/vendor-prefixes.less"; was commented out in the mixins.less file. I recommend uncommenting that line.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download