Search code examples
react-bootstrap

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!)

Solution

  • 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.