I have integrated the navbar component on my website, but I am looking to align it from right to left so that "Toursitation" (Brand Name) appears first on the right side. Can someone please assist me?
Below is the code for the current 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">Restaurants & cafes</Nav.Link>
<Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
<Nav.Link href="accommodations" className="navbarSections">Accommodation</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: If I use `me-auto` or `.flex-row-reverse`, it will look like this: https://i.sstatic.net/iPojy.png
The original design looks like this: