0

I am using react-bootstrap

I want to make a navbar footer, but the alignment is not working for me.

This is how it looks right now:

I want the socials icons to be right-aligned and the rest centered.

here is my code for the Footer component:

import React from "react";
import { Container } from "react-bootstrap";
import { Nav } from "react-bootstrap";
import { Navbar } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faInstagram,
  faFacebook,
  faTwitter,
} from "@fortawesome/free-brands-svg-icons";

import "./Footer.css";

const Footer = () => {
  return (
    <Navbar
      className="main-footer d-flex justify-content-center navbarContainer"
      fixed="bottom"
    >
      <Nav>
        <Nav.Link href="#">About us</Nav.Link>
        <Nav.Link href="#">Contact us</Nav.Link>
        <Nav.Link href="#">Join us</Nav.Link>
      </Nav>
      <Nav className="justify-content-end">
        <Nav.Link href="">
          <FontAwesomeIcon icon={faInstagram} />
        </Nav.Link>
        <Nav.Link href="">
          <FontAwesomeIcon icon={faFacebook} />
        </Nav.Link>
        <Nav.Link href="">
          <FontAwesomeIcon icon={faTwitter} />
        </Nav.Link>
      </Nav>
    </Navbar>
  );
};

export default Footer;
Sting
  • 19
  • 5

1 Answers1

0

Without knowing what is inside of footer.css: If you really want to center your site navigation (the first Nav) in the middle of viewport, you have to position social links absolutely, so they don't take space. For social links you can use "position-absolute" and "end-0" classes:

 <Navbar fixed="bottom" className="justify-content-center">
      <Nav>
        <Nav.Link href="#">About us</Nav.Link>
        <Nav.Link href="#">Contact us</Nav.Link>
        <Nav.Link href="#">Join us</Nav.Link>
      </Nav>
      <Nav className="position-absolute end-0">
        <Nav.Link href="">
          <FontAwesomeIcon icon={faInstagram} />
        </Nav.Link>
        <Nav.Link href="">
          <FontAwesomeIcon icon={faFacebook} />
        </Nav.Link>
        <Nav.Link href="">
          <FontAwesomeIcon icon={faTwitter} />
        </Nav.Link>
      </Nav>
    </Navbar>

https://codesandbox.io/s/hopeful-bohr-2cbw0m

Igor Gonak
  • 2,050
  • 2
  • 10
  • 17
  • Absolute positioning does work, however fixed is preferable in this case, https://getbootstrap.com/docs/4.0/components/navbar/#placement – Dom Apr 25 '22 at 06:24
  • What do you mean? I'm not talking about NavBar. He has two Navs. First should be placed in the center and the second in the right corner. – Igor Gonak Apr 25 '22 at 06:38
  • Thank you that solves the problem. You mentioned the "footer.css", I've been googling a way to customize react-bootstrap components styling and can't find a way, can the style of the components be customized? – Sting Apr 25 '22 at 10:00
  • Sure they can. What exactly do you need? If it solves your problem, please mark it. Also it would be nice, if you could vote it up ;) – Igor Gonak Apr 25 '22 at 10:31