I can't seem to find a way on how to use bootstrap locally in react without npm or yarn bootstrap installation or even without CDN, every tutorial I find on how to use bootstrap they don't explain using bootstrap locally.
Please I need steps on how I can achieve this thanks
So I don't know this for sure, so please correct me if I am wrong. I am just trying to help you to the best of my knowledge.
There are multiple ways.
The first way is to import the CSS in the app.js (or the start of the React app). For the CSS you should have a file called bootstrap.css that contains all the CSS for Bootstrap. import './bootstrap.css'.
The second way is to import it in the html file. If you add the the <link rel="stylesheet" type="text/css" href="bootstrap.css">.
I don't know if this is the way it should be done!
Related
I am using Semantic UI lib for react
https://react.semantic-ui.com/introduction.
and create-react-app boilerplate
https://github.com/facebook/create-react-app.
My app requires RTL support especially for the Step component.
while researching for a solution i found that semantic ui have a config file semantic.json where i can define RTL but i can't warp the whole thing together.
does anyone have any recommendation or best practice for that?
you can use this
.ui * {
direction: rtl;
text-align: right;
}
The RTL support is a function of the semantic-ui CSS styles and should not have anything to do with semantic-ui-react. If you compile your own styles using the build tools in semantic-ui then use those styles in your project, they will work.
If you don't want to compile your own RTL styles, I believe this CDN is hosting a compiled RTL version of the CSS:
http://rtlcss.com/cdn/css-frameworks/semantic-ui/
If you want to use semantic-ui in reactjs in RTL language such (Persian/Arabic), you can follow below steps.
With cdn
First install semantic-ui for reactjs:
npm i semantic-ui-react
Then install semantic-ui css:
npm i semantic-ui-css
Now include semantic-ui rtl in index.html (just css)
Semantic UI RTL
<link
rel="stylesheet"
href="https://cdn.rtlcss.com/semantic-ui/2.4.1/semantic.rtl.min.css"
integrity="sha384-yXUIpeQfH3cuk6u6Mwu8uyJXB2R3UOLvcha1343UCMA2TA7lQ14BFmrudI6LAP8A"
crossorigin="anonymous">
Without cdn (Recommended)
If you don't want use cdn, just download css file go to this path:
node_modules/semanti-ui-css/
Put this css here, where semantic.css is, then include this:
import 'semantic-ui-css/semantic.rtl.min.css';
This method tested and already work fine, if anyone had issue, feel free to comment and I'll respond.
Creating an app with the angular-cli, if I link the Material theme from my index.html (following instructions from https://getmdl.io/started/):
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-amber.min.css">
The complete code is in a github repo on linked-theme-bad branch where the components are not correctly styled with the theme:
However, if I follow the exact instructions in the angular-cli doc to include Angular Material and import the style in styles.scss:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
The complete code on basic-theme-works branch) where the components appear correctly:
My understanding is that the import merges into a single stylesheet and the link in the HTML page will make a separate request for the style theme. The question is why doesn't the linked style sheet approach work.
By the way, I'm running the app with ng serve but this is an isolated example from another app which also seemed to fail in the same way with files that were built with ng build.
You're importing the CSS file from the wrong source (material-design-lite). (and by the way, you're also looking at the wrong documentation. See the link below for the correct docs)
From material.angular.io:
Alternatively, you can just reference the file directly. This would look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
More Information on using a prebuilt theme
Are Cards added to React-Bootstrap yet?
Or is there any other undocumented way of adding it?
What I am thinking of right now is -> className = 'bootstrap card class syntax', but I guess, it won't work because it won't recognise it.
Sort of found the answer, but it doesn't go by the name of card
You can use <Thumbnail>, it gives the same feel as that of a card.
Bootstrap classes can be used the same way in react like in any non-react project, even without the use of react-bootstrap. It can be imported as a CDN in your index.html file...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
... or it can also be saved locally and imported that way. Or you can configure webpack to import css files directly into your project.
You'd just have to make sure to use className= instead of class=, but otherwise, it works exactly the same way.
<div className="col-xs-12 well"></div>
react-bootstrap is an add-on that provides components that do the same thing. So, even if it's not in react-bootstrap yet, you can still use the functionality, but just as a straight css class.
I am new bee trying out react, react-bootstrap-table, I followed the example code, but unable to render table with style.
in my table class I am importing the bootstrap css
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
inspect element shows head tag renders css, but still my table is not formatted, ,
Created this project in github github project, please advice what is missing.
To run the porject git clone, npm install npm start.
In index.html file.
Add this line for your stylesheet. Works.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
I am using bootstrap in my react app generated with create-react-app
Below are two imports that I am using in my index.html
<script src="./vendor/jquery-3.1.0.min.js"></script>
<script src="./vendor/bootstrap.min.js"></script>
However in code when I use something like
$('.dropdown').dropdown()
I get an error as - error '$' is not defined no-undef
Can someone help me with this. Thanks!
If you need jQuery, run:
npm install --save jquery
Then you can use it in the app code:
import $ from 'jquery';
Note that this only works with versions 2.x and above.
You can also use it as a script tag.
This is not encouraged.
To do it, put jQuery into the public folder and add this to HTML:
<script src="%PUBLIC_URL%/jquery-3.1.0.min.js"></script>
Then you can use it from the app:
const $ = window.$;
In general I would recommend trying React Bootstrap instead of Bootstrap in React projects. It provides similar looking components but doesn't need jQuery and works on top of React.
I hope this helps! Please file issues if you're confused about something. We are happy to help.
You might need to require the jquery package. Include var $ = require ('jquery') (after installing it -- npm install --save jquery) on all the components that reference jQuery.