I am trying to create a standard menu-bar to use on all my site's pages.
I tried using the Create PHP header/footer but when I put my Bootstrap 4 navbar in, the drop-downs stopped working
Can anyone help?
The code to include the header is
<body>
<?php include("navbar.php"); ?>
<div class="container">
<h1>Home</h1>
</div>
with the Bootstrap head and scripts
navbar.php is
<?php
session_start();
// connect to database
include("connection.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MWfD Job Control</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- MWfD CSS -->
<link rel="stylesheet" type="text/css" href="mwfd.css">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">MWfD v2</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="customerentry.php?customerid=0"><span class="red">Job/Quote Entry</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Quotes</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="reportquotes.php?select=pending">Pending quotes</a>
<a class="dropdown-item" href="reportquotes.php?select=all">All quotes</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Job Progress</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item disabled" href="#">Unpriced jobs</a>
<a class="dropdown-item" href="reportengraving.php">Engraving jobs</a>
<a class="dropdown-item" href="reportlaser.php">Laser jobs</a>
<a class="dropdown-item" href="reportwoodwork.php">Woodwork jobs</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Reports</a>
</li>
</ul>
<form method="post" class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="number" id="jobField" name="jobField" placeholder="Job number">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="jobNoSearchBtn" name="searchBtn">Search</button>
</form>
</div>
</nav>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
The navbar is copied from the Bootstrap 4 navbar page, and works if it is left in the page.
When you say that the drop-downs stoppped working I'm assuming that you had them working before. Check that your links to the .js (and .css) files are still valid. Maybe open up the console and check the network.
Related
I'm having a problem with the navbar in Laravel 8; specifically the whole navbar is shown on the view but the dropdown is not working.
In fact, when I click, the drop-down menu does not open.
This is layout.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Document</title>
</head>
<body>
<x-navbar/>
{{$slot}}
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
This is navbar.blade.php:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
and the home.blade.php view is:
<x-layout>
<h1>Hello!!!</h1>
</x-layout>
Please try with this otherwise it might be a typo.
#include('inc.navbar')
// #include('FOLDER_NAME.FILE_NAME')
Also check documentation! https://laravel.com/docs/9.x/blade#including-subviews
This is not intended as an answer. Just to give some info that can't be formatted properly (or I don't know how to) in a comment. When view the source of the page in a browser, you should see the following three lines in the <head> section (or in other proper location). My navbar dropdown didn't work until these three lines showed up in the source. Initially I added the lines in a wrong blade file and they didn't end up in the page as expected.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Hello everybody i'm new to laravel and php.
today i was able to launch a local laravel website using php artisan serve.
but now i wanted to add a navbar with bootstrap and that worked, but in the navbar i want to add a brand.
unfortunately i have tried many ways to add the path for the image like using ../ and echo path but nothing seems to work. I'm probably doing something wrong :). help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YGP</title>
</head>
<style>
h1
{
font-family: 'Geneva', sans-serif;
}
</style>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="" width="50" height="50" class="d-inline-block align-top" alt="">
YGP
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="content">
</div>
</body>
<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>
</html>
and this is the folder layout:
the image
located in IMAGES/LOGO.PNG
Move your images folder into public. Then access them by
<img src="{{ asset('images/logo.png') }}" alt="" title="">
Anyways, I recommend you to check with Filesystem. The Laravel Flysystem integration provides simple to use drivers for working with local filesystems and Amazon S3. Even better, it's amazingly simple to switch between these storage options as the API remains the same for each system.
it should help!
For more detail document : https://laravel.com/docs/7.x/filesystem
I am very new to wordpress development and I tried adding bootstrap through the function.php file. I get the bootstrap styles but some of the things like the dropdown and the the expanding hamburger menu are not working. Can someone explain what I am doing wrong?
This is my functions.php file:
<?php
add_action('wp_enqueue_scripts' , 'vault_files');
function vault_files(){
wp_enqueue_style('vault_main_style', get_stylesheet_uri());
wp_enqueue_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js');
}
?>
my header.php file looks like this:
<!doctype html>
<head>
<!--the following function lets wordpress be in control of the head section
this is prevent our theme from breaking when we add other plugins. -->
<?php wp_head(); ?>
</head>
<body>
<header class="site-header">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--google fonts-->
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Patua+One&display=swap" rel="stylesheet">
<!--navbar starts here-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
You can just put bootstrap link here
Header.php
<head>
<?php wp_head(); ?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
ANOTHER WAY
Functions.php
Download all CDN and put in one or make tow different folder like css & js folder after put below code in functions.php file
<?php
/**
* Enqueue scripts and styles
*/
function your_theme_enqueue_scripts() {
// all styles
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 );
// all scripts
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );
I figured out the problem.
The problem was that i didnt include these lines which were in my footer.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
My page was working fine but I worked on different parts then returned to find it with only plain texts.
The extends line is working perfect with all other pages
What I tried so far:
Removed BOM and made sure that file is UTF-8
made sure #extends at the very start of the file
tried adding html tags
checked for any invalid characters
deleted the page and copy-pasted the code in a new one
made sure that other blade files in the same directory are working
the same so no parenting problem or a directory referencing problem
My blade page code (edit.blade.php):
#extends('layouts.app')
<body>
#section('content')
<div class="row col-md-9 col-lg-9 col-sm-9 float-left">
<div class="container">
<form method = "post" action = "{{route('companies.update',[$company->id]) }}">
{{csrf_field()}}
{{-- //work around to post --}}
<input type ="hidden" name= "_method" value = "put">
<div class="form-group">
<label for="comapny-name">Name</label>
<input type="string" class="form-control" name='name' id="comapny-name" aria-describedby="emailHelp" placeholder="Enter company name" required value="{{$company->name}}">
<small id="helpText" class="form-text text-muted">We'll never share your informations with anyone else but Khalood because he is the website devloper :).</small>
</div>
<div class="form-group">
<label for="company-content">Description</label>
<textarea name='description'style = "resize: vertical" class="form-control autosize-target text-left" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter description" rows="5" >
{{$company->description}}</textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 float-right">
<div class="sidebar-module">
<h4>Actions</h4>
<ol class="list-unstyled">
<li>View Companies</li>
<li>All Companies</li>
<li>Delete</li>
<li>Add new member</li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
#endsection
</body>
Route code from the Controller:
public function edit($id)
{
$company = Company::where('id',$id )->first();
return view('companies.edit',['company'=>$company]);
}
Also the action line that transfer you to controller:
<li>Edit</li>
app.blade.php follows. It should be working fine because I'm extending it in many other pages and works fine.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
{{-- adding the new theme css nad bootstraps we kedh --}}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
{{-- <title>Projects Managment Portal</title> --}}
{{-- <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Not working favicon
--}}
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Bootstrap core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
{{-- Favicons css for the nav bar icons--}}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}"><i class="fab fa-product-hunt"></i>rojacker</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#else
<li class="nav-item">
<a class="nav-link" href="{{ url('/') }}"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('companies.index') }}"><i class="far fa-building"></i> Companies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('projects.index') }}"><i class="fas fa-project-diagram"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('tasks.index') }}"><i class="fas fa-tasks"></i> Tasks</a>
</li>
{{-- Admin Panel --}}
#if (Auth::user()->role_id == 1)
<li class="dropdown">
<a id="navbarDropdown" class="nav-link dropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
Admin Panel <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="nav-link" href="{{ route('projects.index') }}"><i class="far fa-building"></i>Projects</a>
<a class="nav-link" href="{{ route('projects.index') }}"><i class="far fa-building"></i>Projects</a>
<a class="nav-link" href="{{ route('projects.index') }}"><i class="far fa-building"></i>Projects</a>
</div>
</li>
#endif
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre><i class="far fa-user-circle"></i>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();"><i class="fas fa-door-open"></i>
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
#include('partials.errors')
#include('partials.success')
<main class="py-4">
#yield('content')
</main>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
And web.php part containing companies part:
Route::middleware(['auth'])->group(function(){
// Creating Special Route to allow adding new project assigned to specific company id
Route::get('/projects/create/{company_id?}', 'ProjectsController#create');
Route::post('/projects/adduser/', 'ProjectsController#adduser')->name('projects.adduser');
Route::resource('companies','CompaniesController');
Route::resource('projects','ProjectsController');
Route::resource('roles','RolesController');
Route::resource('tasks','TasksController');
Route::resource('users','UsersController');
Route::resource('comments','CommentsController');
});
and link to image of page :
Page of the problem sceenshot
I FOUND THE SOLUTION !
it was in the app.blade.php when migrating to new design I (without noticing) got rid of the main css file and used only bootstrap file embedded in the new template, it works for the rest of the website ,but the edit page container (I don't know why specifically) needed the original native css file,just added it and it works like a charm!
Long Answer short, I was missing this line in the header of app.blade.php
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
I tried to include the bootstrap and jquery file into my project but when i do it. it gives me error. "Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. at bootstrap.min.js:6" this is my code:
<!DOCTYPE html>
<html>
<head>
<!-- Scripts -->
<script src="js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="js/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="js/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/w3.css">
<!-- Scripts -->
<style>
.topd{
background-color: #3498DB;
padding: 14px 16px;
font-family: 'Pacifico', cursive;
color : white;
/* color: rgba(255, 255, 255, 0.6); */
}
.zbody{
width: 90%;
margin-left: 5%;
}
</style>
</head>
<body>
<div class="topd">
<h1>Welcome to HopesV2.0</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light w3-teal" data-spy="affix" data-offset-top="197">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HR
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<BR>
<!-- Start Body -->
<div class="jumbotron zbody">
<h1>Basic Information</h1>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary " href="#" role="button">Submit</a>
</p>
</div>
<!-- End Body -->
</body>
</html>
i already download the files into my project but it keeps me getting errors
add your external files as follows
you can add js files in header or in footer but maintain this order
Load Jquery first and then add bootstrap js
Reference
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/w3.css">
<body>
<div class="topd">
<h1>Welcome to HopesV2.0</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light w3-teal" data-spy="affix" data-offset-top="197">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HR
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<BR>
<!-- Start Body -->
<div class="jumbotron zbody">
<h1>Basic Information</h1>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary " href="#" role="button">Submit</a>
</p>
</div>
</body>