Using only Bootstrap 3’s grid system using LESS

Import the following files into your main LESS file, replacing “../components/” with the appropriate path to where Bootstrap is located:

@import "../components/bootstrap/less/scaffolding.less";
@import "../components/bootstrap/less/variables.less";

@import "variables.less"; // Put your custom variables in here

@import "../components/bootstrap/less/mixins.less";
@import "../components/bootstrap/less/forms.less";

// Delete next 2 lines if you don't want the navbar styles
@import "../components/bootstrap/less/navs.less";
@import "../components/bootstrap/less/navbar.less";

@import "../components/bootstrap/less/grid.less";
@import "../components/bootstrap/less/utilities.less";
@import "../components/bootstrap/less/responsive-utilities.less";

// Import Font Awesome
@import "../components/font-awesome/less/font-awesome.less";
// Font path to be printed in CSS
@fa-font-path: "../src/components/font-awesome/fonts";

//Put custom files here
@import 'custom.less';
@import 'header.less';

That’s all you really need to get up and running with the Bootstrap grid system. The benefits to doing this are that your compiled CSS file will be super light-weight because you’re only taking in the parts that you need.

Leave a comment

What do you think?

%d bloggers like this: