add flex direction too

use utils instead

this allows us to easily scale card blocks in groups and decks, without repeating it in our css

this assumes no margin on the .card to start (which will follow in a later commit)

Adding 25%, 50%, and 75% to the mix for later use with cards

- Drops the absolute positioning of the icons within the left/right controls. We have to keep the controls themselves positioned though since we're overlapping HTML elements here.

- No more position, left, right, or margins involved; just some justify-content and align-items.

- Add some comments for explaining which flex property-value pair does what.

- Remove the unapplied font and line-height stuff now that we're all SVGs and flexbox here.

This revamps the indicators to use flexbox instead of inline-block for added flexbility (hah). Indicators now automatically scale based on the number of elements present, and max out at the `$carousel-indicator-width` instead of always being that wide.

- Require inner element for the icon for improved customization (e.g., drop the element to replace it with your own icon font or SVG)
- Tighten up padding
- Better comments

fixes #18115: move forward with one naming scheme for inversed color schemes, renaming .navbar-dark to .navbar-inverse (matching .card-inverse in the process and restoring v3's inverted class name)