I'm trying to right align a navbar item (Contribute) within a navbar.js but I can't seem to figure it out. The navbar is a React component and looks like the following,
navbar.js here
import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import { browserHistory, Router, Route } from 'react-router'
var ReactDOM = require('react-dom');
// create classes
var NavBar = React.createClass({ render: function(){ return( <nav className="navbar navbar-inverse navbar-static-top"> <div className="container-fluid"> <div className="navbar-header"> <button type="button" className="navbar-toggle collapsed" aria-expanded="false"> <span className="sr-only">Toggle navigation</span> <span className="icon-bar"></span> <span className="icon-bar"></span> <span className="icon-bar"></span> </button> <NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} /> </div> <div className="collapse navbar-collapse"> <NavMenu links={this.props.links} /> </div> </div> </nav> ); }
});
var NavBrand = React.createClass({ render: function(){ return ( <Link to={ this.props.linkTo }> <span className="navbar-brand">{this.props.text}</span> </Link> ); }
});
var NavMenu = React.createClass({ render: function(){ var links = this.props.links.map(function(link){ if(link.dropdown) { return ( <NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} /> ); } else { return ( <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /> ); } }); return ( <ul className="nav navbar-nav"> {links} </ul> ); }
});
var NavLinkDropdown = React.createClass({ render: function(){ var active = false; var links = this.props.links.map(function(link){ if(link.active){ active = true; } return ( <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /> ); }); return ( <ul className="nav navbar-nav navbar-right"> <li className={"dropdown" + (active ? "active" : "")}> <a href="#" className="dropdown-toggle" aria-haspopup="true" aria-expanded="false"> {this.props.text} <span className="caret"></span> </a> <ul className="dropdown-menu"> {links} </ul> </li> </ul> ); }
});
var NavLink = React.createClass({ render: function(){ return( <li className={(this.props.active ? "active" : "")}> {/*<a href={this.props.linkTo}>{this.props.text}</a>*/} <Link to={ this.props.linkTo }> <span className="NavLink">{this.props.text}</span> </Link> </li> ); }
});
module.exports = NavBar;Presently, my navbar looks like the following,
12 Answers
The best and easiest approach which works is to add following class to the NAV node like following:
<Nav className="ml-auto">Unfortunately adding "pullRight" wasn't the solution and it won't work.
3The other way you could do it is:
<Nav className="ms-auto">
Unfortunately adding "pullRight" wasn't the solution and it won't work.
This one works for me
<Navbar> <Navbar.Brand href="/">MyBrand</Navbar.Brand> <Navbar.Toggle /> <Navbar.Collapse> <Nav className="justify-content-end" style={{ width: "100%" }}> ... </Nav> </Navbar.Collapse>
</Navbar>If you want to make your navigation look something like as shown in below screen shot:
Then you would need to apply the class container-fluid on Nav and class ml-auto on the Nav.Item on the navigation item which you wish to right align.
Below is the code:
<Navbar bg="dark" variant="dark"> <Nav className="container-fluid"> <Nav.Item> <Navbar.Brand as={Link} to="/">Demo App</Navbar.Brand> </Nav.Item> <Nav.Item> <Nav.Link as={Link} to="/user-list">User List</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link onClick={handleClickUserLogOut}>Log Out</Nav.Link> </Nav.Item> <Nav.Item className="ml-auto"> <Nav.Link>Hi fname lname!</Nav.Link> </Nav.Item> </Nav>
</Navbar>For those with version 5 of bootstrap, we have to use ms-auto instead of ml-auto because there has been migration and changes in the class name.
.ml-* and .mr-* to .ms-* and .me-*
In Bootstrap 5 you can use use ms-auto instead of ml-auto or mr-auto
use the class navbar-right the reach what you want
This is working for me on version - 'v2.0.0-rc.0 (Bootstrap 5.1)'
<Nav className='ms-auto'>complete,
<Navbar.Collapse id='basic-navbar-nav'> <Nav className='ms-auto'> <Nav.Link href='/cart'>Cart</Nav.Link> <Nav.Link href='/login'>Sign In</Nav.Link> </Nav>
</Navbar.Collapse>The below code solved my issue of alignment.
var NavMenu = React.createClass({ render: function(){ var links = this.props.links.reduce(function(acc, current){ current.dropdown ? acc.rightNav.push(current) : acc.leftNav.push(current); return acc; }, { leftNav: [], rightNav: [] }); return ( <div> <ul className="nav navbar-nav"> {links.leftNav.map( function(link) { return <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /> })} </ul> { links.rightNav.length > 0 ? <ul className="nav navbar-nav navbar-right"> { links.rightNav.map( function(link) { return <NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} /> }) } </ul> : false } </div> ); }
});Give css property float : left to the division or to whatever you want to align right :)
You can target the dropdown menu with a dropdown-menu-right to align the Contribute nav item right. bootstrap dropdown alignment docs
So far, I've discovered an easier way to do it from their official documentation, though it may be a little unconventional.
Here's the code
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Container> <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse>
{/*This totally empty navbar with the class 'me-auto' is significant. */} <Nav className="me-auto"> </Nav>
{/*It is responsible for the other nav bar content moving to the right.*/} <Nav> <Nav.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Container>
</Navbar>The simple hack is to add an empty nav bar before your own nav bar content with the class me-auto, as shown below.
{/*This is the hack */} <Nav className="me-auto"> </Nav>
{/*Any nav bar created beneath this now aligns to the right.*/}You can ask questions if you don't quite understand.
