After adding Bootstrap in my layout app.blade.php,the default logout dropdown option is not showing.I add the Bootstrap MaxCDN from here.How to fix it?
my laravel version is 5.7.21
And my app.blade.php holds everything default,i just add Bootstrap MaxCDN in the head tag.
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" ></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
you need to delete laravel's bootstrap links (app.css and app.js) from layout.blade
Related
I have this problem where I had my site running. I used let's encrypt to install SSL certification. After this operation I changed my baseurl in both env and App.php files.
However my CSS files wont load (except one). I get 404 error for all except one file. https://subdomain.domain.com/plugins/jqvmap/jqvmap.min.css
I checked my paths I am sure the files are where they have to be.
Here some settings:
App.php:
public $baseURL = 'https://subdimain.domain.com/';
env:
app.baseURL = 'https://subdoian.domain.com/'
Here where I refer to my css files:
<script src="<?= base_url('plugins/jquery/jquery.min.js') ?>"></script>
<!-- jQuery UI 1.11.4 -->
<script src="<?= base_url('plugins/jquery-ui/jquery-ui.min.js') ?>"></script>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="<?= base_url('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') ?>">
<!-- iCheck -->
<link rel="stylesheet" href="<?= base_url('plugins/icheck-bootstrap/icheck-bootstrap.min.css') ?>">
<link rel="stylesheet" href="<?= base_url('plugins/bootstrap/css/bootstrap.min.css') ?>">
<!-- JQVMap -->
<link rel="stylesheet" href="<?= base_url('plugins/jqvmap/jqvmap.min.css') ?>">
<!-- Theme style -->
<link rel="stylesheet" href="<?= base_url('dist/css/adminlte.min.css') ?>">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="<?= base_url('plugins/overlayScrollbars/css/OverlayScrollbars.min.css') ?>">
<!-- Daterange picker -->
<link rel="stylesheet" href="<?= base_url('plugins/daterangepicker/daterangepicker.css') ?>">
<!-- summernote -->
<link rel="stylesheet" href="<?= base_url('plugins/summernote/summernote-bs4.min.css') ?>">
Here how they look like on page source:
<!-- jQuery -->
<script src="https://subdomain.domain.com/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://subdomain.domain.com/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/bootstrap/css/bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="https://subdomain.domain.com/dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="https://subdomain.domain.com/plugins/summernote/summernote-bs4.min.css">
I am pretty sure all files are available. I even copy the after the domain part and directly ls the file on my server and it returns the file name.
Why only one of my css files can be loaded?
Resetting and restarting the nginx solved the problem.
I use laravel 8, I'm creating a blog. The problem is when i click one of my posts for seeing the single blog page, the page don't come due to problem to see all the css.
'''
<!-- Bootstrap Css -->
<link rel="stylesheet" href="{{url('css/bootstrap.min.css')}}">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="{{url('css/font-awesome.min.css')}}">
<!-- Slick Nav CSS -->
<link rel="stylesheet" href="{{url('css/slicknav.min.css')}}">
<!-- Cube Portfolio CSS -->
<link rel="stylesheet" href="{{url('css/cubeportfolio.min.css')}}">
<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="{{url('css/magnific-popup.min.css')}}">
<!-- Fancy Box CSS -->
<link rel="stylesheet" href="{{url('css/jquery.fancybox.min.css')}}">
<!-- Nice Select CSS -->
<link rel="stylesheet" href="{{url('css/niceselect.css')}}">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="{{url('css/owl.theme.default.css')}}">
<link rel="stylesheet" href="{{url('css/owl.carousel.min.css')}}">
<!-- Slick Slider CSS -->
<link rel="stylesheet" href="{{url('css/slickslider.min.css')}}">
<!-- Animate CSS -->
<link rel="stylesheet" href="{{url('css/animate.min.css')}}">
<!-- Radix StyleShet CSS -->
<link rel="stylesheet" href="{{url('css/reset.css')}}">
<link rel="stylesheet" href="{{url('style.css')}}">
<link rel="stylesheet" href="{{url('css/responsive.css')}}">
<!-- Radix Color CSS -->
<link rel="stylesheet" href="{{url('css/color/color1.css')}}">
<link rel="stylesheet" href="#" id="colors">
'''
[What my single blog page looks like ][1]
if i don't use the stylesheets 'reset.css' it looks like :
single blog page without stylesheet reset.css
You can use asset helper instead of url
<link rel="stylesheet" href="{{asset('css/reset.css')}}">
The Mix manifest does not exist. (View: /var/www/vhosts/test.com.tr/laravel_emlak_app/resources/views/layouts/guest.blade.php)
In the local, there is no problem its working. But when i upload a server there is a problem. The website is working, but when i enter the including guest.blade.php there is a problem.
My guest.blade.php is in here
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light font-sans antialiased">
{{ $slot }}
</body>
</html>
What is the problem. If you help me i will be glad, thanks.
I solved
<script src="{{ mix('js/app.js') }}" defer></script>
Update like below:
<script src="{{ asset('js/app.js') }}" defer></script>
When i am including the file head.blade.php in views.home, JS and Bootstrap are working properly. But when i am trying to include head.blade.php in views.posts.create JS and bootstrap are not working. I found in previous questions that i shoult include them like that:
<link rel="stylesheet" href="rel="stylesheet" {{URL::asset('css/responsive.css')}}"> but didn't helped.
This are my routes:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
how it is
How should be
Try adding a / to the front of your url:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/animate.min.css" rel="stylesheet">
<link href="/css/prettyPhoto.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="/css/responsive.css" rel="stylesheet">
Note: folder path should be "project/public/css/"
This can also be done with the url() helper function:
<link href="{{ url('/css/responsive.css') }}" rel="stylesheet">
Take a look at the Laravel URL helper functions documentation for more information.
i'm implementing a responsive website with twitter bootstrap but on iexplorer 8 and below can't use media queries.
I create a simple example for try respond.js but mediaqueries continue not working on iexplorer 7-8, here is the html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<meta name="Description" content="Web description here" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="./css/styles.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./img/favicon.png">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./js/respond.min.js"></script>
<script src="./js/scripts.js"></script>
</body>
</html>
and here is the style.css:
#media only screen and (max-width: 38.75em) {
body {
background: green;
}
}
Regards
https://github.com/scottjehl/Respond#cdnx-domain-setup
CDN/X-Domain Setup
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
See cross-domain/example.html for a demo:
Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):
<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
Note: HUGE thanks to #doctyper for the contributions in the cross-domain proxy!
You need to include <script src="./js/respond.min.js"></script> above the </head> tag.
If you don't want to add any code related with respond.js, load bootstrap.min.css through CDN except for IE 8. For IE 8, use local static file.
<!--[if lte IE 8]>
<link rel="stylesheet" href="/path/to/bootstrap.min.css' %}" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" href="{CDN Address}" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" href="{CDN Address}" />
<!--<![endif]-->
Tested on IE 8 ~ 11 and other webkit browsers.