CODEWITHSUNDEEP
reactjsreact-bootstrapreact-bootstrap-nav
Sting
Sting

Reputation: 19

Alignment not working in react-bootstrap for Navbar-footer

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;

Upvotes: 0

Views: 571

Answers (1)

Igor Gonak
Igor Gonak

Reputation: 2250

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

Upvotes: 0

Related Questions