docs: clean up examples (#6853)

Author: kyletsang

www/docs/components/overlays.mdx

@@ -104,7 +104,7 @@ compliant.
 
 Hover over the links below to see tooltips.
 
-<CodeBlock language="jsx" live>
+<CodeBlock language="jsx" live noInline>
   {TooltipInCopy}
 </CodeBlock>
 

www/docs/examples/Button/Active.js

@@ -5,7 +5,7 @@ function ActiveExample() {
     <>
       <Button variant="primary" size="lg" active>
         Primary button
-      </Button>{' '}
+      </Button>
       <Button variant="secondary" size="lg" active>
         Button
       </Button>

www/docs/examples/Button/Disabled.js

@@ -5,10 +5,10 @@ function DisabledExample() {
     <>
       <Button variant="primary" size="lg" disabled>
         Primary button
-      </Button>{' '}
+      </Button>
       <Button variant="secondary" size="lg" disabled>
         Button
-      </Button>{' '}
+      </Button>
       <Button href="#" variant="secondary" size="lg" disabled>
         Link
       </Button>

www/docs/examples/Button/OutlineTypes.js

@@ -3,13 +3,13 @@ import Button from 'react-bootstrap/Button';
 function OutlineTypesExample() {
   return (
     <>
-      <Button variant="outline-primary">Primary</Button>{' '}
-      <Button variant="outline-secondary">Secondary</Button>{' '}
-      <Button variant="outline-success">Success</Button>{' '}
-      <Button variant="outline-warning">Warning</Button>{' '}
-      <Button variant="outline-danger">Danger</Button>{' '}
-      <Button variant="outline-info">Info</Button>{' '}
-      <Button variant="outline-light">Light</Button>{' '}
+      <Button variant="outline-primary">Primary</Button>
+      <Button variant="outline-secondary">Secondary</Button>
+      <Button variant="outline-success">Success</Button>
+      <Button variant="outline-warning">Warning</Button>
+      <Button variant="outline-danger">Danger</Button>
+      <Button variant="outline-info">Info</Button>
+      <Button variant="outline-light">Light</Button>
       <Button variant="outline-dark">Dark</Button>
     </>
   );

www/docs/examples/Button/Sizes.js

@@ -3,18 +3,18 @@ import Button from 'react-bootstrap/Button';
 function SizesExample() {
   return (
     <>
-      <div className="mb-2">
+      <div className="d-flex gap-2 mb-2">
         <Button variant="primary" size="lg">
           Large button
-        </Button>{' '}
+        </Button>
         <Button variant="secondary" size="lg">
           Large button
         </Button>
       </div>
-      <div>
+      <div className="d-flex gap-2">
         <Button variant="primary" size="sm">
           Small button
-        </Button>{' '}
+        </Button>
         <Button variant="secondary" size="sm">
           Small button
         </Button>

www/docs/examples/Button/TagTypes.js

@@ -3,9 +3,9 @@ import Button from 'react-bootstrap/Button';
 function TagTypesExample() {
   return (
     <>
-      <Button href="#">Link</Button> <Button type="submit">Button</Button>{' '}
-      <Button as="input" type="button" value="Input" />{' '}
-      <Button as="input" type="submit" value="Submit" />{' '}
+      <Button href="#">Link</Button> <Button type="submit">Button</Button>
+      <Button as="input" type="button" value="Input" />
+      <Button as="input" type="submit" value="Submit" />
       <Button as="input" type="reset" value="Reset" />
     </>
   );

www/docs/examples/Button/Types.js

@@ -3,13 +3,13 @@ import Button from 'react-bootstrap/Button';
 function TypesExample() {
   return (
     <>
-      <Button variant="primary">Primary</Button>{' '}
-      <Button variant="secondary">Secondary</Button>{' '}
-      <Button variant="success">Success</Button>{' '}
-      <Button variant="warning">Warning</Button>{' '}
-      <Button variant="danger">Danger</Button>{' '}
-      <Button variant="info">Info</Button>{' '}
-      <Button variant="light">Light</Button>{' '}
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="success">Success</Button>
+      <Button variant="warning">Warning</Button>
+      <Button variant="danger">Danger</Button>
+      <Button variant="info">Info</Button>
+      <Button variant="light">Light</Button>
       <Button variant="dark">Dark</Button>
       <Button variant="link">Link</Button>
     </>

www/docs/examples/ButtonGroup/Toolbar.js

@@ -9,9 +9,9 @@ function ToolbarExample() {
     <>
       <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">
         <ButtonGroup className="me-2" aria-label="First group">
-          <Button variant="secondary">1</Button>{' '}
-          <Button variant="secondary">2</Button>{' '}
-          <Button variant="secondary">3</Button>{' '}
+          <Button variant="secondary">1</Button>
+          <Button variant="secondary">2</Button>
+          <Button variant="secondary">3</Button>
           <Button variant="secondary">4</Button>
         </ButtonGroup>
         <InputGroup>
@@ -30,9 +30,9 @@ function ToolbarExample() {
         aria-label="Toolbar with Button groups"
       >
         <ButtonGroup aria-label="First group">
-          <Button variant="secondary">1</Button>{' '}
-          <Button variant="secondary">2</Button>{' '}
-          <Button variant="secondary">3</Button>{' '}
+          <Button variant="secondary">1</Button>
+          <Button variant="secondary">2</Button>
+          <Button variant="secondary">3</Button>
           <Button variant="secondary">4</Button>
         </ButtonGroup>
         <InputGroup>

www/docs/examples/ButtonGroup/ToolbarBasic.js

@@ -6,11 +6,15 @@ function ToolbarBasicExample() {
   return (
     <ButtonToolbar aria-label="Toolbar with button groups">
       <ButtonGroup className="me-2" aria-label="First group">
-        <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}
+        <Button>1</Button>
+        <Button>2</Button>
+        <Button>3</Button>
         <Button>4</Button>
       </ButtonGroup>
       <ButtonGroup className="me-2" aria-label="Second group">
-        <Button>5</Button> <Button>6</Button> <Button>7</Button>
+        <Button>5</Button>
+        <Button>6</Button>
+        <Button>7</Button>
       </ButtonGroup>
       <ButtonGroup aria-label="Third group">
         <Button>8</Button>

www/docs/examples/Card/Group.js

@@ -23,7 +23,7 @@ function GroupExample() {
           <Card.Title>Card title</Card.Title>
           <Card.Text>
             This card has supporting text below as a natural lead-in to
-            additional content.{' '}
+            additional content.
           </Card.Text>
         </Card.Body>
         <Card.Footer>