We Keep Coding

How to add circular profile picture to react bootstrap nav bar

I'm trying to add a circular profile picture to my react-bootstrap nav bar.
Similar to this:
But I'm not sure where to add the div for the circular image.
Here is my navbar code:
import { Link } from "react-router-dom";
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Navbar, Nav, Container } from 'react-bootstrap';
const NavBar = (props) => {
const user = 'Petrina.C'
return (
<>
<Navbar expand="lg">
<Container style={{maxWidth:'100%'}}>
<Navbar.Brand href="#home">Voter Outreach</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto" id="navLinks">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/voters">Voters</Nav.Link>
<NavDropdown title={`${user}`} id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
{props.children}
</>
);
}
export default NavBar;
Any help is appreciated!

You can put image and use class rounded-circle to make it like this:
<img src="..." class="rounded-circle" alt="...">

There are several properties available in React-Bootstrap docs.
You can simply pass the props as true if you want a property to be applied.
Example:
import Image from 'react-bootstrap/Image'
<Image src="..." roundedCircle={true}>
Or you can always use the CSS properties
import Image from 'react-bootstrap/Image'
<Image src="..." style={{ borderRadius: "50%", height: "100px", width: "100px" }} />

React Bootstrap Navbar contents not filling the width of the screen

Total web dev noob here. Just integrated Bootstrap for the first time, and I'm using a set of Navbars gotten off this link : https://react-bootstrap.github.io/components/navbar/
I've noticed that, while the style is correct and everything looks normal, the text content of the Navbar is not filling the entire width of the Bar. picture shown below
[![enter image description here][1]][1]
Navbar File code extract
class Navsucks extends Component {
// componentDidMount() {
// }
render() {
return (
<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 id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
}
App.js code extract
class App extends Component {
state = { posty: []}
componentDidMount() {
}
render() {
return (
<div className="App">
<Navsucks> </Navsucks>
<header className="App-header">
<Texts> asdasd </Texts>
</header>
</div>
);
}
}
export default App;
I really just want the left and right halves of the text to be hugging the screen edges. Is this possible? Any help is much appreciated!
Thanks!

How to check if React Bootstrap Navbar has collapsed?

I want to change the content of the collapsed Navbar but can't find any props or events for it.
Here is my Navbar with Dropdown in non collapsed state.
And collapsed Navbar. Need to change Dropdown for something else.
Sample code
<Navbar expand="sm" bg="primary" variant="dark" fixed="top">
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
<NavDropdown>
<NavDropdown.Item>Profile</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item>Log out</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
How to do it in a proper way?
Thanks in advance!

I was able to do this by binding to the onToggle function of the Navbar and using it to set a boolean.
const Header = () => {
const [expanded, setExpanded] = useState(false)
const setToggle = () => {
console.log('toggle');
setExpanded(true)
}
return (
<Navbar expand="sm" onToggle={setToggle}>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
{expanded && <NavDropdown>
<NavDropdown.Item>Profile</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item>Log out</NavDropdown.Item>
</NavDropdown>}
</Nav>
</Navbar.Collapse>
</Navbar>
)
}

pure javascript way to bootstrap navbar dropdown

So I am trying to make the dropdown in the below code work with javascript as I noticed that the CSS code will only trigger the dropdown after a user first clicks on the dropdown. after that, it will let the css hover code work as per normal.
So needing a Javascript way to get this drop down to work.
import React, { useState } from "react";
import {Nav, Navbar, NavDropdown, ButtonToolbar, Button } from "react-bootstrap";
import { withRouter } from "react-router";
import '../App.css';
const Header = props => {
const { location } = props;
function changeBackground(e) {
e.target.children('[data-toggle="dropdown"]').click();
}
return (
<Navbar bg="transparent" variant="dark" expand="lg">
<Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto" activeKey={location.pathname}>
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/advertisers">Advertisers</Nav.Link>
<NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
onMouseOver={changeBackground}>
<NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="/case-studies">Case Studies</Nav.Link>
<ButtonToolbar>
<Button href="/contact" variant="success" size="lg" className="button-round">
Contact Us
</Button>
</ButtonToolbar>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
const HeaderWithRouter = withRouter(Header);
export default HeaderWithRouter;

Opening the dropdown menu by hovering is not supported in React Bootstrap (here is an explanation: https://github.com/react-bootstrap/react-bootstrap/issues/4042).
If you'd like to achieve that you have to use the classic dropdown menu (implemented using NavItem so it works the same as the usual NavDropdown). You should be able to use the show property of Dropdown.Menu - but that doesn't seem to work perfectly either so I had to improvise a bit (hiding/removing the dropdown.menu based on state).
Here is a working example using Dropdown.Menu instead of NavDropdown (but with the same properties): https://codesandbox.io/s/falling-cookies-10joi
The main code difference is, as I explained above, using the Dropdown component instead of NavDropdown to be able to use the show property:
<Dropdown as={NavItem} alignRight onMouseLeave={closeMenu}>
<Dropdown.Toggle
id="basic-nav-dropdown"
as={NavLink}
onMouseEnter={openMenu}
>
Publishers
</Dropdown.Toggle>
{menuOpen && (
<Dropdown.Menu show={true}>
<NavDropdown.Item href="/publishers/radio">
Radio Stations
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">
Audio Podcasters
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">
Video Podcasters
</NavDropdown.Item>
</Dropdown.Menu>
)}
</Dropdown>

We need to change our changeBackground function like this, to auto click the dropdown button on onMouseOver event:
changeBackground = (e) => {
e.target.click();
};
This will click the dropdown button and open the dropdown menu.
Please let me know if you need further information.

ReactJS Bootstrap Navbar and Routing not working together

I am trying to create a simple Webapp using ReactJS, and I wanted to use the Navbar provided by React-Bootstrap.
I created a Navigation.js file containing a class Navigation to separate the Navbar and the Routing from the App.js file. However, both parts do not seem to work. When I load the page, it is just empty, there is no Navbar. Can anyone spot a mistake?
Navigation.js:
import React, { Component } from 'react';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
import { Switch, Route } from 'react-router-dom';
import { Home } from './Page';
class Navigation extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link href="/">Home</Nav.Link>
</NavItem>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
</div>
);
}
}
export default Navigation;
App.js:
import React, { Component } from 'react';
import Navigation from './components/routing/Navigation';
class App extends Component {
render() {
return (
<div id="App">
<Navigation />
</div>
);
}
}
export default App;
I tried using a NavItem containing a LinkContainer from react-router-bootstrap already, which led to the same result.
Just for completeness, Page.js:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
export const Page = ({ title }) => (
<div className="App">
<div className="App-header">
<h2>{title}</h2>
</div>
<p className="App-intro">
This is the {title} page.
</p>
<p>
<Link to="/">Home</Link>
</p>
<p>
<Link to="/about">About</Link>
</p>
<p>
<Link to="/settings">Settings</Link>
</p>
</div>
);
export const About = (props) => (
<Page title="About"/>
);
export const Settings = (props) => (
<Page title="Settings"/>
);
export const Home = (props) => (
<Page title="Home"/>
);

First of all, in your snippets it doesn't seem like you're wrapping your code in a Router, so you should make sure that you're doing that inside App or in ReactDOM.render:
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
rootElement
);
Next, your specific problem is that you're rendering react-bootstrap's Nav.Link instead of react-router's Link component, so the router is not picking up your route changes. Fortunately, react-bootstrap provides a render prop in most of its components to specify which component or element you want to render if you don't want the default. Switch to something like this:
import { Switch, Route, Link } from 'react-router-dom';
class Navigation extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link as={Link} to="/" >Home</Nav.Link>
</NavItem>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
</div>
);
}
}

For those who have a problem with styling Link component from react-router-dom in react-bootstrap navbar, simply add className="nav-link", like this:
<Link to="/" className="nav-link">Home</Link>
instead of
<Nav.Link href="/">Home</Nav.Link>

I hope I'm no late to help some other people trying to solve this.
You can use the NavLink, instead of as={Link}. It will render with the same behavior of Link, but will "watch" the router URL to define which link is indeed active:
<Nav defaultActiveKey="/bills" as="ul">
<Nav.Item as="li">
<Nav.Link as={NavLink} to="/bills">Dividas</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
<Nav.Link as={NavLink} to="/other">Em construção</Nav.Link>
</Nav.Item>
</Nav>

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
and Navbar.js:
import React from 'react';
import {Container,Navbar,Nav,NavItem } from 'react-bootstrap';
import {Link} from 'react-router-dom';
<Nav className="ml-auto">
<NavItem> <Link className="nav-link" to="/">Home</Link> </NavItem>
<NavItem> <Link className="nav-link" to="/about">About</Link> </NavItem>
<NavItem> <Link className="nav-link" to="/contact">Contact</Link> </NavItem>
</Nav>
This resolved the: <Link> outside a <Router> error for me.

Having found myself with a project of non-trivial size, and one that already had jQuery as a dependency I was able to gracefully solve the react-router / react-bootstrap mismatch with an event listener on the document.
This has one advantage over other solutions in that it requires no changes to the current markup. However, one may need to write some additional logic guarding the history.push call depending on needs. One may also need to expand this to guard for the target attribute, e.g. target="_blank".
If jQuery is not desired, one may be able to write a vanilla JS implementation with document.addEventListener without much additional effort.
// react-router#5
// usage of history may vary depending on version
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
// IIFE scoping jQuery for us
(($) => {
// Wait for document ready
$(() => {
$(document).on('click', '[href]', (event) => {
// Only target links targeting our application's origin
if (event.currentTarget.href.indexOf(window.location.origin) === 0) {
// Prevent standard browser navigation
event.preventDefault();
const path = event.currentTarget.href.slice(window.location.origin.length);
history.push(path);
}
});
});
})(jQuery);
const Routing = (props) => (
<Router history={ history }>
...
</Router>
);

Currently, with react v18 and react-router v6.4, the approach is working for me is a bit different.
To make the links properly work with react-route use as={Link} in the Nav.Link item.
And to make the tabs highlight you need to use eventKey as described in the documentation: EventKey is used to determine and control the active state of the parent Nav
Here is an example.
Notice that the changes also affect the Navbar.Brand component.
import { Link, useLocation } from 'react-router-dom';
const AppNavbar = () => {
const location = useLocation();
const activeKey = location.pathname === '/' ? '/projects' : location.pathname;
return (
<Navbar expand="lg" className="theme-navbar">
<Container>
<Navbar.Brand as={Link} to="/">
My Projects
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav activeKey={activeKey} className="me-auto">
<Nav.Link as={Link} eventKey="/projects" to="/projects">
Projects
</Nav.Link>
<Nav.Link as={Link} eventKey="/work" to="/work">
Ongoing Tasks
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};

i think you forgot to include bootstrap css, refer to the stylesheets section of the following doc
https://react-bootstrap.github.io/getting-started/introduction/
or just add the following to ur index.html
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>