CODEWITHSUNDEEP
cssreactjssassnavbarreact-bootstrap
Sanjna Malpani
Sanjna Malpani

Reputation: 175

React Bootstrap NavBar Container, set width to auto

I am trying to use a NavBar from react bootstrap. However there seems to be a <div class="container"> that adds width. How do I set this width to auto?

enter image description here

I tried the following:

.navbar > .container {
    width:auto;
}

But this margin still remains. I also tried to 

<Navbar style={{ width: "auto" }}>
    <Navbar.Header>
       ...

But no success. My complete code:

<Row>
    <Navbar>
        <Navbar.Header>
            <Navbar.Brand className="lang-de">
                <a href="/" />
            </Navbar.Brand>
            <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
            <Nav pullRight>
                <NavItem eventKey={1} href="#">
                    Impressum
                </NavItem>
            </Nav>
        </Navbar.Collapse>
    </Navbar>
</Row>

Upvotes: 2

Views: 10955

Answers (5)

Mohammed
Mohammed

Reputation: 201

Just add container props to Navbar component and these all value you can pass to container props, container, container="fluid", container="sm" or md, lg, xl or xxl.

<Navbar color="light" light expand="md" container>

Upvotes: 0

Dan Osborne
Dan Osborne

Reputation: 94

If you are using the grid system you can set the Container to fluid

       <Container fluid>
          <NavBar />
          <Row>
              <div>Personal Digital Assistants</div>
              <ProfileCard text="Hello" info='unknown' imageTag={AlexaImg}/>
              <ProfileCard text="Sir" info='unknown' imageTag={CortanaImg}/>
              <ProfileCard text="Google thing" info='known' imageTag={SiriImg}/>
          </Row>
      </Container>

Upvotes: 1

Abinesh Prabhakaran
Abinesh Prabhakaran

Reputation: 1

Just add "fluid" next to Navbar on your code 

<Row>
<Navbar fluid>
    <Navbar.Header>
        <Navbar.Brand className="lang-de">
            <a href="/" />
        </Navbar.Brand>
        <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
        <Nav pullRight>
            <NavItem eventKey={1} href="#">
                Impressum
            </NavItem>
        </Nav>
    </Navbar.Collapse>
</Navbar>

Upvotes: 0

Adriano Frota
Adriano Frota

Reputation: 498

you can use only React Bootstrap Fixed top

<Navbar fixed="top" />

It will auto create the CSS below: 

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

You can see the this and another positions in documentation here

Upvotes: 3

Luke Walker
Luke Walker

Reputation: 501

In your css, try the following:

.navbar > .container {
    width:auto!important;
}

Upvotes: 0

Related Questions