docs: add 'as' prop documentation (react-bootstrap#6007)

* docs: add 'as' prop documentation

* docs: update 'as' prop documentation explanation

Co-authored-by: Rohan Ravindran <[email protected]>

Author: rohanrav

www/src/examples/AsProp.js

@@ -0,0 +1,5 @@
+<Row className="mx-0">
+  <Button as={Col} variant="primary">Button #1</Button>
+  <Button as={Col} variant="secondary" className="mx-2">Button #2</Button>
+  <Button as={Col} variant="success">Button #3</Button>
+</Row>;

www/src/pages/getting-started/introduction.mdx

@@ -3,6 +3,8 @@ import CodeBlock from '../../components/CodeBlock';
 import BrowserGlobalsCodeBlock from '../../components/BrowserGlobalsCodeBlock';
 import CssCodeBlock from '../../components/CssCodeBlock';
 import DocLink from '../../components/DocLink';
+import ReactPlayground from '../../components/ReactPlayground';
+import AsPropButtonExample from '../../examples/AsProp';
 
 # Introduction
 
@@ -118,6 +120,21 @@ $theme-colors: (
 See [the Bootstrap docs](https://getbootstrap.com/docs/4.4/getting-started/theming/)
 for more advanced use cases and details about customizing stylesheets.
 
+## "as" Prop API
+
+With certain React-Bootstrap components, you may want to modify the component or HTML tag 
+that is rendered.
+
+If you want to keep all the styling of a particular React-Bootstrap component but switch the 
+component that is finally rendered (whether it's a different React-Bootstrap component, a 
+different custom component, or a different HTML tag) you can use the "as" Prop to do so.
+
+The example below passes a Column component to the "as" Prop in a Button component. This 
+ultimately causes a Column component to be rendered but with the same styles as a Button 
+component.
+
+<ReactPlayground codeText={AsPropButtonExample} />
+
 ## Themes
 
 React-Bootstrap is compatible with existing Bootstrap themes. Just