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/
Related
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
I'm trying to initialize this plugin in different ways, inside my HTML document, but it seems isn't working...
I attached a picture of the Usage documentation, and this is the link of the plugin: https://unpkg.com/darkreader.
I'm using javascript for that, and not typeScript.
enter image description here
Here you haven't mentioned how you're including plugin in HTML document, So try to add jquery first and after that include this script like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>
</script>
<script src="/scripts/darkreader.js"></script>
</head>
<body>
</body>
</html>
This is the end of my HTML file:
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<!-- Google LogIn Client -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- DarkReader Dark theme plugin -->
<script src="https://unpkg.com/darkreader#4.7.15/darkreader.js"></script>
<script type="text/javascript">
import {
enable as enableDarkMode,
disable as disableDarkMode,
} from 'darkreader';
enableDarkMode({
brightness: 100,
contrast: 90,
sepia: 10,
});
</script>
I tried to initialize the plugin, but still not working...
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>
var result = document.getElementById("result")
//can't add bootstrap classes to <div> and <table>
<div class="container"><table class="table">
result.innerHTML = "<div><table><thead><tr><td>Column A</td>
First of all in your code the outer div doesn't seem to have an id attached to it, call the div like:
<div id="result>
To add bootstrap to your html you have to first import the css file and put it in the head element of your html like:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
Then add the javascript, jquery, and popper.js file to the end of the body of the html:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Also make sure to add your javascript to the html using the script tag as seen above or put it b/w the script tags
<script>
some 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>