I have created a react project using following command:
npx create-react-app project
I have installed bootstrap 4.3.1 using npm command and I have also imported bootstrap into the index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
But for some reason it is not displaying icons.
export class Navbar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-light bg-dark mb-5">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand text-white text-lg brand-text" to="/">
MovieSeriesInfo</a>
</div>
<ul className="navbar-nav ml-auto text-light d-inline-block">
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-imdb fa-5x" id="imdb-logo" />
</li>
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-react fa-5x" id="react-logo" />
</li>
</ul>
</div>
</nav>
</div>
)
}
}
export default Navbar;
First, you should install "bootstrap-icons" npm package:
npm install bootstrap-icons
Then, import "bootstrap-icons.css" in your index.js file:
import "bootstrap-icons/font/bootstrap-icons.css";
You need to install font-awesome and import the same,
npm install font-awesome --save
import in index.js file
import 'font-awesome/css/font-awesome.min.css';
For more on how to use font-awesome icons see this.
As far as I know Bootstrap 4.* doesn't support Glyphicon natively, so you should use an alternative, or downgrade to bootstrap 3.* which is not recommended. Fontawesome.com is an option.
I know this question has an accepted answer, but it's for others who did the same mistake as I did. Add this <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css" rel="stylesheet"> tag in index.html, it has the web fonts cdn link. It's given in bootstrap's usage to add this link for icon fonts. Don' just install and the <i> tag. I found it here
Related
I create a next js app with npx create-next-app. But When I am trying to building with running npm-run-build. It gives the error. Here next version is 12.1.0 and react version is 18. But When I use same code in next old version like 12.0.10 something like that. Then it gives no error. I thing this is the changes of next js newer version. But What I have do?
The errors like something it-
Here is index.js code-
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Next.js!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
This code is exactly template code when next app is created. I do nothing change here.
It looks like this is a bug within eslint, other users solved it by downgrading to a previous version (eslint-plugin-react from 7.29.0 to 7.28.0). github.com/yannickcr/eslint-plugin-react/issues/3215 - or you can just change the config to ignore ESLint on build in your nextjs app - nextjs.org/docs/api-reference/next.config.js/ignoring-eslint
I'm new to React and Bootstrap. I'm using Bootstrap 5.1.
I'm trying to create a Navbar with my logo in it. No matter what I try, I can't get the image to display. Here is my Navbar.js
import React from 'react';
function Navbar() {
return (
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="House" src="/img/logo.svg" width="30" height="30"/>
</a>
</div>
</div>
</nav>
)
}
export default Navbar
The path to the logo is here, '/react-app/src/img/logo.svg' and I've tried pathing it multiple different ways without success.
And here is what I see.
What am I missing?
You need to use import to load the path like this:
import houseImgPath from './img/logo2.png' // replace with your own path
and then use it in your img src
<img alt="House" src={houseImgPath} width="30" height="30"/>
You should keep your image somewhere inside the src as you are doing (contrary to other suggestions) and import it like a module. The only time you might use the public folder is (maybe) if you wanted to preload the image or use the image as an icon for the app.
import React from 'react';
import img from './img/image.jpg' // or '../path/relative/to/component/image.jpg'
function Navbar() {
return (
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="House" src={img} width="30" height="30"/>
</a>
</div>
</div>
</nav>
)
}
export default Navbar
You need to import the image for example:
import imageName from './img/logo2.png';
<img alt="House" src={imageName} width="30" height="30"/>
you need to put images in public folder in order to get this path img/logo2.png try it please and let me know
I have tried below code,
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
<i className="fa fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>
it shows icon fa-edit properly,
but when i try to use,
<i className="far fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>
it doesnt work,
as per website it is,
Try this:
<i className={`far fa-edit`} style={{fontSize:28,color:"#FC46AA"}}></i>
It is probably due to missing spaces between CSS classes (using string templates)
I'm new in React, and I use react-router and bootstrap version 3.4 examples section.
First example - when I run my project doesn't show my project. I will show the codes:
import React from "react"
class Header extends React.Component{
render(){
return(
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default Header
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.
this may help
Both and components can be used to define and design declarative navigation around an application. Within either component, we can use the “to” attribute to specify the location pathname to which the link will direct.
import { NavLink } from "react-router-dom";
<NavLink to="/" className="<any classes like>float-left">Home</NavLink>
<NavLink to="/about" className="<any classes like>float-left">About</NavLink>
here is a great example
https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900
I created a simple navigation menu with Bootstrap. It's working fine in pure javascript, but when adapting it into react, the hamburger icon doesn't function (nothing happens on click). I installed bootstrap with
npm install --save bootstrap
And then added the bootstrap css to index.html in the public folder:
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
My jsx is as follows:
<nav className="navbar navbar-expand-sm navbar-dark bg-dark">
<div className="container">
<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 ml-auto">
<li className="nav-item">
<Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
</li>
<li className="nav-item">
<Link to="/app/about" className="nav-link">ABOUT</Link>
</li>
<li className="nav-item">
<Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
</li>
<li className="nav-item">
<Link to="#share-head-section" className="nav-link">CONTACT</Link>
</li>
</ul>
</div>
</div>
</nav>
Again, everything looks fine except that the hamburger icon is not functioning.
The bootstrap show class is used to display the collapsible menu items. So, the task is to simply add the show class conditionally on click of the hamburger icon.
Just follow these simple steps to achieve this functionality.
Add a showCollapsedMenu(the name is up to you) property with initial value of false in your state like this:
state={
showCollapsedMenu: false
}
Then declare a function like this which when called will reverse the current state:
toggleMenu = () => {
this.setState({
showCollapsedMenu: !this.state.showCollapsedMenu
})
}
The above function will be called whenever the hamburger icon is clicked. So implement the onCLick method on the hamburger icon like this:
<button
className="navbar-toggler"
type="button"
onClick={this.toggleMenu} // <=
data-toggle="collapse"
data-target="#navbarNav">
<span className="navbar-toggler-icon"></span>
</button>
Now create a const show which will conditionally add the show class depending on the state of showCollapsedMenu:
const show = (this.state.showCollapsedMenu) ? "show" : "" ;
Now finally add this show to the div with collapse navbar class like this:
<div className={"collapse navbar-collapse " + show} id="navbarNav">
Note: Mixing jQuery with React is not recommended as they both manipulate the DOM differently. While it may seem an easy solution, it might result in bigger problems.
Bootstrap events require jQuery, Popper and Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap, which implements Bootstrap components in React.
According to https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery to your dependencies.