bootstrap collapse is not working in my react app .
i want the collapse functionality in my app
it is not working in my reactapp.
i think bootstrap classes are working but bootstrap onclick is not working
codesandbox code
codesandboxlink
bootstrap code
bootstrap link
solve this problem
you have to insall three dependencies in your app
bootstrap
jquery
#popperjs/core
you have to keep all the script tags in the index.html page
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
<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.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"
></script
Related
I tried to use Bootstrap 4.5 with the CDN that they have on their main page, however, after I inserted all the lines of code into my project I have a lot of issues with my custom css and the bootstrap carousel doesn't work. When I look at the inspector I see the following message:
The CDN codes that i used are the following:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
The "link" before the other links like Google Fonts, my custom css and fontawesome, and the scripts before the final body tab, so I don´t know, THANKS!
Sorry for my english, i don´t speak this language
Your cdn links are from an older version - 4.4.1, not - 4.5.0.
Here are the correct links:
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
https://getbootstrap.com/
I am getting this error even when all the jquery has been loaded before bootstrap and also have used the version 1.9.1
tried using jquery version 1.9.1 and it still dint solve
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="https://www.bootstrap-year-calendar.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/respond.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-year-calendar.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-popover.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/scripts.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-year-calendar.min.css">
I have had this issue previously when I have referenced two different versions of jquery or Bootstrap, you have done both here. You have three versions of JQuery in this code:
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="https://www.bootstrap-year-calendar.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
You are also loading bootstrap and the bootstrap min js files which will interfere with each other.
Try simplifying your code and only use 1 version of each library/framework.
So one version of JQuery loaded before Bootstrap stuff. One version of bootstrap. So make sure you have your JQuery script src THEN your Bootstrap one.
If you try to add more than one version of bootstrap this error comes. Order of bootstrap and jquery also matters. Try including this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
try including this
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I'm trying to add bootstrap popovers to buttons on my webapp but for some reason they don't show.
I'm initiating popovers in .js script in my Django template with:
$('[data-toggle="popover"]').popover();
I've tried variety of similar implementations, yet without any success.
Despite using code that works in fiddles I cannot recreate the effect within my app.
I'm assuming it's a matter of script tags, yet trying same tags as in some solutions didn't help much either.
Is there some conflict or am I short of some tags?
Here are my script tags:
<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
<!-- Theme style -->
<link rel="stylesheet" href="../static/bootstrap/css/style.css">
<!--star ratings-->
<link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
<script type="text/javascript" src="{% static 'star-ratings/js/dist/star-ratings.min.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Arrange your links & scripts like that and changed your CDN of bootstrap to latest version 4.3
<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!--star ratings-->
<link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="../static/bootstrap/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'star-ratings/js/dist/star-ratings.min.js' %}"></script>
POPOVER EXAMPLE
$(function () {
$('[data-toggle="popover"]').popover()
});
<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I am trying to add bootstrap popover on my page.
I have following code
$("#s1").popover({ placement: 'top' }).popover("show");
I have added following files to my page
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap.css.map
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap-theme.css.map
<link href="vendor/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.js" type="text/javascript"></script>
It was working fine some time ago. But I am not sure maybe some files I added or removed but now it's not working. Any help will be appreciated. Thanks
You are loading jQuery twice and v1.4.1 is ancient and not supported by bootstrap.js. You need to use at least v 1.11.1
i use Yii 1.1.13 and Yii Booster 1.0.6
On one page i need to use TbButtonGroup with checkbox toggle and jQRangeSlider (http://ghusse.github.io/jQRangeSlider/)
To use slider, i need to include jQuery UI lib, BUT when i include it, the checkbox mode of buttonGroup does not works.
With some versions of UI it just does not work, with with the latest it writes in console on TbButtonGroup click:
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'
The full list of sources is
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/jquery-ui-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-notify.css" />
<link rel="stylesheet" type="text/css" href="/jqslider/iThing-min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/assets/b1075121/jquery.yiiactiveform.js"></script>
<script type="text/javascript" src="/assets/b1075121/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.bootbox.min.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.notify.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places&language=en"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript" src="/jqslider/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/jqslider/jQAllRangeSliders-min.js"></script>
<script type="text/javascript" src="/js/search.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
If i delete the jquery ui, where is no slider, but all works fine. Help me please, where is the bug?
maybe you need to manually include your whatever scripts you need, using Yii::app()->clientScript
its safe becuz Yii wont load duplicate scipts