Bootstrap 3.0 RC2 mixins issue -

i tried out new boostrap , wanted use mixins seems have no effect on page. tried example 1 bootstrap docs didnt work either.

mixins

.wrapper { .make-row(); } .content-main {   .make-lg-column(8); } .content-secondary {   .make-lg-column(3);   .make-lg-column-offset(1); } 

html

<div class="wrapper">   <div class="content-main">...</div>   <div class="content-secondary">...</div> </div> 

the result gave content in each div on separate lines instead of on 1 line offset of 1 column in middle. how can work properly?

thanks in advance.

my guess not importing bootstrap.less less folder. less folder in root of bootstrap 3 project. take less folder , put in project folder , make main.less , import in there. lets project folder looks following:

then main.less this:

@import '../less/bootstrap.less'; .wrapper{    .make-row(); } .content-main {   .make-lg-column(8); }  .content-secondary {   .make-lg-column(3);   .make-lg-column-offset(1); } 

and in html need link main.less file. less.js should added after linking main.less file. head section this:

<link rel="stylesheet/less" type="text/css" href="css/main.less" /> <script src="js/less-1.4.1.min.js" type="text/javascript"></script> 

and project should put in local server (like mamp or xamp) rather being opened statically double clicking on index.html file.

then should able see working if have following in html body:

<div class="wrapper">     <div class="content-main">         <div class="well">             <h1>left</h1>         </div>     </div>     <div class="content-secondary">         <div class="well">             <h1>right</h1>         </div>     </div> </div> 

you can improve on , make more semantic using html5 tags. example can use <section> used row <article> columns (but need give articles specific classes). like:

main.less

@import '../less/bootstrap.less'; section{   .make-row(); } .main-content{   .make-lg-column(5); }  .secondary{   .make-lg-column(7); } 

html

<section>     <article class="main-content">         <div>             <h1>main content</h1>         </div>     </article>     <article class="secondary">         <div>             <h1>secondary content</h1>         </div>     </article> </section> 

i hope helped you. happy bootstrapping :d