How do I make a footer component in reactstrap?

Question

I am using reactstrap to build a sticky footer component like this example but I cannot find a dedicated footer component.

The only other way is to just use html:

<footer class="footer">
  <div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

The problem is the above is not picking my .footer class. That is a different problem, but for now I just want to know if there is a better way.

Footer is only defined in Cards

Solution 1

1. In React we do not use class but className attribute. Normally it'll throw an error.
2. Your example uses an additional CSS sticky-footer-navbar.css file provide by Bootstrap that is not provide by default with the compiled code. You have to include it by yourself after get it on their source code on Github Sticky Footer Navbar CSS Source Code

Solution 2

You don't need to separate Footer component. Just add div like you're doing in the above code.

p.s. class = className in react.js.

Comments

[q3e]

Thabjs @mcssym. How do I include it, I could not find any documentation of this css file in bootstrap 4 anywhere.

[mcssym]

as i said it is inclded with their source code on Github. Or you can get it here github.com/twbs/bootstrap/blob/v4-dev/site/docs/4.1/examples‌​/…

[q3e]

i see, but I checked its just for additional style. I thought it also affected the 'stickiness'

[mcssym]

Affect how? I think it does the job if you want what it is on bootstrap example.

[Shn]

Links are 404'd