I'm making a react project, where I need to put a navbar, I installed bootstrap with
npm install bootstrap
and I imported it in my index.js like this :
import 'bootstrap/dist/css/bootstrap.css';
I put the bootstrap's documentation navbar exemple in my component, but the button doesn't show the links.
Here's my code :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I tried to add :
import 'bootstrap/dist/js/bootstrap.js';
in my index.js file but, it didn't work
Do you have any idea, to solve this ?
First install bootstrap npm install bootstrap and than install jquery and popper.js to, npm install jquery popper.js.
Add all to index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import $ from 'jquery';
import Popper from 'popper.js';
Related
I am trying to use the Header component of material design bootstrap in my React Application. And I pasted the below line of code from official website of Material design bootstrap to implement Header collapsible when screen size is small but it. Anyone have any idea what else need to do in order to make it work in react. I just paste it inside my react component. There is some kind of state I need to maintain here.
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-5 text-center bg-light">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
I make a react project with yarn. I install bootstrap with yarn add bootstrap. After that I import 'bootstrap/dist/css/bootstrap.min.css' and copy paste bootstrap navbar to my code. But when started the display looks messy.
The App.js code
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
);
}
export default App;
The result
Edit:
I was try with the react bootstrap instead of regular bootstrap but the result still same
My App.js
import logo from './logo.svg';
import './App.css';
import { Navbar,Nav,NavDropdown,Form,FormControl,Button} from 'react-bootstrap'
function App() {
return (
<div>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" 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>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
);
}
export default App;
You should be using https://react-bootstrap.github.io/getting-started/introduction instead of plain bootstrap.
It has the functionality of the components along the styles.
Would save you a lot of headaches.
Updated, now the problem i'm seeing the navbar with format problems, shouldn't it be taking the CSS properties from bootstrap?
I Commited the project to make it easier: https://github.com/damianaguilarcogan/pfi_front_v4
Image: https://ibb.co/fdFTb4C
i just created a project but the navbar it's not loading, for sure it's a silly mistake but i'm not beeing able to find it.
I created the project, imported bootstrap in the index.html trought css links.
I created the folder components and inside ir navbar.js.
Afterwards I selected a common template from bootstrap navbar and Finally y called it from my app.js.
I don't get to see whats wrong, it should have already worked with this steps.
app.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import navbar from './components/navbar';
function App() {
return (
<div className="App">
<navbar />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
navbar.js
import React from 'react';
class navbar extends React.Component {
render() {
return (
<nav className="navbar navbar-toggleable-md navbar-light bg-faded">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand" href="#">Navbar</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search"></input>
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
)
}
}
export default navbar;
[1]: https://i.stack.imgur.com/zk8Lf.png
React expects components to be named with an uppercase. Try renaming the navbar to Navbar.
class Navbar extends React.Component
<Navbar/>
Changing your navbar to Navbar works. In addition there is a bootstrap wrapper for React that can be useful if you are just starting now. https://react-bootstrap.github.io/
The NavLink of react router does not route to the appropriate page when the Navlink reside in the dropdown.
Below the Html struture tried to implement in React
<BrowserRouter>
<header className="menubar">
<nav className="navbar navbar-expand-sm">
<button className="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="menu">
<ul className="navbar-nav">
<li className="nav-item">
<div className="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="loanlink">
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className="dropdown-menu dropdown-menu-center" aria-labelledby="loanlink">
<div className="menuPointer"></div>
<NavLink className="dropdown-item" to="/loan">
<div className="menuContent">
<span className="menuTitle">Manage Loan</span>
</div>
</NavLink>
</div>
</div>
</li>
<li className="nav-item">
<NavLink className="nav-link dropdown-toggle" to="/revenue" >
<span className="menuTitle">Revenue</span>
</NavLink>
</li>
</ul>
</div>
</nav>
</header>
</BrowserRouter>
In the above code, the "revenue" link which is not dropdown-menu is working fine, but the links which are inside dropdown-menu is not working.
I think the dropdown toggle event prevents the react router navigation.
Am using React router and Bootstrap 4 (not reactstrap)
This is a late answer, but the problem is that Bootstrap's data-toggle for the Dropdown is preventing the route from working.
You can solve it by toggling the Dropdown using React state, instead of using the data-toggle behavior in Bootstrap.
<li className="nav-item">
<div className="dropdown" display="static" onClick={this.handleClick}>
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className={this.state.showDD?'dropdown-menu show':'dropdown-menu'}>
<NavLink className="dropdown-item" to="/loan">
<span>Manage Loan</span>
</NavLink>
</div>
</div>
</li>
https://codeply.com/p/auvCgEmeiD
I´m trying to build a Boostrap 4 NavBar that will use ReactJS <Link> component from react-router instead of the original <li> class.
Currently I´m having troubles building the component correctly, as at the end the ReactJS component has not the expected behaviour.
Let´s start from the original Boostrap 4 NavBar example:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
This is being migrated to a ReactJS component as the following:
import React from 'react';
import Link from 'react-router-dom/Link';
function Menu() {
return (
<div>
<nav className="navbar navbar-toggleable-md navbar-light bg-faded">
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<a className="navbar-brand" href="#">Navbar</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<span className="nav-item active">
<Link className="nav-link" to="/">Home <span className="sr-only">(current)</span></Link>
</span>
<span className="nav-item">
<Link className="nav-link" to="/counter">Counter</Link>
</span>
<span className="nav-item">
<Link className="nav-link disabled" to="/about">About</Link>
</span>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search" />
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
);
}
export default Menu;
Altough it runs, many of the formatting is lost and some features like "nav-link disabled" are not working (you can click on About and it goes to the desired page).
I´m sure I´m doing the conversion wrong, so help is appreciated here to fix the component code so that to reflect correctly the original behaviour without React.
Maybe you got it resolved. Here's a working example with Bootstrap 4:
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
const AppPage = () => <h1>React Router 4 & Bootstrap 4</h1>
const HomePage = () => <h1>Welcome Home !</h1>
const AboutPage = () => <h1>About Us</h1>
const OneMorePage = () => <h1>One More Page !</h1>
const PrimaryLayout = () => (
<div>
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<Link className="navbar-brand" to="/">App</Link>
<button type="button" className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav mr-auto">
<li className="nav-item"><Link className="nav-link" to="/home">Home</Link></li>
<li className="nav-item"><Link className="nav-link" to="/about">About</Link></li>
<li className="nav-item"><Link className="nav-link" to="/one">More</Link></li>
</ul>
</div>
</nav>
<div className="container-fluid">
<Switch>
<Route path="/" exact component={AppPage} />
<Route path="/home" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/one" component={OneMorePage} />
</Switch>
</div>
</div>
)
const App = () => (
<BrowserRouter>
<PrimaryLayout />
</BrowserRouter>
)
render(<App />, document.getElementById('root'))
For this particular use case, there's an easy solution.
Simply add this to your css:
.nav-link.disabled { pointer-events: none }.
That said, I'd strongly recommend to use a library of bootstrap-based react components on the long term. I personally like https://reactstrap.github.io/.
The problem is Bootstrap has a Javascript component as well which will not work in React as it clashes with React's Javascript. The CSS portion works which is what you are seeing.
You should use something like React-Bootstrap- https://react-bootstrap.github.io/. These are all the Bootstrap components written as React components so you can use them in the standard React manner by importing and using them in your JSX.