我怎样才能在 React 应用程序的页脚中并排显示我的两个图标？

Question

I'm building a react portfolio. I'm struggling to style my footer. I only want to include icons of Github and LinkedIn on it. I want to have them side-by-side, and at the bottom of the screen once you reach the end of the page. Currently, the two icons are stacked vertically at the bottom, in the middle of the page, with a lot of space between the two rows. I have react-bootstrap implemented.

Here's my footer component:

 import {AiFillGithub} from "react-icons/ai";
 import {AiFillLinkedin} from "react-icons/ai";

function Footer() {
    return (
        <footer className="justify-content-center font-link">
            <div className="primary flex-row center">
                <ul className="flex-row">
                    <li className="links">
            <a href="https://github.com/PhuongHoang68"
            target="_blank"
            rel="noreferrer"
            >
                <h3 className="icon"><AiFillGithub size="3rem"/></h3>
            </a>
            </li>
            <li className="links">
            <a href="https://www.linkedin.com/in/phuong-hoang-a0b4901a5/"
            target="_blank"
            rel="noreferrer"
            >
                <h3 className="icon"><AiFillLinkedin size="3rem"/></h3>
            </a>
            </li>
            </ul>
            </div>
        </footer>
    )
}

export default Footer;

Here's my related css:

.App {
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  background-color: gray;
  text-align: center;
  margin-top: auto;
  padding: 8px;
}
html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-weight: 600;
  line-height: 1.5;
  font-size: 18px;
  background: var(--dark);
  color: var(--light);
  font-family: 'Poiret One', cursive;

} 

Here's my app.js (only the parts related to the footer):

import Footer from './components/Footer';

        <div className="app">
            <Footer />
        </div>

    


export default App; 

I have tried many methods and nothing is working. i have included the above code that is above. Please help me, I really appreciate it

Answer 1

It seems that ul has class flex-row but does not have its display set as flex , therefore the flex behavior is not enabled.

For a Bootstrap solution to fix this, perhaps try add d-flex , justify-content-center , align-items-center and (if the default list style also needed to be removed) list-unstyled to the className of ul .

Simplified demo on: stackblitz

<ul className="d-flex flex-row justify-content-center align-items-center list-unstyled">
...
</ul>