title: how to fixed footer in bottom
body: <h1>how to fixed footer in bottom?</h1>
  <h2>JSX HTML Code</h2>
  <pre><code>import React from 'react';
  import { Card } from 'react-bootstrap';
  import './Footer.css';
   const Footer = () =&gt; {
      const today = new Date();
      const year = today.getFullYear();
      return (
          &lt;div id='foot'&gt;
              &lt;Card className=&quot;text-center bg-dark&quot;&gt;
              {/* &lt;Card.Header&gt;Featured&lt;/Card.Header&gt; sticky-bottom  */}
              &lt;Card.Body className='blockquote-footer '&gt;
                  &lt;Card.Title className='color-white'&gt;Top Gear&lt;/Card.Title&gt;
                  &lt;Card.Text&gt;
                      &lt;p&gt;&lt;small&gt;copyright @ {year} &lt;/small&gt;&lt;/p&gt;
                  &lt;/Card.Text&gt;
  
              &lt;/Card.Body&gt;
          &lt;/Card&gt;
          &lt;/div&gt;
  
  
  
  
      );
  };
  
  export default Footer;
  </code></pre>
  <h2>JSX CSS Code</h2>
  <pre><code> #foot {
      margin-top: 1rem;
      padding: 1rem;
      background-color: black;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
  }
  
  </code></pre>
  <h2>when I call this footer component inside the other component footer can not stay at bottom position</h2>
  <h2>I try to fix it but I can not solve it##</h2>