Extending Bootstrap with your own mixins

You can easily extend Bootstrap with your own mixins. In this recipe, you will see how to do this.

Getting ready

You will have to download the Bootstrap source code from http://getbootstrap.com/getting-started/#download. You can use a text editor to edit the Less code.

How to do it...

Perform the following steps:

1. Download and unzip the source files into your working directory from http://getbootstrap.com/getting-started/#download.
2. Create a Less file called figures.less and write the following Less code into this file:

   .figures() { 
   article { 
   
   figure { 
   .center-block(); 
   > img { 
   max-width:100%; 
   } 
   @media (min-width: @grid-float-breakpoint) 
   { 
   max-width:50%; 
   .pull-right(); 
   } 
   } 
   .clearfix(); 
   } 
   } 
   
   #maincontent { 
   .figures(); 
   }

3. Then, open the less/boostrap.less file and add the following line of code at the end of this file:

   @import "figures.less";

4. Now, recompile Bootstrap by running the following command in your console:

   grunt dist
   

5. Create...