Placing a single Bootstrap navbar dropdown to the right

In this recipe, we are also using a customized version of the navbar used on the official Bootstrap 4 website. The navbar is somewhat similar to the one used in the preceding recipe.

Getting ready

In this recipe, we will deal with the drop-down issue for the drop-down bubble (secondary links) in the navbar. Refer to the official documentation regarding dropdowns at https://v4-alpha.getbootstrap.com/components/dropdowns/#menu-alignment.

How to do it…

1. Open chapter5/start/main.scss and comment out all the @import statements except the one that pertains to this recipe:

@import "./bower_components/bootstrap/scss/bootstrap.scss";
@import "./bower_components/bootstrap/scss/_mixins.scss";
@import "./bower_components/font-awesome/scss/font-awesome.scss";
@import "./bower_components/hover/scss/hover.scss";

// @import "recipe05-01.scss";
   @import "recipe05-02.scss";
// @import "recipe05-03.scss"; 
// @import "recipe05-04.scss"; 
// @import "recipe05...