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.
Related
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!
I've got an app that is a part of a larger system. My app is distributed as a JS file, that is later embedded into HTML of another page. I don't have control over that HTML file.
I want to add a font from Google Fonts into my app. I have a link to a stylesheet that imports and declares the fonts.
I've tried using createGlobalStyle from styled components or a CSS file referenced inside the file with main React component, to no avail — the font doesn't seem to be loaded, possibly because #import declarations have to appear before other declarations, and my CSS is inlined into a random place in the document.
How do I insert them as before any other CSS?
The solution to my problem was to add <link rel="stylesheet" src="..." /> into the head using react-helmet.
<Helmet>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
</Helmet>
In the official website , there is a way to import the Module to the project
import { Link } from 'react-router-dom'
import Button from '#material-ui/core/Button';
<Button component={Link} to="/open-collective">
Link
</Button>
However is there anyway to call the object by Browser global(window object)?
You can use a CDN version, include that in your index.html, then you will be able to access it.
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
and the font file.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
Here is an example https://github.com/mui-org/material-ui/tree/master/examples/cdn
It should be noted according to their documentation
You can start using Material-UI with minimal Front-end infrastructure,
which is great for prototyping. We discourage using this approach in
production though - the client has to download the entire library,
regardless of which components are actually used, affecting
performance and bandwidth utilisation.
I am importing {Button, ButtonToolbar} from 'react-bootstrap' (it's saved in the dependencies list), however my page still appears bare. What is the reason for this?
Did you include stylessheet of bootstrap in your index.html? react-bootstrap still needs this to work properly. Hope it helps
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
However, I think you should just use normal button bootstrap by adding className of btn btn-primary, it still works fine with reactjs and give you ability to customize
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