How can I use Bootstrap in Vue components? - javascript

I put the same html (with Bootstrap 4.5.2) in these 2 places.
index.html
App.vue
In index.html, the Bootstrap style works. In App.vue, the space between buttons fails. I fixed this by adding class mr-1 to the buttons. How do I avoid having to fix normal Bootstrap when putting it in components?
what I tried (with the same result)
Added official BootstrapCDN code to index.html
Added this to main.js and installed the modules
import jQuery from "jquery";
global.jQuery = jQuery;
let Bootstrap = require("bootstrap");
import "bootstrap/dist/css/bootstrap.css";
Added this in the <style> section of App.vue
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
Momin's suggestion:
installed everything in the project folder dir
npm install bootstrap jquery popper.js
added this to the top of main.js:
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

If you need Bootstrap, just go with BootsrapVue which does the heavy lifting for you.
Should you still be open for other choices, Vuetifyjs is a really good framework with much to offer.

Adding bootstrap styles and javascript
In your project directory install Bootstrap and its dependencies.
npm install bootstrap jquery popper.js
If you’re not going to use Bootstrap’s JavaScript and only going to use its styles, don’t worry about installing jQuery or Popper.js
Finally, import it into the main script by adding these lines to the top of project/src/main.js:
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
Repeat, if you just want the styles and not the JavaScript functionality, just drop off the first line and only include the CSS.

BootstrapVue is a good choice, but it really is up to you. People can suggest other alternatives all day (e.g Tailwind Vue). BootstrapVue is nice because if you are already familiar with Bootstrap you will be mostly familiar with BootstrapVue straight away. Again, if it does work for your purposes then go with it.
I personally like the feature of including just what you need.
Read more about that in the BootstrapVue docs ‘Individual components and directives’ here: https://bootstrap-vue.org/docs#component-groups-and-directives-as-vue-plugins

Related

How to Use jQuery in a inline script when jQuery was imported in a react app?

I've been learning react and have a simple question.
I created an app component which is working well.
I installed jQuery using npm and import jquery in app component import 'jquery/dist/jquery.min.js'
At index.html file I have a script tag injecting a script.js and I'd like to use jQuery in it. But neither $ nor jQuery has been recognized.
What should be done to make it work?
I think your node modules jquery not loading in index.html, you can use jquery by link like
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
or put your jquery code in the related component, there you can easily import your jquery package.
import * as $ from "jquery";

App can't load Angular material theme

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";

Draft.js styles not working

I'm trying to use Draft.js with the Image plugin. Here are my problems.
I manage to get it to work, but the styles aren't loaded and the editor takes the whole page and the buttons aren't styled.
I load the styles from the provided CSS
import './Draft.css';
import editorStyles from './editorStyles.css';
import 'draft-js-image-plugin/lib/plugin.css';
But it doesn't do anything.
I'm working with Create React App, so style-loader and css-loader should be working fine.
Thanks for the help.
About styles in draft-js-image-plugin/lib/plugin.css. It looks like a mistake in the plugin documentation. We can read there:
The plugin ships with a default styling available at this location in
the installed package:
node_modules/draft-js-image-plugin/lib/plugin.css
But if we check this file in our node_modules directory, we see that this file is empty. No any styles.
About other styles. Check that you have Draft.css and editorStyles.css files and this files located in the same directory that your component. Do you have some errors in the console? It would be great if you provide full your code.

CSS not loading for React Foundation Apps

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?

Missing something trying to get bootstrap included into meteor as a local git submodule

I'm trying to install a local copy of bootstrap into a meteor project to make it easier to customise it.
I was using the bootsrap-3 smart package and it was working pretty well, so removed that, created the directory tree and files described in Use Twitter Bootstrap 3 RC1 with Meteor and executed meteor add bootstrap which displayed the text from the summary string, but, no bootstrap is included in the project.
I added bootstrap with
git submodule add git://github.com/twitter/bootstrap.git public/bootstrap
and adjusted the paths appropriately in the packages/bootstrap/package.js file (even tried absolute paths to try and get it to work).
package.js looks like
Package.describe({
summary: "Load locale bootstrap scripts"
});
Package.on_use(function(api) {
api.add_files('../../public/bootstrap/dist/js/bootstrap.min.js', 'client');
});
I'm missing something, but struggling to find it.
Peter
You could stick to the standard way of creating packages by just putting Bootstrap 3's css, fonts, and js directories at the top-level of your package directory, and link to them like this in package.js:
api.add_files('css/bootstrap.css', 'client');
api.add_files('js/bootstrap.min.js', 'client');
...
If you care about the icons, add the fonts the same way. Then, create an override css file which loads last, overriding the paths to the icons in the Bootstrap css. An example of this override file is in Meteor's official Bootstrap 2 package, here. Also see the package.js file from the same, here (though I think you could skip using NPM to concatenate the path names).
One easy way to add bootstrap is just to place the files in your client directory, probably at client/lib. That is the simplest way if you are going to maintain and customise the files yourself. You will probably want both the .css and .js from bootstrap.
For a package, I would look at bootstrap3-less. It can be added with meteorite and gives you the less files which you can customise. If that doesn't suit you then you can at least see how the package.js there looks and how the package is organised.

Categories

Resources