Navbar doesnt change a background color, i tried to do bg/variant = dark/black , it doesnt change anything
import React, { Component } from 'react';
import {Navbar,Container,Nav} from 'react-bootstrap';
export default class Header extends Component{
render() {
return(
< Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" >
<Container>
<Navbar.Brand href="/">My landing Page</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/aboutMe" > About me</Nav.Link>
<Nav.Link href="/aboutUnivercity"> My Univercity</Nav.Link>
<Nav.Link href="/video"> My videos</Nav.Link>
<Nav.Link href="/myMotivate"> MyMotivate</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
}
Source if needed:
https://github.com/aokhar/SumPract
You have to add bootstrap in your react app.
In your terminal using yarn type:
yarn add bootstrap
Then at the top of your js file add:
import "bootstrap/dist/css/bootstrap.css";
After this hopefully all the colors will render.
Related
I could not find a quick solution to implement nice hamburgers from https://jonsuh.com/hamburgers/ to react-bootstrap.
It does not work with (because it is button inside the button).
<Navbar.Toggle>
<Hamburger />
</Navbar.Toggle>
I found another hamburger solution for react-bootstrap.
import { useState } from 'react'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import Hamburger from 'hamburger-react'
function NavigationHead() {
const [isOpen, setOpen] = useState(false)
return (
<Navbar collapseOnSelect expand="md" bg="light">
<Container>
<Navbar.Brand href="/">Navbar</Navbar.Brand>
<Navbar.Toggle>
<Hamburger toggled={isOpen} toggle={setOpen} />
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="/#/catalog">Catalog</Nav.Link>
<Nav.Link href="/#/favourites">Favourites</Nav.Link>
</Nav>
<Nav>
<Nav.Link href="/#/tasks">My tasks</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
export default NavigationHead
Hi guys so I'm trying to make header for my web page application using React Bootstrap, but I can't separate the logo with the Nav.link (all of them placed on the left side), but I want the Logo to be on the left side meanwhile the other Nav.link on the right side. In normal bootstrap we just have to add justify-content-end on the list but for React Bootstrap it didn't work, can anyone help me with this please ?
Here's my code:
import '../styles/Header.css'
import { Navbar, Nav } from "react-bootstrap"
import { Link } from 'react-router-dom'
function header() {
return (
<Navbar className="color-nav" variant="dark" expand="lg">
<Navbar.Brand as={Link} to={"/"}>Logo will be Here</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end">
<Nav.Link as={Link} to={"/facilities"}>Facilities</Nav.Link>
<Nav.Link as={Link} to={"/room"}>Room</Nav.Link>
<Nav.Link as={Link} to={"/contactus"}>Contact Us</Nav.Link>
<Nav.Link as={Link} to={"/bookingroom"}>Book now</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default header
You forget to add display flex , so without it is not a flexbox . add d-flex , hope will work.
How to add <Navbar.Brand href="#home"> logo at center using react-bootstrap. Please find the below code I wrote.
Please help with this.
import React from 'react'
// import styles from './header.module.css'
// import { HomenetLink } from '../theme/components/Hyperlink'
import { Navbar, Nav } from 'react-bootstrap'
import Navheader from './NavHeader'
import { useTranslation } from 'react-i18next'
const Header = () => {
const { t } = useTranslation()
return (
<div>
<Navbar expand="lg">
<Navheader/>
<Navbar.Brand href="#home"><img
id="homenetlogo"
src="../.././images/homemain.png"
alt="HomeNet"
width="165px"
height="30px;"
/></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="javascript:void(0);" className="coverage-activate" data-activates="coverage">{t('header.coverage')}</Nav.Link>
<Nav.Link href="http://homenet_local/kundeservice" data-collapsible="coverage" >{t('header.customerService')}</Nav.Link>
<Nav.Link href="/minside/" data-collapsible="coverage" >{t('header.myPage')}</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
export default Header
Hi please add a class as below and add css
.brand-center {justify-content: "center"}
<Navbar.Brand href="#home" className="brand-center"><img
id="homenetlogo"
src="../.././images/homemain.png"
alt="HomeNet"
width="165px"
height="30px;"
/></Navbar.Brand>
i have simple react with redux app which uses bootstrap for only navbar but remaining website uses material-ui . i have to depend on bootstrap for only navbar because i could not find responsive navbar in material-ui documentation or any other resourse .so i used bootstrap cdn and used given below component which works fine .but its font size is small and text color is not so highlighted. more over background color for dropdown is also not so nice.
Moreover, i did not used style.css for styling because material-ui theme does not work together rather cssbaseline is used in material-ui. therefore i need material-ui working navbar component with dropdown and responsive toggle button .
so i want material-ui navbar with similar functionality .however ,if anyone can change this component in bootstrap with inline styling to make it fancy, it will be grateful.
here is MyNavbar.js component:
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
} from "react-router-dom";
import { Navbar,Nav,NavDropdown,Form,FormControl,Button } from 'react-bootstrap'
import NeedForm from '../NeedForm';
import NewTutorForm from '../NewTutorForm';
class MyNavbar extends React.Component{
render(){
return(
<div>
<div className="row">
<div className="col-md-12">
<Navbar bg="primary" variant="dark" expand="lg">
<Navbar.Brand href="/">smart college</Navbar.Brand>
<img
src="src\assets\images\logo.svg"
width="30"
height="30"
className="d-inline-block align-top"
alt=" "></img>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/NeedForm">Hire a Tutor</Nav.Link>
<Nav.Link href="/NewTutorForm">Become Tutor</Nav.Link>
<NavDropdown bg="primary" title="Student Corner" id="basic-nav-dropdown">
<NavDropdown.Item href="courses"> courses</NavDropdown.Item>
<NavDropdown.Item href="Tutors">Tutors</NavDropdown.Item>
<NavDropdown.Item href="NeedForm">Hire a Tutor</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="LMS">My LMS</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Teacher's Corner" id="basic-nav-dropdown">
<NavDropdown.Item href="Needs">students Requests</NavDropdown.Item>
<NavDropdown.Item href="TutorDashBoard">Tutor DashBoard</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</div>
</div>
)
}
}
export default MyNavbar;
here is screenshot of navbar:
You can use the App bar and Select Components to achieve your requirements.
Check the docs here:
https://material-ui.com/components/app-bar/#app-bar
https://material-ui.com/components/selects/#select
When I use NPM Start it opens up a webpage in Chrome but after a while, it says
"Aw, Snap! Something went wrong while displaying this webpage."
GitHub Repository for the code. I can't give a small piece fo code because I don't know what is giving the error.
I would like it to run and show my webpages. Not sure why it isn't working. The first time I started the server using NPM start it gave me this page.
The issue is with the Navbar.js
The issue is your class name here was Nav but Nav was also used in the render function. I have renamed Nav to CustomNavbar and imported the bootstrap nav from the npm package.
change your code to this
import React from 'react';
import { Link } from 'react-router-dom';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { Button, FormControl, Form, NavDropdown } from "react-bootstrap";
export default class CustomNavbar extends React.Component {
render() {
return (
<div>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Pawsitively Delicious</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="AboutUs.js">About Us</Nav.Link>
<NavDropdown title="Ingredients" id="basic-nav-dropdown">
<NavDropdown.Item href="./TypesOfDogTreats">Types of Dog Treats</NavDropdown.Item>
<NavDropdown.Item href="AllIngredients.js">Ingredients</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
);
} // END OF RENDER
} // END OF Navbar
I was having this issue, for me the problem was caused by adding a button component so i deleted a part of my codes
const checkButtonStyle = STYLES.includes(buttonStyle)?buttonStyle:STYLES[0]
const checkButtonSize = SIZE.includes(buttonSize) ? buttonSize: SIZE[0]
try this link for more options on how to solve it
1: