Bootstrap utilities - reactjs

So I want to user Bootstrap 4.6 in my react app.
Based on this blog post I decided to add the link to the CDN (I don't want to use react bootstrap)
So I edited my template like this :
in the I added
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
And juste before closing the body I added
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<!--public/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="TS webapp" />
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Echino Portal</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
I'm able to use what I will call "basic bootstrap" (row, col, ...) but the utilities don't work. For example if I want to add a margin top to a row I should be able to do like this :
<div class="row mt-15">...</div>
But there is no margin applied. What am I missing to have the utilities of bootstrap working?
Thanks


Thanks to #muhaymin khan there is the answer :
mt-15 is not gonna work they set margin and padding from 0 to 5 you can't use bigger number than that you should use mt-5 kindly read this docs getbootstrap.com/docs/4.6/utilities/spacing


There is a simple and working way of adding the bootstrap is by doing the following,
Step 1: npm install --save-dev bootstrap popper.js jquery
Step 2: add the path file 'bootstrap.min.css' in the index.js/App.js after the import path file of 'react' and 'react-dom'.
That's it. It will work like charm!


The first thing that I see wrong is that you use class same as in HTML, class word in react is replaced with className
<div className="row mt-15">...</div>
It should give you an error if you use just class
I am not familiar with this version of bootstrap but in the source code there is no class for mt-15
I saw here https://www.jquery-az.com/bootstrap-margin-padding-classes-spacing-explained-5-examples/
that you can use
mt-sm-3 and mb-sm-3 for top and bottom margin.
You can set margin also with style attribute in react
e.g.
style={{ marginBottom: 25 }}
It is shown on the link that you have posted.
Also I can advice you to use everything as module from npm, you can try the second part from the tutorial that you have posted
npm install bootstrap

Related

How to combine webpack-license-plugin with create-react-app?

For my React-website, I need to document all the packages I am using.
For this, I want to use webpack-license-plugin (https://www.npmjs.com/package/webpack-license-plugin)
However, I recently switched to using "create-react-app" which means there is no config-file I can directly modify.
I tried to follow this answer (create react app Configuration file after build app) which tells me to create a config-file, use the plugin there and load it in my index.html-file.
I would have expected when running the build somehow the inside config-file by me specified output-file would appear inside the build-folder, BUT there is nothing.
I did not find any other guidance, other than this question (Customize webpack plugins using create-react-app). However, I would like to avoid making use of new tools, if possible.
Generally, I just wonder about the simplest way how to achieve what I set out to do. Thanks for any help!
Here is the content of the extra config-file I added to my public folder (beside the index.html):
const LicensePlugin = require("webpack-license-plugin")
module.exports = {
plugins: [
// there might be other plugins here
new LicensePlugin({ outputFilename: "thirdPartyNotice.json" })
]
}
And here is the content of my index.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cardo&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="%PUBLIC_URL%/config.js" type="text/javascript"></script>
<div id="root"></div>
</body>
</html>```

How to prefer a css file over another?

I have two css files
import "bootstrap/dist/css/bootstrap.min.css";
import "semantic-ui-css/semantic.min.css";
And I prefer the design of the bootstrap in the design where they refer to the same thing, how can you write in a code line to the site to prefer the bootstrap?

Usually what I do in such cases of CSS conflicts is roundup the classes that are being used by the element that is causing the conflict and then extract only those classes and have them as internal styles(inside the tags) because the CSS preferences you know is in-line > internal > external and id > class > element and also !important takes precedance. for more info refer here - What is the order of precedence for CSS?
As an example -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.text-primary{
color: black !important;
}
</style>
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
</div>
</body>
</html>
You see I didnt want the text-primary class so i redefined it internally with !important since its bootstrap css you need !important to override it.
Similarly you can extract the classes that are needed by your sidebar(menu) and then define them internally to override your external css.

Favicon not showing up when running my React project

Favicon not showing up when running my React project. However, when I click index.html, the icon appears. When I call npm start, when localhost opens I see my pages without icons. I tried every way and even though I made many changes, I could not reach the result. I will be glad if you help.
The file structure of my project is as follows.
file structure
and index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Trying Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Clear the cache in your browser, this should fix the issue.

Your icons should be in public folder. For importing correctly you have to start all your paths with "%PUBLIC_URL%/myIcon.ico" and this "%PUBLIC_URL%" will be resolved into public folder (where your index.html is placed by default).
(inside index.html on public folder)
exemple: <link rel="icon" href="%PUBLIC_URL%/logo.png" />

Just add version parameter for the favicon path to force your browser to refresh the pic
<link rel="icon" href="favicon.ico?v=2" />
Then you can delete it, the icon will remain.

My localhost website using(angularjs bower components) works fine only on a particular browser and not on other computers and browser

This is my index.html file. I have used angularjs , bower components etc. I have used angular ui view to store header, content, footer files as templates in another folder. When I try to open "index.html" is mozilla(using it for a long time) the website opens perfectly(with all the css and scripts loaded perfectly) , but in some other browser it just shows a blank screen. I have checked in Networks developers option , there is no error in mozilla but lots of 304 and 404 errors in other browsers.Are there some issues on loading the styles and scripts on other browsers or some cached data issues?
<!DOCTYPE html>
<html lang="en" ng-app="medicalApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>temp_App</title>
<!-- links to various stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-plain.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-default.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
</head>
<body>
<!-- I have used angular ui-view and store header, content, footer files as templates-->
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/ng-dialog/js/ngDialog.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
</body>
</html>

It is impossible to say since we can't directly interrogate your pages/scripts. Typically a white screen in an Angularjs application is indicative of a script error (unable to load a dependency or template usually). The Console should give you the answer. Firefox is pretty forgiving, which is why I prefer to use Chrome. In the failing browser look for angular errors for dependency loading.
It might be the order you are loading scripts. Other than that I can't see anything on the surface that would a problem.

I want to use bootstrap's cdn in my react project. Where and how do I insert the cdn?

I am currently working on a React single page application and I cannot figure out where and how to place the Bootstrap CDN in my project for my bootstrap to work.
Also if somebody could suggest how to npm install bootstrap for your project.

If you use create-react-app there is a file in public/index.html or let's say in your index html page which you first render use cdn there
like
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>React App</title>
</head>

CDN
<HTML>
<head>
<!-- YOU CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body></body>
</HTML>
npm
npm install bootstrap#3
require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the /js/*.js files under the package's top-level directory.
Bootstrap's package.json contains some additional metadata under the following keys:
less - path to Bootstrap's main Less source file
style - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)

npm install --save bootstrap
after this import this in App.js
import 'bootstrap/dist/css/bootstrap.min.css';

Resources