Im trying to bundle my project using webpack 4.
structure for bootstrap:
public
css
images
js
vendor
bootstrap\dist
css
fonts
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
js
webpack is unable to locate "fonts" and throws error while building
I solved it as i was using bootstrap 4 and Bootstrap v4 drops the glyphicon font altogether.so, the error occurs instead downgrading with version 3 and below works.
Font Awesome can be used alternative to glyphicons on bootstarp 4.
Bootstrap 4 - Glyphicons migration?
Related
I am creating my first electron app and wanted some styling with bootstrap 5.
So I:
(1) installed via npm i --save bootstrap jquery popper.js the necessary modules
(2) created a main.scss including #import '~bootstrap/scss/bootstrap';
(3) put into the head of my index.html:
<link rel="stylesheet" href="./contents/bootstrap/5.0.2/css/bootstrap.min.css" />
<script>let $ = require('jquery');</script>
<script>require('popper.js');</script>
<script>const bootstrap = require('bootstrap');</script>
After that I copy+paste a nav bar out of the bootstrap documentation. I dont know what is wrong and I didnt find any answer. Thanks for helping.
Bootstrap 5 doesn't use jQuery any longer.
Just do:
npm i --save bootstrap#latest
I want to use Angular Material in my MEAN stack app, but I get the following error:
Could not find Angular Material core theme. Most Material components
may not work as expected. For more info refer to the theming guide:
https://material.angular.io/guide/theming
In my Angular CLI apps I manage to work with Angular material, but with this app I just can't seem to make it work. It is probably because of the structure of the app:
As you can see on the image I tried with the #import statement. On the homepage I put a checkbox Material item (here named jjjjjj), but as you can see it doesn't have the theme so it doesn't look good.
I had the same problem and for me it works try to add this line instead:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
you can choose here the theme you want to apply
Material theme
I had the same problem, and it was because I was trying to import the material theme into the css file of one of my components. Moving the import statement to the top-level styles.css file worked.
#angular/core 6.0.0
#angular/material 6.4.1
Add the line below to the file src/styles.css:
#import "#angular/material/prebuilt-themes/indigo-pink.css";
I have two similar very small example Angular applications that integrate Bootstrap CSS. One works and one that I created myself doesn't. It is unclear what the difference is and why it doesn't work in my case.
My steps are as follows:
npm install bootstrap --save
This updates package.json and then subsequently I update index.html and add
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
Exactly the same line as the working application but in example app that I created using ng new new-app it is not working.
Network tab in chrome shows 404. Basically the URL http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css cannot be found.
What is the correct / complete way to integratie Bootstrap CSS in an Angular app?
It seems you are using angular & angular cli
If this is the case then you can actually add the bootstrap.css file in .angular-cli.json inside array corresponding to style key like this
"styles": [
"styles.less",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Two other possibilities are importing this bootstrap.css at main .css file using #import or you can require this in the main index.js file.
Since you are using Angular-CLI:
update your .angular-cli.json file to include the bootstrap style:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
],
No need to include it in your index.html
I've installed in my project "bootstrap-sass": "~3.3.6"through Bower. In my index.html I've got injected autoamticaly this:
<script src="bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
and in my style.scss I put this:
#import '../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
What am I missing to get glyphicons working?
glyphicons is a fonts that instead of showing chars its shows vector images
so in order to show the icon you need, beside adding the sass, make sure that the font on the dist folder is in the relative path so that the css #font-face will load properly
you can check the path by open the network (in chrome) and you should see an error of 404 for the font path
I have installed React Foundation Apps according to the docs:
http://webrafter.com/opensource/react-foundation-apps/install
I had to fiddle with the webpack.config.js file to make it parse .jsx files but now the module is working, except that no CSS is added. I'm trying to use the Modal but it just shows up on the page with no styling applied.
What can I have missed?