CODEWITHSUNDEEP
react-bootstrap
Nat Kuhn
Nat Kuhn

Reputation: 9783

How can I center a Navbar in react-bootstrap

I am hoping that this is a simple question, and I see that some folks have asked a similar question about bootstrap. I haven't been able to work one of those answers into a solution that works for me, and I think there may be a simpler react-bootstrap answer in any case.

Code example is here: https://codesandbox.io/s/yq5jvl9lz9

Here's what it looks like, when the viewport is wide enough: Navbar as produced by my Codesandbox code

Here's more-or-less what I want: What I'm shooting for

Your help will be greatly appreciated! Thanks, Nat

EDIT 12/22/18: Starting with the information from @Cristian below, I modified the example. I needed display: inline-block in addition to width: 100%. Unfortunately, at larger screen sizes, the "brand" is now mis-aligned with the menu items: misaligned navbar

Any other fixes appreciated! I have posted this as a fresh question, so answers can go there (and points for accepted answer!)

Upvotes: 10

Views: 25978

Answers (6)

Richard Logwood
Richard Logwood

Reputation: 3273

Putting the Navbar content in a <Container> worked for me, see snip.

Using bootstrap v4.6, react v17 and react-bootstap v1.5

 "bootstrap": "^4.6.0",
 "react": "^17.0.2",
 "react-bootstrap": "^1.5.2"

Snip from Navigation.js, see <Container> below:

render() {
  return (
 <Navbar collapseOnSelect expand="sm"  fixed="top"
       className="bg-light justify-content-between">
     <Container>
       <LinkContainer to="/">
        <Navbar.Brand>
        <img src={my_image} alt='my alt text' className='profile-header'/>
        </Navbar.Brand>
       </LinkContainer>

       <Navbar.Toggle aria-controls="responsive-navbar-nav" />
       <Navbar.Collapse id="responsive-navbar-nav">
         <Nav className="mr-auto">
             <LinkContainer to="/">
               <Nav.Link>Home</Nav.Link>
             </LinkContainer>
             <LinkContainer to="/about">
               <Nav.Link>About</Nav.Link>
             </LinkContainer>
             <LinkContainer to="/something" activeClassName='selectedMenuItem'>
               <Nav.Link>Something</Nav.Link>
             </LinkContainer>
             <Navbar.Text>
               <Title/>
             </Navbar.Text>
         </Nav>
       </Navbar.Collapse>
     </Container>
 </Navbar>
    );
}

Upvotes: 2

SamePop20
SamePop20

Reputation: 147

I had the same question, and this worked for me:

Add className="justify-content-center" to the parent.

Example:

<Navbar className="justify-content-center">
    <Navbar.Brand/>
</Navbar>

Upvotes: 6

Leo
Leo

Reputation: 231

I think className='m-auto' at Nav is enough

Upvotes: 22

TeslaXba
TeslaXba

Reputation: 357

Here is another solution, you can use the Container from react-bootstrap around your navbar. It will align your navbar with the main section. On a screen, with a higher width, it will look much better! I hope it helps!

Upvotes: 2

TeslaXba
TeslaXba

Reputation: 357

I just saw the problem that you have. I had the same issue. I just took the normal navbar from react-bootstrap, and switched the navbar brand with my logo. I added, using styled-components 

margin-right: 35vw;

to the style of the logo. So it pushed all the links to the middle of the page. The code for the navbar you can find under https://react-bootstrap.github.io/components/navbar/.

I hope it helps you.

Upvotes: 1

Iulian
Iulian

Reputation: 419

Maybe it's 1 year late but I had the same problem and couldn't find an answer. I found out that inline css doesn't work for me, so I had to define a custom class which is used for styling.

The solution to your problem would be styling the navbar-brand or any other element by using text-align: center however, this will not work unless you also specify width: 100%. Please access the link I provided to see my approach to the problem.

THIS IS AN EDIT AFTER OP'S LAST EDIT:

I found two approaches to do what you want to achieve. One is not very responsive and I don't recommend.

First approach:

Delete everything in CSS and leave just

.center-navbar {
  width:30%;
  margin-left: 35%;
}

Second approach:

Delete everything in css and, instead you will be using the layout grid offered by React Bootstrap. Now your code in Index.js will be looking something like that:

import React from "react";
import { render } from "react-dom";
import { Navbar, Nav, NavItem, NavDropdown, Glyphicon, Grid, Row, Col } from "react-bootstrap";
import "./index.css";

const App = () => (
  <div>
    <Grid>
      <Row className="show-grid">
        <Col xs={4} md={4}>
        </Col>
        <Col xs={4} md={4}>
          <div>
            <Navbar collapseOnSelect>
              <Navbar.Header>
                <Navbar.Brand>Logo</Navbar.Brand>
                <Navbar.Toggle />
              </Navbar.Header>
              <Navbar.Collapse>
                <Nav>
                  <NavItem eventKey="a" href="#">
                    Link1
            </NavItem>

                  <NavItem eventKey="b" href="#">
                    Link2
            </NavItem>
                </Nav>
              </Navbar.Collapse>
            </Navbar>
          </div>
        </Col>
      </Row>
    </Grid>
    <h2 style={{ textAlign: "center" }}>This is some text</h2>
  </div>
);

render(<App />, document.getElementById("root"));

There is a problem however. I recommend you to study W3C (World Wide Web consortium) and understand why it's not recommended to place Logo in the middle of the screen. If you look on most websites (Stackoverflow, Amazon, eBay, the list goes on), they don't use the logo in the middle, and instead on the left. It's a standard so that's why there is no much recommendation for that. I do not recommend to use the solution I offered unless that's exactly your only way to accomplish what you want to achieve.

Upvotes: 2

Related Questions