Reactstrap Core Footers

Pro Component

A website footer is a section of content at the very bottom of your webpage.

Description

We’ve made the following footer components using various reactstrap components, and Bootstrap classes and also some custom scss/css classes.

Example

Since these components were created with the thought of expanding on a whole screen, you should also take a look at our live preview, to see it on full width here.

DemoFooter

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import DemoFooter from "components/footers/DemoFooter.js";

function Example() {
  return (
    <>
      <DemoFooter />
    </>
  );
}

export default Example;

Footer1

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Footer1 from "components/footers/Footer1.js";

function Example() {
  return (
    <>
      <Footer1 />
    </>
  );
}

export default Example;

Footer2

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Footer2 from "components/footers/Footer2.js";

function Example() {
  return (
    <>
      <Footer2 />
    </>
  );
}

export default Example;

Footer3

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Footer3 from "components/footers/Footer3.js";

function Example() {
  return (
    <>
      <Footer3 />
    </>
  );
}

export default Example;

Footer4

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Footer4 from "components/footers/Footer4.js";

function Example() {
  return (
    <>
      <Footer4 />
    </>
  );
}

export default Example;

Footer5

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Footer5 from "components/footers/Footer5.js";

function Example() {
  return (
    <>
      <Footer5 />
    </>
  );
}

export default Example;

Footer6

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Footer6 from "components/footers/Footer6.js";

function Example() {
  return (
    <>
      <Footer6 />
    </>
  );
}

export default Example;

Note

You should note, that none of the bellow components are dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.