You can easily extend Bootstrap with your own mixins. In this recipe, you will see how to do this.
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.
Perform the following steps:
Download and unzip the source files into your working directory from http://getbootstrap.com/getting-started/#download.
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(); }
Then, open the
less/boostrap.less
file and add the following line of code at the end of this file:@import "figures.less";
Now, recompile Bootstrap by running the following command in your console:
grunt dist
Create an
index...