I have included Bootstrap into my Scala/Play Project in Intellij.
But it is not rendering.
I included bootstrap.min.css, bootstrap.min.js and jquery-3.4.1.min.js.
Folder structure:
in public folder: Folder css with bootstrap.min.css and main.css; Folder images with favicon.img; Folder js with bootstrap.min.js, jquery-3.4.1.min.js and main.js
HTML-Codes where I am trying to access bootstrap
in the HTML header
<link rel="stylesheet" media="screen" href=#routes.Assets.versioned("css/main.css")">
<link rel="shortcut icon" type="image/png" href=#routes.Assets.versioned("images/favicon.png")">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
Before the closing body-tag:
<script src=#routes.Assets.versioned("js/main.js")" type="text/javascript"></script>
<script src=#routes.Assets.versioned("js/jquery-3.4.1.min.js")" type="text/javascript"></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=#routes.Assets.versioned("js/bootstrap.min.js")" type="text/javascript"></script>
The result is a HTML page without any css (Default font: Times new Roman).
The HTML page is not rendered using bootstrap.
How I can include Bootstrap so that it is rendered correctly?
Related
I have a CSS LESS file, and it include css less code. I am trying to import it into my html file, in the head, like so:
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
<script src="./script.js"></script>
</head>
However, the css is not processing, and there is no css showing up all just non-css stuff on the html page.
am i importing it wrong?
I don't know what's in you less.js file, but in case less.js is a script to compile your less file, you have to put it before the link tag in your head.
<head>
<script src="less.js" type="text/javascript"></script>
<script src="./script.js"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
</head>
I am currently trying to push my website from my computer to a remote server, everything works fine except a few Bootstrap components (carousel and cards) which are animated with JS.
The problem is that locally it works just fine, my divs show up and do their things as expected, but on the remote server its just a blank area.
I tried replacing the CDNs and playing with them but nothing has changed.
Does anybody encountered this issue before or knows how to fix it?
Here are the CDN links in my <head>:
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu"
rel="stylesheet"
/>
<!-- CSS Stylesheets -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome -->
<script
defer
src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
></script>
<!-- Bootstrap Scripts -->
<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>
I do see errors in my console every time the page loads I get:
GET coowoork.000webhostapp.com/js/index.js net::ERR_ABORTED 404
index.html:168
GET coowoork.000webhostapp.com/images/techcrunch.png 404 VM143:137 DomDistiller debug level: 0
GET coowoork.000webhostapp.com/images/techcrunch.png 404
I am trying to study bootstrap-4 and that's will work but take the inspect element and show error in console like
Uncaught TypeError: Cannot read property 'fn' of undefined at setTransitionEndSupport
Why this type error show when I am loading css file like
<link rel="stylesheet" href="sourcz/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.min.css" type="text/css">
and js file are
<script type="text/javascript" src="sourcz/js/bootstrap.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.min.js"></script>
any way to slove this issue ? or loading problem !!
You need to load jquery first before bootstrap's js. And don't use minified, uncompressed file together. Use one of those.
css files like:
<link rel="stylesheet" href="sourcz/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="sourcz/css/bootstrap-grid.min.css" type="text/css">
js files like:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sourcz/js/bootstrap.bundle.min.js"></script>
I have my website which consists of two pages, plus my own style.css that works perfectly on my local. But when I FTP it onto the server of my hosting service, the index.html is unable to read from my style.css. I've checked the path. I've checked the order of declaration. I've maintained the same file structure and the same order of CSS declaration (global to local)on my local, and its working fine. Does anyone have suggestions?
Here is how the head section looks:
I had to declare a CSS style for a script I'm using in the document. Since it won't read my style.css I did an internal declaration.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Google Font: Source Code Pro-->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.min.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fancybox jQuery -->
<script src="fancybox/jquery.fancybox.min.js"></script>
<style type="text/css">
.menuActive {
background-color: #ffffff;
}
</style>
</head>
A relevant portion of my file structure on the server is as follows (tried including a screenshot but apparently I can't do that on Stackoverflow just yet):
Folders & files:
css
fancybox
files
img
wp_admin
wp-content
wp-includes
.ftpquota
.htaccess
default.htm
index.html
The img folder is on the same level as the css folder and the images are loading properly.
It's probally because on your server you are using https://
change your style links to something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> and remove http part
I am trying to convert my html5 template for my spring project. In this project i use thymeleaf template. In order to convert, i changed all scripts src into th:src or all style files (css files to) th:href etc. But design seems wrong.
<script th:src="#{/resources/js/jquery.min.js}" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Fonts -->
<link th:href="#{http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700}" rel='stylesheet' type='text/css'/>
<link th:href="#{http://fonts.googleapis.com/css?family=Pacifico}" href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<link th:href="#{/resources/font-awesome/css/font-awesome.css}" href='font-awesome/css/font-awesome.css' rel="stylesheet" type="text/css"/>
<!-- Bootstrap -->
<link th:href="#{/resources/bootstrap/css/bootstrap.min.css}" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Main Style -->
<link rel="stylesheet" th:href="#{/resources/style.css}" href="style.css" />
<!-- owl Style -->
<link rel="stylesheet" th:href="#{/resources/css/owl.carousel.css}" href="css/owl.carousel.css" />
<link rel="stylesheet" th:href="#{/resources/css/owl.transitions.css}" href="css/owl.transitions.css" />
<!-- rating -->
<script th:src="#{/resources/js/rate/jquery.raty.js}" src="js/rate/jquery.raty.js"></script>
<script th:src="#{/resources/js/labs.js}" src="js/labs.js" type="text/javascript"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" th:src="#{/resources/js/product/lib/jquery.mousewheel-3.0.6.pack.js}" src="js/product/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- fancybox -->
<script type="text/javascript" th:src="#{/resources/js/product/jquery.fancybox.js?v=2.1.5}" src="js/product/jquery.fancybox.js?v=2.1.5"></script>
<!-- custom js -->
<script th:src="#{/resources/js/shop.js}" src="js/shop.js"></script>
These are the converted tags. And also when i execute my page i get the exception shown below. This image is not exist in my bootstrap/img folder also it is not exist in template folder as well. But template seems to work without Thymeleaf.
jquery.fancybox.js?v=2.1.5:1994 GET http://localhost:8080/resources/bootstrap/img/glyphicons-halflings.png 404 (Not Found)
For those resources with "http://" prefix, no need to use th:href.
For those inner-site resources, "/resources/bootstrap/img/glyphicons-halflings.png", please remove "/resources", Spring Framework will append it by default.
Below is from Spring document for your reference.
By default Spring will serve static content from a directory called /static (or /public or /
resources or /META-INF/resources) in the classpath or from the root of the ServletContext.
It uses the ResourceHttpRequestHandler from Spring MVC so you can modify that behavior by
adding your own WebMvcConfigurerAdapter and overriding the addResourceHandlers method.