I'm trying to link my local bootstrap, and style file to my html file, but none of them works.
Here's my html file:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
My css files are located in a folder called css.
I got these files there:
The htdocs folder I have this:
JUST TRY THIS ---
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
These Codes are Wrong ---
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
These are Correct ---
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
Related
I have a basic CRUD web app with Spring and thymeleaf, I have a fragmented navbar that I use in each page but whenever I have a page with a datetimepicker the navbar is conflicted (basically navbar parts are mixed up and don't work). So below is my home page, which works fine (no datetimepicker), but in my newEmployees page I have the same bootstrap, jQuery etc links and sources as 'home' but as soon as I add the datetimepicker code the navbar is wrong, also I have to remove:
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
for the datetimeicker to work, but with my minimal jquery understanding, isn't that whats is needed for the navbar? Is something conflicting here?
home.html works fine.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css" >
<link rel="stylesheet" type="text/css" href="/css/ines.css" >
<title>InES Employee</title>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<div th:replace="/fragments/deleteModal :: deleteModal"></div>
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
<script th:src="#{/js/home.js}"></script>
</body>
</html>
home.js
$(' #deleteButton').on('click', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('#deleteModal #delRef').attr('href', href);
$('#deleteModal').modal();
});
setInterval(function(){ $(".alert").fadeOut(); }, 3000);
newEmployee.html cant get navbar to work
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>InES Employee</title>
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css">
<link rel="stylesheet" type="text/css" href="/css/newEmployee.css">
<!--datetimepicker code-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.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.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<!-- <script type="text/javascript" src="/js/jquery-3.6.0.js"></script>-->
<!-- <script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>-->
<script th:src="#{/js/newEmployee.js}"></script>
</body>
</html>
newEmployee.js
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
correct navbar
incorrect navbar
Thanks in advance!
How do I add line breaks when using the Thymeleaf template layout?
Here is my html base code.
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">Layout title</title>
<!-- Common -->
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/
awesomeapp.css}">
<link rel="shortcut icon" th:href="#{/images/favicon.ico}">
<script type="text/javascript" th:src="#{/sh/scripts/codebase.js}"></
script>
<!-- Add -->
<th:block th:replace="${links}" />
</head>
And this is the html main code.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>Main title</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
</head>
<body>
main content
</body>
</html>
Here is the result rendered by <th:block th:replace="${links}" />.
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"><link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui .css}">
But what I want is:
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
Making the line break like this is what I want.
How can I solve this problem?
Greeting, I'm unable to align date picker inline the code which I used is below. date picker element goes into a new line rather on the same line.
your help is very much appreciated. thank you.
$('#datepicker').datepicker({
uiLibrary: 'bootstrap'
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap DatePicker</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p> On this date <input id="datepicker" width="270" /> i accept the offer.</p>
</body>
</html>
$('#datepicker').datepicker({
uiLibrary: 'bootstrap'
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap DatePicker</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div> On this date <div style="display:inline-block"><input id="datepicker" width="270" /> </div> i accept the offer.</div>
</body>
</html>
In this case Sass is working normally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a title</h1>
</body>
</html>
Sass Project.
$primary-color:red;
h1{
color:$primary-color;
}
But when I put a link from bootstrap or ionicons , Sass stops working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h1>This is a title</h1>
</body>
</html>
As explained by Sunny Patel in a comment, you should be putting your bootstrap.min.css before other CSS:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
when i open http://localhost/Website/home.html my css stylesheet is not showing up. Maybe it is something with the bootstrap css? I am new to both bootstrap and XML. Here is my home.html head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>****</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
My style.css is located in the same folder as my home.html
EDIT: some of my css are now showing, but not all. Strange..
EDIT 2: Apparently the bootstrap CSS did something fishy, it works if i changed the order to this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />