I'm using react-bootstrap for styling my website. I want to add Navbar where all of the elements are mirrored to the right.
export default class XNavbar extends React.Component {
render() {
return (
<Navbar inverse fluid >
<Navbar.Header>
<Navbar.Brand>
Brand
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Hello</NavItem>
<NavItem eventKey={2} href="#">World</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)}
}
The result is
But what I actually want it to be
[ World Hello Brand ]
I tried using pullRight on the <Navbar but it didn't work. I also added <html dir="rtl">, but this also didn't help. How can I do it?
For those of you, like me, can't get pullRight work, it seems that adding the ml-auto works better.
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="#one">One</Nav.Link>
<Nav.Link href="#two">Two</Nav.Link>
</Nav>
</Navbar.Collapse>
Found the solution here: https://stackoverflow.com/a/54684784/95552
In case you haven't already figured this out, or someone else stumbles on it. All you should have to do is add the pullRight prop to the actual Nav component. The result should be a Brand Logo in the left, and the navigation pulled to the right.
return (
<Navbar inverse fluid >
<Navbar.Header>
<Navbar.Brand>
Brand
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">Hello</NavItem>
<NavItem eventKey={2} href="#">World</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)}
Actually, according to the documentation of Bootstrap React pullRight should do it. But I wasn't able to realize it either. I found a working solution which I described here. Just use <Nav className="ml-auto">
You can put your elements inside a div and than float div to right by this css property
.exampleDiv {
float: right;
}
Related
I am following the documentation in order to show a NavItem only for screen widths larger than sm.
According to the documentation, I have to use this attribute:
I tried it here:
<NavItem className=".d-none .d-sm-block .d-md-none">
<NavLink
data-placement="bottom"
target="_blank"
title="Profile"
onClick={() => {
props.history.push("/profile-page");
}}
>
<i className="fa fa-bell " />
<p className="d-lg-none">Notifications</p>
</NavLink>
</NavItem>
But, this seems to have no effect. The navBar item (Notification Bell Icon) still gets displayed for widths larger than sm:
Any idea what I am doing wrong?
You should use class names without dot <NavItem className="d-none d-sm-block d-md-none">
My Navigation code as:-
const Navigation = (props) => {
console.log(props);
return (
<Navbar bg="primary" variant="dark">
<Navbar.Brand href="/">Dating Service</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/CreateProfile">Create Profile</Nav.Link>
<Nav.Link href="/ViewProfile">View Profile</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default withRouter(Navigation);
It looks like this:-
The whole page is aligned center. How can make it left aligned?
I could fix it by this:-
npm install bootstrap
Later add import 'bootstrap/dist/css/bootstrap.min.css';
Also, it is possible that we can include bootstrap.min.css cdn directly at public/index.html without installing bootstrap.
I'm having trouble with a project where I need to navigate to a certain section of a page when a navigation item is clicked.
I am using the Navlink component as follows and can't put my hand on a solution.
In my navigation component Toolbar.js, I have the following code concerning the navigation item.
Toolbar.js
<li>
<NavLink
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to="/"
>
agence
</NavLink>
</li>
Then I'm using the component as follows in Home.js :
Home.js
return (
<Layout>
<Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
<SideDrawer show={this.state.sideDrawerOpen} />
{backDrop}
<Conseil />
<div className={classes.white}></div>
<Sigles />
<NotreAgence />
<Prestations />
<ScrollableMenu />
<Form />
<Footer />
</Layout>
);
}
What I'm trying to do is navigate to the "NotreAgence" component when I click on the "accueil" NavLink showed above.
I've tried to mimic the html :
Go to Title
<div>
<h1 id="scroll">Title</h1>
</div>
as follows :
<NavLink
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to={{
pathname: '/',
hash: '#our-agency'
}}
>
agence
</NavLink>
and giving a div tag the "#our-agency" tag.
But it doesn't seem to work.
I'm a bit stuck. Any help ?
Thank you very much :)
to={{
pathname: '/',
hash: '#our-agency'
}}
when you have / in link - it force to update page.
So if you want to reach section on current page you need use just
to="#our-agency"
Quick update to close this issue. One solution would be to use the react-scroll library.
In the Navigation menu/bar :
import it => import { Link } from 'react-scroll'
Define your navigation item as follows (using the code of the question to make it more clear) :
Toolbar.js
import { Link } from 'react-router'
(...)
<li>
<Link
exact
activeStyle={{
fontWeight: 'bold',
color: 'red',
textDecoration: 'none'
}}
to="notreAgence"
>
agence
</Link>
</li>
Give your component an id prop with a value matching the to props from the Link. (Here it would be 'section1'.
Home.js
return (
<Layout>
...
<NotreAgence id='notreAgence' />
...
</Layout>
);
}
This do the the trick.
For more information : https://scotch.io/tutorials/implementing-smooth-scrolling-in-react
I have a react navbar on my site and I would like to redirect my page to an .html page, but it's not working properly.
this is the component I am using, with the href reference to the QR CODE page, at the same level that the component page is using.
project link: https://github.com/rudsonramon/customerservice.git
import React from 'react';
import { FaHome } from 'react-icons/fa';
import FormControl from 'react-bootstrap/FormControl';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';;
function HeaderContainer() {
return (
<div>
<Container>
<Navbar fixed="top" bg="primary" variant="dark">
<Navbar.Brand href="#home">ConcertTI</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home"> <FaHome /> </Nav.Link>
<Nav.Link href="QrCode.html" target='_self'>QR Code</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-light">Procurar</Button>
</Form>
</Navbar>
</Container>
</div>
)
}
export default HeaderContainer;
./Qrcode.html directs it to a sub folder named Qrcode.html.
remove the ./ and try again.
While following a tutorial video, I encountered an issue with the rows and columns classes in bootstrap.
The instructor in the video made a div with a row class and al the items seemed to work perfectly. When trying to duplicate the same things, all my items just stack on top of each other in a single column rather than multiple. Even when the browser is at full screen.
Here is the link to the video (https://www.youtube.com/watch?v=-edmQKcOW8s&t=19375s) # 1:51:52 is where the problem occurs
Any help would be greatly appreciated
export default class ProductList extends Component {
render() {
return (
<React.Fragment>
<div className="py-5">
<div className="container">
<Title name="our" title="products" />
<div classname="row">
<ProductConsumer>
{value => {
return value.products.map(product => {
return <Product key={product.id} product=
{product} />
})
}}
</ProductConsumer>
</div>
</div>
</div>
</React.Fragment>
)
}
}
Expected result would be that on a full screen browser items would be listed in 4 columns.
<div classname="row">
You have a typo here. It should be className.
Secondly, there is no col class in your code. Try adding this:
return(
<div className="col-3">
<Product key={product.id} product={product} />
</div>
)