Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

No matter what bootstrap nav bar is taking free space?

I am learning react with bootstrap styles. I am creating a nav bar using bootstrap but somehow navbar is showing in the middle.

Here is the code:

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import "bootstrap/dist/js/bootstrap.bundle";
import { NavLink } from "react-router-dom";


function Navigation() {
  return (
    <>
      <Navbar
        collapseOnSelect
        sticky="top"
        expand="lg"
        bg="dark"
        variant="dark"
      >
        <Container>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link as={NavLink} to="/">
                Home
              </Nav.Link>
            </Nav>
            <Nav>
              <Nav.Link as={NavLink} to="/about">
                About
              </Nav.Link>
              <Nav.Link as={NavLink} to="/careers">
                Career
              </Nav.Link>
              <Nav.Link as={NavLink} to="/question">
                Questions
              </Nav.Link>
              <Nav.Link as={NavLink} to="/login">
                Login
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>
  );
}

export default Navigation;

I have attached output result from above code. I have highlighted the spaces. I want to close those spaces and move the home to all way to the left right and other to all way to right side.
taking spaces

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I have tried using me-auto and ml-auto to move to right and left sides but they aren’t working.

I even hard coded using css but it worked but I have to use media query in every pixel to fix the issue.

margin-left: -200px;
margin-right:200px;

I even tried display flex with justify-content but nope.

>Solution :

Container component center your content horizontally and also provide some padding on left and right side on higher breakpoints (i.e. desktop). If you don’t want this behaviour, then just leave Container component out.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading