So I am working on a website for a school project and am using bootstrap. I downloaded bootstrap js e css files so I could use locally, so even if I don't have internet connection bootstrap would still work.
Everything was working fine, no problem with bootstrap, until I used a carousel.For some reason, my carousel wouldn't work, only the first image would appear. It didn't matter what i changed, nothing would work.
Then I tried changing the bootstrap files to the online links on the bootstrap website, and to my surprise, the carousel started working!
So why does the carousel only work with online bootstrap link and not local bootstrap files?
Below are the bootstrap files, locally and the web link. I am not providing the carousel html code because that is not the problem, seeing as i took it from the bootstrap website, and it is working, just not locally.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--<link href="css/style.css" rel="stylesheet" type="text/css">-->
<!-- Boostrap Minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Plugin jQuery -->
<!--<script src="js/jquery-3.4.1.slim.min"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
If anyone has had the same problem and nows how to solve it, i would apreciate it!
Thank you!
I suspect your calls failed because you did not call bootstrap.bundle.min.js (w/ Popper.js). You called the unbundled version (bootstrap.min.js) which does not include popper.js.
This is discussed in https://getbootstrap.com/docs/4.4/getting-started/contents/#css-files
Related
I Have been using Bootstrap for many years, and it is been 9 days now that I am working on a project in which I used bootstrap CDN, the problem is I need some features, components of MDBootstrap but not all of it, and when I included MDBootstrap also, it conflicted with the bootstrap cdn, my buttons and all the components I used are now confused, some of my components corrupted, what is the solution? I will write down my CDNs I have used.
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap"
/>
<!-- MDBootstrap CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css"
/>
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
and these are all what I have at last of the body tag.
<!-- MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.js"></script>
<!-- FontAwesome CDN -->
<script
src="https://kit.fontawesome.com/d455f30832.js"
crossorigin="anonymous"
></script>
<!-- Bootstrap js -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
any solution would be really appreciated.
please consider upvoting my question that I need for reputation. Thanks
As per bootstrap support team: Import only our package. With this package you'll be able to youse both: mdb, and standard bootstrap.
Reference: https://mdbootstrap.com/support/standard/can-i-use-bootstrap-with-mdbootstrap-can-i-use-bootstrap-and-mdbootstrap-together/
I'm trying to use font awesome on my site and it's not working properly. I was sent an email and told to just paste the element in my site's header. This is the element.
<script src="https://use.fontawesome.com/b219f80601.js"></script>
I did all that but it's not working and displays as shown in the image. When I try my older code from a different account it uses kit instead of use and renders properly.
<script src="https://kit.fontawesome.com/[redacted].js" crossorigin="anonymous"></script>
The icon I tried to use was fas fas user
<i class="fas fa-user"></i>
What might be happening here? Also, font-awesome did not add the crossorigin attribute to the newer tag.
A note: I'm also using bootstrap 5.
This is my header:
<head>
<script src="https://use.fontawesome.com/b219f80601.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/b219f80601.css" media="all">
<title></title><link rel="stylesheet" href="/stylesheets/main.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
And this is the script tag for bootstrap at the end of the body tag:
<body>
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
Note 2:
The embed codes I make and edit can only go up to v4.7.0.
It looks like your JS link does not actually provide the CSS required to render the icon. You need to include at least the base and solid icon set CSS.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css" integrity="sha512-P9vJUXK+LyvAzj8otTOKzdfF1F3UYVl13+F8Fof8/2QNb8Twd6Vb+VD52I7+87tex9UXxnzPgWA3rH96RExA7A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/solid.min.css" integrity="sha512-tk4nGrLxft4l30r9ETuejLU0a3d7LwMzj0eXjzc16JQj+5U1IeVoCuGLObRDc3+eQMUcEQY1RIDPGvuA7SNQ2w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://use.fontawesome.com/b219f80601.js"></script>
<i class="fas fa-user"></i>
Also, upon review of the CSS tag you have in your header, I think you may be trying to use FAv5 JS with FAv4 CSS.
It was an accounts issue. The account hadn't been confirmed but emails with embed codes had been sent regardless.
The emails sent me to this address and that seems to be a limited panel that allows you to create font-awesome 4 kits. This is the UI:
Once the account had been registered I was able to log into the site and access font-awesome 5 regularly and create new kits. These links start with kit instead of use
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I have my website's html code written by following bootstrap 3.3.6 claases. Now I want to use the features of bootstrap 3.3.7 but it's not straight forward to just change the version of the bootstrap. What's the best way to do this upgrade? Do I need to write all the code again following bootstrap 3.3.7 standards?
the best upgrade to a new version is removes the url of old version and add the new url of a new version . for more help go to NPM documentation https://docs.npmjs.com/cli/update
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--add your css file here -->
<!--you must add the jQuery library here before the url of bootstrap/3.3.7/js/bootstrap.min.js-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
I am designing this template on bootstrap 3. But I notice the responsive menu which is default in bootstrap does not work when I resize my browser to check.
I have also done many responsive template before but they are works fine, only this template does not work. I have tried to find out the error but can't fix it.
Can anyone help?
Template: https://dl.dropboxusercontent.com/u/138944745/bootstrap_lambda/index.html
In footer you included bootstrap.min.js as first and jquery.min.js as second. You have to change the order
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Change like this,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>