I'm wodering how can I integrate bootstrap 4 into my vue.js 2.6.
I know there are tons of tutorials out there but all of them either are obsolete in late 2020, or require useing bootstrap-vue which brings a host of junk tags into the table which I abhore.
So I appreciate if you could provide a paractical full example of such integration with vanilla bootstrap 4.
You can use vanilla bootstrap in a vue project. Just install bootstrap by running
npm i bootstrap popper.js jquery
Popper.js and jquery are dependencies of bootstrap.
In your main.js file, you import bootstrap by adding:
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css"
Per official Bootstrap doc, the following components require JQuery, bootstrap.js and Popper.js:
Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper)
Scrollspy for scroll behavior and navigation updates
Related
so Im trying to use Bootstrap component like Modals and popovers but nothing is shown specially when I try to click on the button to show the modal Fading , same thing for popover!
Here is my code I used from "https://getbootstrap.com/docs/4.0/components/modal/"
I don't know what's the problem really ! Any help
You can include jquery and bootstrap using CDN / Local in tag head your index.html file in public folder,
codesandbox example : Plain Bootstrap 4 in React
You can use all in the box component from react-bootstrap.
codesandbox example : react-bootstrap working example
In my application, I'm using the $modal directive of boostrap.ui. I'm also using the Bootstrap navbar with dropdown functionalities.
I'm having the problem that window.html cannot be found as described in this topic.
The problem in my case is that I have both a ui-boostrap.js file and a ui-bootstrap-tpls file included (v1.3.2)
According to this topic, I should only need the tpls file.
However, when I remove the boostrap.js file, all the other bootstrap functionalities for the dropdowns in my header are not working anymore.
Is it not possible to have both functionalities available?
UI-Bootstrap library is just an Angular wrapper for core Bootstrap library to remove the dependency of jQuery from the application. From the docs:
This repository contains a set of native AngularJS directives based on
Bootstrap's markup and CSS. As a result no dependency on jQuery or
Bootstrap's JavaScript is required.
ui-bootstrap-tpls.min.js or ui-bootstrap-tpls.js contains the default template for all the Javascript module shipped by Bootstrap i.e. why it's named -tpls.
The other file ui-bootstrap.min.js or ui-bootstrap.js does not include any templates for the Javascript modules/features.
So you should only include ui-bootstrap-tpls.min.js or ui-bootstrap-tpls.js if you are not planning to override any template.
The answer about why dropdown stopped working after removing bootstrap.js is that your HTML code is still using the jQuery version of Bootstrap but you should start using the ui-bootstrap version of those modules. Yes, it is possible to include both the Angular version of bootstrap (i.e. ui-bootstrap.min.js) and jQuery version of bootstrap (bootstrap.js) but it will be extra overhead on the app.
There is no need of jQuery in order to use Bootstrap's Javascript features if you have already included the ui-bootstrap library.
As explained by shashank, all bootstrap elements in bootstrap.js in converted to angular directives in ui-bootstrap-tpls.
If you simply replace the file it wont work as you expected.
If you changes to ui-bootstrap-tpls then you need to change the corresponding bootstrap components to angular ui directives.
"Like the Bootstrap jQuery plugin, the popover requires the tooltip module."
Is this why I can't get my popover to work? What is the tooltip module, do I need to import something else? I imported bootstrap, angular-bootstrap, angular, and angular-animate. I still can't get something as simple as this to work:
<button uib-popover="test" popover-placement="top" popover-trigger="mouseenter">test</button>
The plunker example never imports a tooltip module?
https://angular-ui.github.io/bootstrap/#/popover
It's a part of Bootstrap JS framework. You can enable it by in including either tooltip.js or bootstrap.js files on your page.
https://getbootstrap.com/javascript/#tooltips
As for your issue, it's probably caused by some version conflict between the frameworks -- I had similar problem as yours and managed to get it working by updating the frameworks (AngularJS, bootstrap, ui-bootstrap) to their latest versions.
Also, the popovers don't work on disabled elements (using ng-disabled) (see https://github.com/angular-ui/bootstrap/issues/1025 )
I'm loading bootstrap into my application via Meteor add xyz (not script tag), and the hidden packages file in my project director reads:
meteor-platform
autopublish
insecure
twbs:bootstrap
iron:router
bootstrap
accounts-ui
accounts-password
jquery
So I definitely have bootstrap working, but when I click on my Bootstrap dropdown menu, or even this 3rd party scrollable dropdown menu:
http://www.bootply.com/86116
The dropdown button gets highlighted around the edges, but nothing drops down.
What's going on here? I've seen similar posts, but they revolved around people loading multiple twbs compilers in the header. Is it possible that my two bootstrap packages are causing a collision?
This could be for a packages conflict.
Try removing meteor remove bootstrap
and just keep with the twbs:bootstrap package.
Something mizzao bootstrap package do the trick
meteor add mizzao:bootstrap-3
Is there any good metro styled datepicker control that I can embed to website? jQuery UI, for example, doesn't look good with metro styled web page.
If you're just looking for a jquery ui theme take a look at this jquit theme found here.
Other alternatives are:
MetroUI CSS offers a datepicker (and a complete user interface looking like metro)
http://metroui.org.ua/calendar.php
Also there is a theme for Bootstrap called BootMetro which also offers a datepicker.
http://aozora.github.io/bootmetro/javascript.html#datepicker
If you're trying to get a fully metro styled page, I would recommend to use a theme in combination with bootstrap as it saves you a lot of work.
For metro style, visit Jquit (For jquery UI)
http://jquit.com/build-jquery-ui-themes-with-jquit-builder/
You can customize your datepicker using ThemeRoller of JQuery UI.
Also checkout this blog for customizing. This DEMO looks to be a good metro styled.