(dropdown+nav-item-dropdown): `noCaret` option causes unwanted side effects

Enabling the noCaret option on the dropdown or nav-item-dropdown component causes some unwanted styling issues due to dropping the .dropdown-toggle class.

Bootstrap uses this class for some minor styling changes for dropdowns in button-groups, input-groups and even the button itself.

A better solution would be to add a custom class like .dropdown-toggle-no-caret to the dropdown-toggle when the noCaret option is set and use some custom CSS to hide the caret.

[curtgrimes]

A quick and dirty way to fix the rounded corner issue when using no-caret on a dropdown button is to add Bootstrap’s new rounded class.

Example (first button does not have class, second button has the class applied with toggle-class="rounded"):

<b-dropdown variant="danger" dropup no-caret right class="mr-2">
  <template slot="button-content">
    <i class="fa fa-desktop" aria-hidden="true"></i> <span class="sr-only">Screens</span>
  </template>
</b-dropdown>

<!-- toggle-class="rounded" added to fix button corners when no-caret is in use -->
<b-dropdown variant="danger" dropup no-caret right class="mr-2" toggle-class="rounded">
  <template slot="button-content">
    <i class="fa fa-desktop" aria-hidden="true"></i> <span class="sr-only">Screens</span>
  </template>
</b-dropdown>

[tmorehouse]

@jackmu95 we currently try and follow the bootstrap V4 styles where possible, without creating new styling classes.

There has been muttering over at Bootstrap on github about no caret options for dropdowns, but nothing set in stone other than the mentioned removal of the dropdown-toggle class.

If there are changes over at Bootstrap V4 for handling a no caret toggle via classes, then we will definitely adjust how it is handled in Bootstrap-vue.