chore(docs): fix margin classes in examples

reactstrap · Oct 27, 2021 · 5e6d229 · 5e6d229
1 parent 1cc8a14
commit 5e6d229
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/stories/examples/DropdownSetActiveFromChild.js b/stories/examples/DropdownSetActiveFromChild.js
@@ -4,7 +4,7 @@ import { Navbar, Nav, NavItem, NavLink, UncontrolledDropdown, DropdownToggle, Dr
 export default function Example () {
   return (
     <Navbar color="light" light expand="md">
-      <Nav className="ml-auto" navbar>
+      <Nav className="ms-auto" navbar>
         <NavItem>
           <NavLink href="/components/">Inactive Link</NavLink>
         </NavItem>

diff --git a/stories/examples/Form/FormInline.js b/stories/examples/Form/FormInline.js
@@ -4,12 +4,12 @@ import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
 const Example = (props) => {
   return (
     <Form inline>
-      <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
-        <Label for="exampleEmail" className="mr-sm-2">Email</Label>
+      <FormGroup className="mb-2 me-sm-2 mb-sm-0">
+        <Label for="exampleEmail" className="me-sm-2">Email</Label>
         <Input type="email" name="email" id="exampleEmail" placeholder="something@idk.cool" />
       </FormGroup>
-      <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
-        <Label for="examplePassword" className="mr-sm-2">Password</Label>
+      <FormGroup className="mb-2 me-sm-2 mb-sm-0">
+        <Label for="examplePassword" className="me-sm-2">Password</Label>
         <Input type="password" name="password" id="examplePassword" placeholder="don't tell!" />
       </FormGroup>
       <Button>Submit</Button>

diff --git a/stories/examples/Navbar.js b/stories/examples/Navbar.js
@@ -27,7 +27,7 @@ const Example = (args) => {
         <NavbarBrand href="/">reactstrap</NavbarBrand>
         <NavbarToggler onClick={toggle} />
         <Collapse isOpen={isOpen} navbar>
-          <Nav className="mr-auto" navbar>
+          <Nav className="me-auto" navbar>
             <NavItem>
               <NavLink href="/components/">Components</NavLink>
             </NavItem>

diff --git a/stories/examples/NavbarToggler.js b/stories/examples/NavbarToggler.js
@@ -9,8 +9,8 @@ const Example = (props) => {
   return (
     <div>
       <Navbar color="faded" light>
-        <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
-        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
+        <NavbarBrand href="/" className="me-auto">reactstrap</NavbarBrand>
+        <NavbarToggler onClick={toggleNavbar} className="me-2" />
         <Collapse isOpen={!collapsed} navbar>
           <Nav navbar>
             <NavItem>

diff --git a/stories/examples/PopoverMulti.js b/stories/examples/PopoverMulti.js
@@ -10,9 +10,9 @@ const PopoverItem = props => {
   const toggle = () => setPopoverOpen(!popoverOpen);
 
   return (
-    <span>
+    <>
       <Button
-        className="mr-1"
+        className="me-1"
         color="secondary"
         id={"Popover-" + id}
         type="button"
@@ -31,7 +31,7 @@ const PopoverItem = props => {
           Pellentesque ornare sem lacinia quam venenatis vestibulum.
         </PopoverBody>
       </Popover>
-    </span>
+    </>
   );
 };
 

diff --git a/stories/examples/TooltipMulti.js b/stories/examples/TooltipMulti.js
@@ -11,7 +11,7 @@ const TooltipItem = props => {
 
   return (
     <span>
-      <Button className="mr-1" color="secondary" id={"Tooltip-" + id}>
+      <Button className="me-1" color="secondary" id={"Tooltip-" + id}>
         {item.text}
       </Button>
       <Tooltip