> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/restful-apis-build-a-booksearch-app-ver-2.0/lesson-4-create-footer-component.md).

# Lesson 4 - Create Footer Component

Layout Structure of Footer Componet

```graphql
// Layout Design of Footer Component
Footer Component
│
└── Render Structure
    └── <footer> (bg-dark text-light py-4 mt-5)
        └── <div> (container text-center)
            ├── <p> - Copyright text
            │   └── "© 2025, KOIDA BookShelf"
            │
            └── <div> (d-flex justify-content-center) - Social Media Links
                ├── <a> (text-light mx-3) - Instagram Link
                │   ├── href="https://www.instagram.com"
                │   ├── target="_blank"
                │   ├── rel="noopener noreferrer"
                │   └── Content: <i className="fab fa-instagram"></i> Instagram
                │
                ├── <a> (text-light mx-3) - YouTube Link
                │   ├── href="https://www.youtube.com"
                │   ├── target="_blank"
                │   ├── rel="noopener noreferrer"
                │   └── Content: <i className="fab fa-youtube"></i> YouTube
                │
                ├── <a> (text-light mx-3) - Facebook Link
                │   ├── href="https://www.facebook.com"
                │   ├── target="_blank"
                │   ├── rel="noopener noreferrer"
                │   └── Content: <i className="fab fa-facebook"></i> Facebook
                │
                └── <a> (text-light mx-3) - Twitter/X Link
                    ├── href="https://www.twitter.com"
                    ├── target="_blank"
                    ├── rel="noopener noreferrer"
                    └── Content: <i className="fab fa-twitter"></i> X

```

```jsx
/* Footer.jsx */
/** @format */
// Import necessary libraries
import React from 'react';

const Footer = () => {
  return (
    <footer className="bg-dark text-light py-4 mt-5">
      <div className="container text-center">
        {/* Copyright Information */}
        <p>&copy; 2025, KOIDA BookShelf</p>

        {/* Social Media Links */}
        <div className="d-flex justify-content-center">
          <a
            href="https://www.instagram.com"
            className="text-light mx-3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fab fa-instagram"></i> Instagram
          </a>
          <a
            href="https://www.youtube.com"
            className="text-light mx-3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fab fa-youtube"></i> YouTube
          </a>
          <a
            href="https://www.facebook.com"
            className="text-light mx-3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fab fa-facebook"></i> Facebook
          </a>
          <a
            href="https://www.twitter.com"
            className="text-light mx-3"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fab fa-twitter"></i> X
          </a>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

```

{% code lineNumbers="true" %}

```css
/* index.css */
/** @format */
html,
body {
  height: 100%;
  margin: 0;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
```

{% endcode %}

### Explanation of `Footer.jsx` Code Structure

The `Footer` component provides the footer section of the app, including copyright information and links to social media platforms. Here's a step-by-step breakdown:

***

#### **1. Importing Libraries**

```jsx
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
```

* **React**: Required to build the component.
* **Bootstrap**: Used for styling the footer and ensuring responsiveness.

***

#### **2. Component Declaration**

```jsx
const Footer = () => {...}
```

* **Purpose**:
  * Define the `Footer` as a stateless functional component.
  * No props are required since the content is static.

***

#### **3. Footer Layout**

```jsx
<footer className="bg-dark text-light py-4 mt-5">
  <div className="container text-center">
    {/* Content goes here */}
  </div>
</footer>
```

* **`footer` Tag**:
  * Represents the footer of the page.
  * Styled with `bg-dark` (dark background) and `text-light` (light text) classes.
  * `py-4`: Adds vertical padding for spacing.
  * `mt-5`: Adds top margin to separate it from the main content.

***

#### **4. Copyright Information**

```jsx
<p>&copy; 2025, KOIDA BookShelf</p>
```

* Displays copyright information:
  * `&copy;`: HTML entity for the copyright symbol.
  * `2025, KOIDA BookShelf`: Static text representing the app name and copyright year.

***

#### **5. Social Media Links**

```jsx
<div className="d-flex justify-content-center">
  <a href="https://www.instagram.com" className="text-light mx-3" target="_blank" rel="noopener noreferrer">
    <i className="fab fa-instagram"></i> Instagram
  </a>
  <a href="https://www.youtube.com" className="text-light mx-3" target="_blank" rel="noopener noreferrer">
    <i className="fab fa-youtube"></i> YouTube
  </a>
  <a href="https://www.facebook.com" className="text-light mx-3" target="_blank" rel="noopener noreferrer">
    <i className="fab fa-facebook"></i> Facebook
  </a>
  <a href="https://www.twitter.com" className="text-light mx-3" target="_blank" rel="noopener noreferrer">
    <i className="fab fa-twitter"></i> X
  </a>
</div>
```

* **`d-flex justify-content-center`**:
  * Creates a flexbox layout to horizontally align the links.
* **Links**:
  * Each link directs users to a social media platform (`Instagram`, `YouTube`, `Facebook`, and `X`).
  * `target="_blank"`: Opens the link in a new tab.
  * `rel="noopener noreferrer"`: Improves security for external links.
* **Font Awesome Icons**:
  * Each link uses an icon (`fab fa-[platform]`) for a better visual experience.
  * Ensure Font Awesome is included in your project to render icons.

***

#### **6. Exporting the Component**

```jsx
export default Footer;
```

* **Purpose**:
  * Makes the `Footer` component reusable in the parent application.

***

#### Key Takeaways for Students:

1. **Bootstrap Styling**:
   * Use classes like `bg-dark` and `text-light` for predefined styles.
   * Utilize flexbox utilities (`d-flex justify-content-center`) for alignment.
2. **Social Media Links**:
   * Ensure links are secure with `target="_blank"` and `rel="noopener noreferrer"`.
   * Enhance visual appeal with icons from libraries like Font Awesome.
3. **Static Content**:
   * Learn how to create a component with static, non-dynamic data.
4. **Component Integration**:
   * The `Footer` component is standalone and ready to be included in `AppBookShelf.jsx`.