this is probably really stupid question.
I love boostrap and using it CSS styling for pretty long time, how ever when i try to use any of their JS things it's not working for me.
I always make sure I have this in my tag but still
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
It looks i am completly blind or i don't know what I am always doing wrong. Is there a chance somebody can help me with that?
Thanks.
Example code:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Audatex History</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</body>
</html>
You are missing JQuery
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Note: Include it before the bootstrap JS.
And you must initialize
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
Note: Include it before the end tag head.
Bootstrap relies on jQuery. Include it before you include the bootstrap JS.
Related
I created a new Blazor WebAssebly project in VS19 and wanted to add a website template to my project, I downloaded it but was wondering where I should put the JavaScript files it came with.
I currently have them here in my index.html file in wwwroot folder:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ImmoPlatform.SPA</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="ImmoPlatform.SPA.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<!-- jQuery library -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- slick slider -->
<script type="text/javascript" src="js/slick.js"></script>
<!-- Price picker slider -->
<script type="text/javascript" src="js/nouislider.js"></script>
<!-- mixit slider -->
<script type="text/javascript" src="js/jquery.mixitup.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
but when I start my blazor project the javascript doesent seem to load. the CSS I put in the mainlayout.razor file in the Shared folder works file and that CSS came with the template.
Is this the correct place to put them? or should I put them somewhere else?
I ran into the same problem as you. The J/S files must point to the index.html; however, Blazor does not load them automatically – it must use the J/S interoperability, which is complex, and much more so if you do not know the functions that the template has.
At home, I wanted to use Admin LTE, luckily I found a project on GitHub, where they are making a version of this template for Blazor.
https://github.com/sjefvanleeuwen/blazor-adminlte
Hopefully the Blazor team will change this type of operation, since, in my view, it is a setback in the way of doing frontEnd.
Currently I have a popover set up that is not initialing. My code is as follows:
HTML:
<div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>
JavaScript:
$(function () {
$('[data-toggle="popover"]').popover()
})
I've included everything I need to CSS and library wise and managed to replicate the issue here in a fiddle: https://jsfiddle.net/W3R3W0LF666/33rmse7m/
So far I've tried moved the initialization text to various places in the JS file to rule out any hierarchy issues
Initialize
$('[data-toggle="popover"]').popover()
Pop it
$('[data-toggle="popover"]').popover('show');
Check this one this will help you..
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link href="style.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
Toggle popover
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
I have updated your code, Check code below JSFiddle :
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'bottom'
});
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button data-toggle="popover" class="btn btn-primary" data-content="xyz">Click Me</button>
You forgot to load the external resources.
From the docs:
How popover is triggered - click | hover | focus | manual. You may
pass multiple triggers; separate them with a space. manual cannot be
combined with any other trigger.
You need to define the trigger data-trigger="hover":
<div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>
Have a look at this fiddle.
PS: Yours actually works, but it only triggers on-click.
Just wrapped your jQuery script like this:
jQuery(function ($) {
$('[data-toggle="popover"]').popover();
});
Or if you want to load the script on document ready, then use this:
jQuery(document).ready(function($){
$('[data-toggle="popover"]').popover();
});
Reason: $ causes name-conflict between jQuery and plain-js/other-libraries hence why you have to call it differently so the browser knows that jQuery and not some other library is using it.
Here's a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/33rmse7m/7/
I want to use bootstrap and font-awesome.
The document says just importint CDN.
it is my simple codes.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<i class="fa fa-flag"></i> fa-flag
</body>
</html>
However, flag icon didn't appear.
Could you tell me how to fix it?
http://fortawesome.github.io/Font-Awesome/get-started/
in
EASIEST: BootstrapCDN by MaxCDN
point 2
Pat yourself on the back for your scalable-vector-icons-on-the-website
judo solution in a single line of code.
you need a source
css only mapping positions
I prefer this case
EASY: Default CSS
If you're working locally you might need to add an "http:" in front of the CDN link. So try this instead:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
This is my .cshtml code
<!DOCTYPE Html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>welcome</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
</head>
<body>...</body>
</html>
Whenever I execute my code it gives the bootstrap requires jquery error. Please suggest what should I do to remove this error.
Make sure that the path is correct and points to jQuery version greater than 1.9
You are using 1.8 which is not compatible with bootstrap
Source:
https://github.com/twbs/bootstrap/blob/v3.1.1/bower.json
Just as Amit Joki said, make sure you link points directly to the jquery file and
the file name is spelt accordingly.
Also ensure that you link jquery js script before you link to the bootstrap js script
<script src="path_to_script/jquery-1.8.0.min.js"></script>
<script src="path_to_script/bootstrap.js"></script>
<link href="path_to_script/bootstrap.css" rel="stylesheet" />
I'm at my wits end right now trying to get bootstrap.min.js to work. I have bootstrap.min.js hosted on my server in bootstrap-3.1.1-dist/js/
In my header I have
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Rochester Michigan Computer Repair and Web Design">
<title>Tony Weed - Michigan IT Services</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link href="bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
I'm trying to call a tooltip using
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
but I just cannot get it to work. I've been staring at this for the past few hours and I'm thinking it's something that I'm overlooking. I'm hoping a second set of eyes will help.
Would my web host have anything to do with this perhaps? I'm running through ipage
From the bootstrap tooltip docs:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
You will need to call:
$('[data-toggle="tooltip"]').tooltip();
Also you should initiate the tooltip after the DOM is loaded.
Wrap your JS code in jQuery.ready
You are calling initialization of plugin before any of these targeted elements is available in the DOM. You could just wrap it inside document ready handler:
$(function () {
$('li[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
});
You should really have provided more context in your question, this would have been fixed in few seconds...
I'm not sure if it will fix the problem but the script should be at the bottom of the page instead of in the the <head>