I am new to React but have used React Native pretty extensively.
Basically I'm struggling with something that I expect is pretty simple and common.
I want to use an NPM package bootstrap-grid-only-css (https://www.npmjs.com/package/bootstrap-grid-only-css).
I have installed it and its available in the node_modules folder. My issue is trying to import it into the app.js file.
I have tried
import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"
and
import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"
Have also tried
const bs = require('bootstrap-grid.min.css');
none of which seem to work. all error.
Can anyone advise the correct method of import please?
Thanks very much.
If you are importing css file, then do not include file name after import
import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css
Just like:
import 'react-tabs/style/react-tabs.css';
Its quite simple to add bootstrap to your react application. you can follow below steps according to React Docs Adding Bootstrap
As first step you need to add bootstrap to your project via npm install.
npm install --save bootstrap
you can add bootstrap version behalf of bootstrap in above code.
Then go to src/index.js file and import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning adding below line in index.js
import 'bootstrap/dist/css/bootstrap.css';
Then delete all custom css write inside the scr/App.css
Then checkout adding bootstrap code inside the App.js file.It should be worked properly.
If you want go through this video How to import bootstrap in react application you will understand how does it easy.
Related
When I have an error on my code, I see the mimified version of the code in the devtool of the browser.When working with plain js, it was easy to link the src of the js file not mimified, but now I use npm install, package.json, and I dont know how to specify to get the complete source. Especially with highchart and highstock in reactjs react-hichart
Instead of:
import Highcharts from "highcharts/highcharts";
import exporting from "highcharts/modules/exporting";
Use:
import Highcharts from "highcharts/highcharts.src";
import exporting from "highcharts/modules/exporting.src";
I am using a boilerplate Ignite Bowser and I am trying to add Knob Addon to storybook, but so far I cant make it to work.
On the story, I added a decorator like the following code:
storiesOf("Button", module)
.addDecorator(fn => {fn()})
.addDecorator(withKnobs)
However, when trying to add: "#storybook/addon-knobs/register" Im failing at it.
Some help would be nice.
Thanks
Project Overview
When running on React Native you need to install knobs from the on-device
Create a file named ./rn-addons.ts
Add the following import on the file:
import '#storybook/addon-ondevice-knobs/register'
Then in your file storybook.ts, you import that rn-addons:
import './rn-addons'
I am only recently working with react, I am a complete newbie. Now I have integrated a login function. This seems to work with react-bootstrap shapes and bottons.
A line in my Login.js file is
import {Button, FormGroup, FormControl, ControlLabel} from "react-bootstrap";
To my question:
Where can I get the react bootstrap files (need it local)?
Where do I have to drop it?
Where can I get the react bootstrap files (need it local)?
A: Install Bootstrap using terminal
Where do I have to drop it
A:Inside of node_modules folder of your project
Where can I get the react bootstrap files (need it local)?
A: Install Bootstrap using terminal
https://react-bootstrap.netlify.com/getting-started/introduction/
Where do I have to drop it
A:Inside of node_modules folder of your project
I've made a component (button) with CRA and react-bootstrap,
and I exported it into bit-src,
the component has rendered without its styling,
however I've tried to push it with pure CSS and the component has rendered with its styling,
so is bootstrap didn't fit with bit-src
or I've missed something ?
You need to import all from here. Please read careful documentation.
(disclaimer - I help maintain Bit)
For the playground to fetch the bootstrap design, you need to import it to the example Bit runs. Add an import statement for react-bootstrap in the example itself, and import the design from there.
For anyone stuck in the same situation as I was.
The problem was that when I imported the component with react-bootstrap in the project it was missing the css files required by react-bootstrap to render its styling.
So the solution was to install react-bootstrap and bootstrap.
npm install --save react-bootstrap bootstrap
And add an import for the css file in index.js
import 'bootstrap/dist/css/bootstrap.min.css';
Inshort just following the get stated section of react-bootstrap solved the problem.
And I also think adding css import in the component itself may solve the problem but I have not tested it yet.
I am trying to use bootstrap js features following the angular-meteor tutorial
In that tutorial(see link) they have integrated bootstrap sass files. But how do I integrate the bootstrap.js file?
I tried using
import { bootstrap } from 'bootstrap';
In the main.ts file, but this is not working(IDE shows cannot resolve file bootstrap).
Surprisingly, my node_modules has the bootstrap package installed(the boostrap.sass gets imported successfully). Here is how my node_modules look like:
So how do I import this bootstrap.js file?
EDIT: Things I further tried are:
import bootstrap from 'bootstrap/dist/js/bootstrap' does not work and gives error "Cannot find module 'bootstrap/dist/js/bootstrap'"
import 'bootstrap/dist/js/bootstrap' works but this demands that tether be added as dependency. I added tether via npm and then added it(import 'tether/dist/js/tether') before above import in main.ts but this too does not solve the problem browser console says:
bootstrap.js:2785 Uncaught Error: Bootstrap tooltips require Tether
(http://github.hubspot.com/tether/)