How to Avoid conflict between jquery UI and Bootstrap - html

I am creating jquery collapsible set with sidebar and a search button. I need to apply bootstrap for this. If i include the bootsrap css file the collapsible is not visible.
Please help me to solve this problem.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="css/demo_collapsible.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<link href="css/jqueryscripttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
<!--<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />-->
</head>
<body>
</body>
</html>

This might help you jquery-ui-bootstrap
Also look at jQuery.noConflict().

You can customize your bootstrap to omit some features in order to prevent confliction: http://getbootstrap.com/customize/

Related

Why my layout doesn't work properly in welcome.blade

i'm working on a laravel project and i prepared a layout for welcome.blade but css and html don't work properly . somehow the project can't read them .
i make you sure that my paths is correct
even i change folders and paths in public but it didn't work
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="description" content="MealOrder">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="HiBootstrap">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Fafo - قالب رستوران و فست فود</title>
<link rel="icon" src="/assets/images/tab.png" type="image/png" sizes="16x16">
<link rel="stylesheet" src="/assets/css/bootstrap-reboot.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/bootstrap.rtl.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/animate.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/owl.carousel.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/owl.theme.default.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/responsive.css" type="text/css" media="all" />
#livewireStyles
</head>
<body>
.
.
.
.
<script src="/assets/js/jquery-3.5.1.min.js"></script>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/jquery-ui.js"></script>
#livewireScripts
</body>
</html>
I assume you use Laravel 9 because Laravel now is using vite instead of webpack/laravel-mix as we used to see, and the way vite injects styles & scripts in layouts pages are not the same as it was.
you will need to add the following blade directive into your layout file:
#vite(['resources/css/app.css', 'resources/js/app.js'])
and then re-run npm run build or npm run dev to re-bundle your assets.
more about Bundling Assets (Vite)
its better change all src to asset() for example:
instead of
write
<link rel="stylesheet" src="{{asset('assets/css/animate.min.css')}}" type="text/css" media="all" />
and for scripts do same

Html Icon not shown beside title

I have a favicon Logo for a website inside the folder "public/img/". This is the code that I have written:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/img/Logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap"
rel="stylesheet"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
But favicon is not displayed. Why is it not visible?
Try to refresh the cache by holding down СTRL + F5. Or test your app with another browser.
If that doesn't help, try this option:
<link rel="icon" type="image/png" href="/img/Logo.png" />

Head element's going inside body

The code is....
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Videos - Pranked Bros</title>
<link rel="icon" type="image/png" href="img/logo-7.png">
</head>
<body>
<!-- other codes -->
</body>
in the browser it's like:
So the code inside head tags goes inside the body tag. In this case, what should I do?
There's probably something wrong with the tags before the part, maybe this is the problem.

My stylesheet isn't linking to my HTML

Really new to HTML & CSS but have created sites in the past and linked the CSS to the HTML quite easily. I can't understand where I'm going wrong (although I am sure it's massively obvious!) Any help would be great, thank you in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Katgrog</title>
<meta name="description" content="My first try at my own website">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
Copy and paste it in your html, it will work. It seems you are forgetted to add slash(/) at the end before >.
you need to specify the type, so do something along these lines: (The type is not required)
<link rel="stylesheet" type="text/css" href="theme.css">

CSS not linking when uploaded to a website

Can any of you spot an error here?? If there is one... I'm going bananas here... CSS page is not linking with html when uploaded to server. And W3 validation says "No Character Encoding Found! Falling back to UTF-8." ???
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text</title>
<meta name="description" content="Another text">
<meta name="author" content="Content Text">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="initial-scale=1" />
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'><!-- About page Services -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> <!-- H1, h2 -->
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'><!-- p -->
<!-- Stylesheets -->
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/grid.css" rel="stylesheet" type="text/css" />
<link href="css/style3.css" rel="stylesheet" type="text/css" />
Do you need
#charset "utf-8";
/* CSS Document */
before starting css files?
<?php include('inc/header.php'); ?>
<div id="index" class="container">
<div class="container">
That ok to do isn't it? this include line is top of the page and above all other content
Your index file is not getting parsed as php. 1) Did you give it a .php extension? 2) Does your server have php installed on it?