Extending the mixins 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

Install Bootstrap as described the Downloading and installing Bootstrap recipe of this chapter. You can use a text editor to edit the SCSS code. In the There's more… section of this recipe, the Sass version of Dan Eden's Animate.css will be used.

How to do it...

Perform the following steps:

1. Before you start, install Bootstrap as described in the Downloading and installing Bootstrap recipe of this chapter.
2. Create a Sass partial file called _figures.scss and write the following SCSS code into this file:

   @mixin figures() {
     article {
       figure {
         @include center-block();
         > img {
           @include img-fluid();
         }
   
         @include media-breakpoint-up(md) {
           max-width:50%;
           @include pull-right();
         }
       }   
     @include clearfix();
     }
   }
   
   #maincontent {
     @include figures();
   }

3. Then, open the scss...