CODEWITHSUNDEEP
htmlcssbootstrap-4
Drsaud
Drsaud

Reputation: 425

How to align bootstrap navbar from right to left

I used the navbar component on my website but I want to align it from the right to left so the first thing coming in the right is Toursitation (Brand Name).

Can you please help me?

this is the code of the navbar:

<Navbar bg="dark" expand="lg" style={{"padding": "0 10px", "background-color": "#132c33 !important"}}>
  <Navbar.Brand href="/">TouriStation</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="/events" className="navbarSections">Events</Nav.Link>
      <Nav.Link href="/resturants" className="navbarSections">Resturants & caffes</Nav.Link>
      <Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
      <Nav.Link href="accommodations" className="navbarSections">Accomdation</Nav.Link>
      <Nav.Link href="malls" className="navbarSections">Malls</Nav.Link>
      <Nav.Link href="extraservices" className="navbarSections">Extra services</Nav.Link>
  </Nav>

    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" value={this.state.search} onChange={this.onChangeSearch}/>
      <Button variant="outline-info" onClick={() => window.location = "/Search/"+(this.state.search)}>Search</Button>
    </Form>    



      <SplitButton style={{"display": this.state.user ? "none" : "block", "color": "white", marginLeft: "0.5%"}} class="text-white"
      menuAlign={{ lg: 'right' }} 
      title="Join Us" 
      id="dropdown-menu-align-responsive-2" 
      variant="info"
      >
                <Dropdown.Item href="/login">Login</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item href="/register">Register</Dropdown.Item>

    </SplitButton>


    <SplitButton style={{"display": this.state.user ? "block" : "none" , marginLeft: "0.5%"}} class="text-white"
      menuAlign={{ lg: 'right' }} 
      title="Profile" 
      variant="info"
      id="dropdown-menu-align-responsive-2" > 
    <Dropdown.Item href="/newplace" style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}}>New Place</Dropdown.Item>
    <Dropdown.Item href="/newevent"  style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}} >New Event</Dropdown.Item>
    <Dropdown.Divider style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}} />
    <Dropdown.Item href="/profile">My Account</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item href="http://localhost:3000/logout/">Sign Out</Dropdown.Item>
</SplitButton>
      </Navbar.Collapse>  
        </Navbar>

Update that if I use me-auto or '.flex-row-reverse', it will be like this enter image description here

the orignal one is this

enter image description here

Upvotes: 0

Views: 69

Answers (1)

L&#253; Ho&#224;i
L&#253; Ho&#224;i

Reputation: 129

in your code below, remove class name: mr-auto.

    <Nav className="mr-auto">
      <Nav.Link href="/events" className="navbarSections">Events</Nav.Link>
      <Nav.Link href="/resturants" className="navbarSections">Resturants & caffes</Nav.Link>
      <Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
      <Nav.Link href="accommodations" className="navbarSections">Accomdation</Nav.Link>
      <Nav.Link href="malls" className="navbarSections">Malls</Nav.Link>
      <Nav.Link href="extraservices" className="navbarSections">Extra services</Nav.Link>
  </Nav>

Upvotes: 1

Related Questions