I have made a CodePen and tried using Bootstrap to make a collapse with a button. I have included the Bootstrap, JQuery, and Popper libraries. The CSS Bootstrap is working because my button is being styled, but when it is clicked it does not display the content. I will include a block of the code as well with a link to the full CodePen. Any suggestions on the project are welcomed as well, but I just really need to know why the collapse is not working. Thanks for reading, and I hope I can get this to work with yall's help!
Button:
<button
data-toggle="collapse"
data-target="#website-code-container"
type="button"
class="btn btn-primary"
>
Click Me to See the code used
</button>
Content to be displayed:
<div id="website-code-container" class="collapse"> ... </div>
Link to full CodePen, this will probably help more: CodePen
You have a problem with the Bootstrap CSS and the Popper JS libraries that you are importing.
Try importing the css from Bootstrap CDN listed at https://getbootstrap.com/
Don't forget to load jQuery before you load bootstrap.js
Here are the links to the CSS and JS for easier access
CSS only
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
JS, Popper.js, and jQuery
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
You can find prior versions of the libraries at https://www.bootstrapcdn.com/legacy/bootstrap/
You are attempting to load files from a local drive. This will not work as filesystem access is not broadly allowed for security reasons.
Instead of these, include the relevant files in your CodePen or in another HTTP-accessible location:
<link type="text/css" rel="stylesheet" href="E:\Tech Page.css" />
<script src="E:\Tech Page.js"> </script>
Related
I am building a website on Visual Studio Code and I'm using Bootstrap 5.3, but the functions are not working - buttons not expanding, carousel not rolling, etc. I'm a beginner, so I've been struggling to understand why :(
Do someone know what's the issue or had the same problem?
Many thanks!
I used the CDN from here: https://getbootstrap.com/docs/5.3/getting-started/download/
This is what I have in head - these are followed by my own css file only.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
*I didn't start my own JavaScript yet, only have the html and css files.
You will need to include both of the required resources. Put them both in your <head> element.
The Bootstrap5 css (style) bundle
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
The Bootstrap5 JavaScript Bundle
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Source: https://getbootstrap.com/docs/5.3/getting-started/download/
If you edit your post to contain the html itself then we can have a look and see what the issue is. This will most likely lead to better answers for you.
I have a page, when I include bootstrap JS with npm like this
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/poppor.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
, tootip doesn't work, but when I include Bootstrap JS like this
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
It works well.
Here is where I use tooltip
<a href="#reserve-table" role="button"
data-toggle="tooltip" data-html="true" title="Or Call us at <br><strong>+852 12345678</strong>"
class="btn btn-block btn-warning nav-link">
Reserve Table
</a>
I don't know why as I'm beginner to bootstrap, and also what is the best way of including bootstrap respect to site load speed, and what is the way people used to do it?
Thanks in advance, and sorry if the question may seem silly.
Update:
I notice someone also have the same situation here, the answer said to add bootstrap from external resources and tooltip will work fine, but it doesn't said why!
Update:
The problem has been solved when I replace the file
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
with
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
I don't know why!
It seems that there might be something off with the way you're including popper in your project as evidenced by:
The fact that the combined Popper/Bootstrap import solved your problem. According to Bootstrap's NPM page:
Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery.
Your script src is node_modules/popper.js... when that package is listed as deprecated. Consider using #popperjs/core, instead. (Assuming that poppor.js at the end of that src is a transcribing error and that the actual src ends with popper)
I have this project where I imported bootstrap like this on my header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
Everything was working fine until I decided to add a carousel.
The carousel shows up properly, but it doesn't rotate and the buttons on the side doesn't work.
I also noticed that my colapsed menu also don't work.
On my research I saw a lot of people suggesting to use reactstrap and some other third party libraries, but I'm wondering if it's possible keep using the link stylesheet.
From what I read the problem is with the jquery and bootstrap being imported in the wrong order, which might cause those elements to break.
Solved the issue using another website as reference:
https://www.bootstrapcdn.com/
Instead of using
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
I used
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
And it is finally working.
but it doesn't rotate and the buttons on the side doesn't work. I also noticed that my colapsed menu also don't work.
there is no functionality on your pages if dont import the js scripts.
add these scripts also and your buttons and collapse menu should start working
**for css link**
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
I started a new laravel project yesterday. Followed the guide from a guy in YouTube. Everything works until I installed laravel auth and realised none of the bootstrap dropdown works, even when i create new one from their website.
Firstly, I thought I messed something up in composer, because I wanted to get rid of the bootstrap and later I changed my mind and put it back. Then I created new Laravel project and started from scratch again. Even then my dropdowns are not working. I checked for similar problems in google, but none of them helped.
By default, bootstrap.bundle.js is not included inside your Laravel app. To add this:
Open 'resources/js/bootstrap.js' file and add the following code at the last line of this file.
require('bootstrap/dist/js/bootstrap.bundle');
Hit save and run npm run dev and it will work finally!
I had the same problem, it is happening because bootstrap has not been loaded properly and I simply solved it by pasting this link in <head> tag
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
and paste this in the lower region of <body> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
It seems that your bootstrap has not been loaded at all. Make sure that you include the bootstrap library in your view. If you are using WebPack, check if you are mixing the external libraries into one, and include that one in your main blade file.
Sometimes you should change order of script links for that to work
My toggle javascript buttons worked initially - however I have now found that my toggle button including navbar collapsing toggle and accordion panels.
I have included my header and footer. From what I have researched I cant see why it has stopped working.
Any help would be appreciated.
Header:
WEBSITE TITLE
<!-- Bootstrap -->
<link href="style/css/bootstrap.min.css" rel="stylesheet">
<!--load font awesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Footer:
<footer>
<div class="container">
<p>© Company 2015</p>
</footer>
</div> <!-- /container -->
</div>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I guess you just copied what was said on the bootstrap side for example:
<script src="../../dist/js/bootstrap.min.js"></script>
If you have the js bootstrap file in one of your folders in the root, you might want to make sure it is the path is right. For example if your html file is in the same directory as your bootstrap.min.js it should be
<script src="bootstrap.min.js"></script>.
The quick fix you just did which is simply changing it to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Might solve the problem now but it will render your local bootstrap file useless which you can make useful by using a bootstrap cdn fallback.
Which is basically loading your local bootstap files if you fail to load remote bootstrap files. This is how to make a bootstrap cdn callback
If you are using bootstap 3.x then you need at least jquery 1.9.1 version library.First download the jquery library and bootstrap js and include in your application and then register both in your application page.First register the jquery library and then bootsrap js as mentioned below.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
So, i did faced this problem and there are 2 main steps in this,
Number1: You need to include 3 files or links, 1 for Bootstrap CSS, 1 for bootstrap js and 1 for jquery.
You can include like this:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Number 2: Now make sure that when you include these files, you include them in this order, First CSS, then JQUERY, then JS.
This is because css is loaded first, then jquery and jquery is needed to be loaded before JS, this is because the JS used in bootstrap is written in Jquery so we need to load Jquery before JS.
And you will be good to go. Thanks
I changed the javascript tag displayed in my footer example from:
<script src="../../dist/js/bootstrap.min.js"></script>
to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
This has resolved the problem.
if you check the console of the page, it should show a notice that jquery is not seen by javascript. so, you can solve this by downloading the jquery source code from the jquery site and then you can add the following line of code before the end of your footer:
<script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>