Bootstrap Carousel Produces "Blank Images" - image

My Bootstrap Carousel produces “Blank Images”. Is there something wrong with the html? Do I need to edit the CSS file? Thanks in advance!
<div class="row align-items-center my-5">
<div class="col-lg-7">
<div id="homeCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/900X400.jpg" class="d-block w-100" alt="" />
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="" />
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="" />
</div>
</div>
<a class="carousel-control-prev" href="#homeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#homeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>


Remove these two blank carousel-items
<div class="carousel-item">
<img src="" class="d-block w-100" alt="" />
</div>

Related

Laravel Livewire chat Messages do not push upwards when new chat message comes in

I am developing A laravel Livewire chat. I am able to create new chats but the does not push up the previous message. Instead, it remains invisible behind the chat box. When a pusher message comes in, the chat message div remains at its original position.
Here is my mobile.blade.php
<div class="chatArea changeW" wire:poll>
<div class="chatMessages">
#foreach($messagesByDay as $day=>$messages)
<p class="timeId">
#if($day == date('Y-m-d'))
Today
#else
{{$day}}
#endif
</p>
#foreach($messages as $message)
#if($message->from_id != auth()->user()->id)
{{-- youra --}}
<div class="message">
<div class="prof">
<p><img src="{{$user->avatar()}}" style="width:30px"></p>
</div>
<div class="messArea">
<div class="textM">{{$message->body}}</div>
<p id="sname">{{$user->name}}</p>
</div>
</div>
{{-- yuors --}}
#else
{{-- mine --}}
<div class="message mMess 1122334" data-number="1122334">
<div class="messArea">
<div class="textM">{{$message->body}}</div>
</div>
<div class="prof">
<p><img src="{{auth()->user()->avatar()}}" style="width:30px"></p>
</div>
</div>
#endif
#endforeach
#endforeach
<!--End of Chat cont-->
</div>
#livewire('chat.messages.mobile.create',['user'=>$user])
</div>
This is the code at create.blade.php
<div class="messageBox">
<div wire:loading>
sending...
</div>
<div class="textA"><textarea id="message" wire:model.lazy="body" rows="1" cols="30"
placeholder="Type your message here"></textarea></div>
<button wire:click.prevent="save({{$user}})" id="send" class="button-s1" tooltip="Send" flow="left"><span class="material-icons headerIcon"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send"
viewBox="0 0 16 16">
<path
d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
</svg></span></button>
</div>
My Code at Messages.blade.php
<div class="chat-conversation p-3 p-lg-4" data-simplebar="init">
<ul class="list-unstyled mb-0" wire:poll>
#foreach($messagesByDay as $day=>$messages)
<li>
<div class="chat-day-title">
<span class="title">
#if($day == date('Y-m-d'))
Today
#else
{{$day}}
#endif
</span>
</div>
</li>
#foreach($messages as $message)
#if($message->from_id == auth()->user()->id)
<li class="right">
<div class="conversation-list">
<div class="chat-avatar">
<img src="{{$message->from->avatar()}}" alt="">
</div>
<div class="user-chat-content">
<div class="ctext-wrap">
<div class="ctext-wrap-content">
<p class="mb-0">
{{$message->body}}
</p>
<p class="chat-time mb-0">
<i class="ri-time-line align-middle"></i>
<span class="align-middle">{{date('H:i A',strtotime($message->created_at))}}</span>
</p>
</div>
<div class="dropdown align-self-start">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy
<i class="ri-file-copy-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Save
<i class="ri-save-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Forward
<i class="ri-chat-forward-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Delete
<i class="ri-delete-bin-line float-end text-muted"></i>
</a>
</div>
</div>
</div>
<div class="conversation-name">{{$message->from->name}}</div>
</div>
</div>
</li>
#else
<li>
<div class="conversation-list">
<div class="chat-avatar">
<img src="{{$user->avatar()}}" alt="">
</div>
<div class="user-chat-content">
<div class="ctext-wrap">
<div class="ctext-wrap-content">
<p class="mb-0">
{{$message->body}}
</p>
<p class="chat-time mb-0">
<i class="ri-time-line align-middle"></i>
<span class="align-middle">{{date('H:i A',strtotime($message->created_at))}}</span>
</p>
</div>
<div class="dropdown align-self-start">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="ri-more-2-fill"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy
<i class="ri-file-copy-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Save
<i class="ri-save-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Forward
<i class="ri-chat-forward-line float-end text-muted"></i>
</a>
<a class="dropdown-item" href="#">Delete
<i class="ri-delete-bin-line float-end text-muted"></i>
</a>
</div>
</div>
</div>
<div class="conversation-name">{{$user->name}}</div>
</div>
</div>
</li>
#endif
#endforeach
#endforeach
</ul>
</div>

Carousel doesn't work bootstrap 5. Someone can help me?

Someone can help me? I'm using bootstrap carousel in my webpage but carousel doesn't work. What is the reason? Does it need something extra for it to work?
<div class="container">
<div id="carouselExampleIndicators" class="aşağı-kısım-carousel-slide carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('/img/manzara.jpg')}}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('/img/manzara.jpg')}}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('/img/manzara.jpg')}}" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>

I think this is from:
or to the class (you changed the name of the class)
or bootstrap files you may have inserted incorrectly.
Try to execute this code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://thumbor.forbes.com/thumbor/fit-in/1200x0/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5d35eacaf1176b0008974b54%2F0x0.jpg%3FcropX1%3D790%26cropX2%3D5350%26cropY1%3D784%26cropY2%3D3349" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://img.etimg.com/thumb/msid-73268134,width-640,resizemode-4,imgsize-35417/surprise-heard-of-a-sony-car.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I am creating a web application using Laravel, vue-router and MySQL database

I am creating a web application using Laravel, vue-router and MySQL database. I created a dashboard component and a bank component. When I run my project, the Dashboard component loads with all the CSS and javascript. But when I change to the Bank component, CSS may be loaded but some javascript cannot run. After refreshing the entire bank component page, the previously non-running javascript then executes.
this is my web.php file
<?php
Route::get('/{any}', function () {
return view('welcome');
})->where('any', '.*');
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
This is my index.js file
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Dashboard from "./components/Dashboard";
import Bank from "./components/Bank";
import Demo from "./components/Demo";
import Company from "./components/Company";
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard,
},
{
path: '/bank',
name: 'bank',
component: Bank,
},
{
path: '/company',
name: 'company',
component: Company
},
],
})
const app = new Vue({
el: '#app',
router,
});
This is my Dashboard Component file
<template>
<div class="container-fluid">
<!-- Page-Title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Dashboard</h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item">Stexo</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
</div>
</div>
<!-- end row -->
</div>
<div class="row">
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-cube-outline bg-primary text-white"></i>
</div>
<div>
<h5 class="font-16">Active Sessions</h5>
</div>
<h3 class="mt-4">43,225</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">75%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-briefcase-check bg-success text-white"></i>
</div>
<div>
<h5 class="font-16">Total Revenue</h5>
</div>
<h3 class="mt-4">$73,265</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">88%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-tag-text-outline bg-warning text-white"></i>
</div>
<div>
<h5 class="font-16">Average Price</h5>
</div>
<h3 class="mt-4">447</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">68%</span></p>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-heading p-4">
<div class="mini-stat-icon float-right">
<i class="mdi mdi-buffer bg-danger text-white"></i>
</div>
<div>
<h5 class="font-16">Add to Card</h5>
</div>
<h3 class="mt-4">86%</h3>
<div class="progress mt-4" style="height: 4px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted mt-2 mb-0">Previous period<span class="float-right">82%</span></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Area Chart</h4>
<div id="morris-area-example" class="morris-charts morris-chart-height"></div>
</div>
</div>
</div>
<!-- end col -->
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Donut Chart</h4>
<div id="morris-donut-example" class="morris-charts morris-chart-height"></div>
</div>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Friends Suggestions</h4>
<div class="friends-suggestions">
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-2.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Ralph Ramirez</h5>
<p class="text-muted">3 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-3.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Patrick Beeler</h5>
<p class="text-muted">17 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-4.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Victor Zamora</h5>
<p class="text-muted">12 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="border-bottom position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-5.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">Bryan Lacy</h5>
<p class="text-muted">18 Friend suggest</p>
</div>
</div>
</a>
<a href="#" class="friends-suggestions-list">
<div class="position-relative">
<div class="float-left mb-0 mr-3">
<img src="front/images/users/user-6.jpg" alt="" class="rounded-circle thumb-md">
</div>
<div class="suggestion-icon float-right mt-2 pt-1">
<i class="mdi mdi-plus"></i>
</div>
<div class="desc">
<h5 class="font-14 mb-1 pt-2 text-dark">James Sorrells</h5>
<p class="text-muted mb-1">6 Friend suggest</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Sales Analytics</h4>
<div id="morris-line-example" class="morris-chart" style="height: 360px"></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Recent Activity</h4>
<ol class="activity-feed mb-0">
<li class="feed-item">
<div class="feed-item-list">
<p class="text-muted mb-1">Now</p>
<p class="font-15 mt-0 mb-0">Andrei Coman posted a new article: <b class="text-primary">Forget UX Rowland</b></p>
</div>
</li>
<li class="feed-item">
<p class="text-muted mb-1">Yesterday</p>
<p class="font-15 mt-0 mb-0">Andrei Coman posted a new article: <b class="text-primary">Designer Alex</b></p>
</li>
<li class="feed-item">
<p class="text-muted mb-1">2:30PM</p>
<p class="font-15 mt-0 mb-0">Zack Wetass, <b class="text-primary"> Developer Moreno</b></p>
</li>
<li class="feed-item pb-1">
<p class="text-muted mb-1">12:48 PM</p>
<p class="font-15 mt-0 mb-2">Zack Wetass, <b class="text-primary">UX Murphy</b></p>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- START ROW -->
<div class="row">
<div class="col-xl-12">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title mb-4">Active Deals</h4>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Amount</th>
<th scope="col">Contact</th>
<th scope="col">Location</th>
<th scope="col" colspan="2">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Philip Smead</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$9,420,000</td>
<td>
<div>
<img src="front/images/users/user-2.jpg" alt="" class="thumb-md rounded-circle mr-2"> Philip Smead
</div>
</td>
<td>Houston, TX 77074</td>
<td>15/1/2018</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Brent Shipley</td>
<td><span class="badge badge-warning">Pending</span></td>
<td>$3,120,000</td>
<td>
<div>
<img src="front/images/users/user-3.jpg" alt="" class="thumb-md rounded-circle mr-2"> Brent Shipley
</div>
</td>
<td>Oakland, CA 94612</td>
<td>16/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Robert Sitton</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$6,360,000</td>
<td>
<div>
<img src="front/images/users/user-4.jpg" alt="" class="thumb-md rounded-circle mr-2"> Robert Sitton
</div>
</td>
<td>Hebron, ME 04238</td>
<td>17/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>Alberto Jackson</td>
<td><span class="badge badge-danger">Cancel</span></td>
<td>$5,200,000</td>
<td>
<div>
<img src="front/images/users/user-5.jpg" alt="" class="thumb-md rounded-circle mr-2"> Alberto Jackson
</div>
</td>
<td>Salinas, CA 93901</td>
<td>18/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
<tr>
<td>David Sanchez</td>
<td><span class="badge badge-success">Delivered</span></td>
<td>$7,250,000</td>
<td>
<div>
<img src="front/images/users/user-6.jpg" alt="" class="thumb-md rounded-circle mr-2"> David Sanchez
</div>
</td>
<td>Cincinnati, OH 45202</td>
<td>19/1/2019</td>
<td>
<div>
Edit
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- END ROW -->
</div>
</template>
<script>
export default {}
</script>
This is my Bank component file
<template>
<div class="container-fluid">
<!-- Page-Title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Add Bank</h4>
</div>
<!-- <div class="col-sm-6">-->
<!-- <ol class="breadcrumb float-right">-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'dashboard' }">Dashboard</router-link></li>-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'bank' }">Master</router-link></li>-->
<!-- <li class="breadcrumb-item"><router-link :to="{ name: 'bank' }">Bank</router-link></li>-->
<!-- <li class="breadcrumb-item active">Add Bank</li>-->
<!-- </ol>-->
<!-- </div>-->
</div>
<!-- end row -->
</div>
<!-- Starting of Button Section-->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
<div class="button-items">
<button type="button" data-toggle="modal" data-target="#elegantModalForm" class="btn btn-outline-primary waves-effect waves-light">Add Bank</button>
</div>
</div>
</div>
</div>
</div>
<!-- Starting of Modal -->
<!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning modal-lg" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="modal-header text-center">
<h3 class="modal-title w-100 font-weight-bold py-2 white-text" id="myModalLabel"><strong>Add Bank Information</strong></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="container-fluid">
<form class="form-group">
<div class="row">
<div class="col-md-12 md-form">
<input type="text" class="form-control">
<label>Name of Bank *</label>
</div>
</div>
<div class="row">
<div class="col-md-12 md-form">
<textarea type="text" class="form-control md-textarea"></textarea>
<label>Address / Branch *</label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<select class="browser-default custom-select">
<option value="">Account Holder Name</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Poland</option>
<option value="5">Japan</option>
</select>
</div>
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Bank Account *</label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Bank Routing *</label>
</div>
<div class="col-md-6 md-form">
<input type="date" class="form-control datepicker">
<label>Opening Bal Date * </label>
</div>
</div>
<div class="row">
<div class="col-md-6 md-form">
<input type="text" class="form-control">
<label>Opening Balance *</label>
</div>
<div class="col-md-6 md-form">
<input type="text" class="form-control datepicker">
<label>Current Cheque no * </label>
</div>
</div>
</form>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<button class="btn btn-outline-danger" data-dismiss="modal">Close</button>
<button class="btn blue-gradient">Add</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
<!-- Ending of Modal -->
<!--Ending of Button Section-->
</div>
<!-- end container-fluid -->
</template>
<script>
export default {}
</script>

How to extend views with shared Layout in Laravel?

I have a collection of views that i want them to share a specific layout.
I created the layout master.blade.php ,in a folder i named it layouts.
From the docs , i found that i need to add the tag #extends and section('content') in my view so it fits under the layout :
#extends('layouts.master')
#section('content')
<div style="background-color:white;width:963px;height:100%">
<div style="padding-top:100px;padding-bottom:200px">
<h2 style="color:sandybrown; text-align:center"><b style="padding-right:40px">Contactez nous</b></h2>
<br />
<hr width="50%" color="gris" />
<div class="row">
<div class="col-md-6" style="padding:5%">
<form method="post" asp-controller="Home" asp-action="RegisterContact" style="padding-left:20px">
<label><span style="color:blue">Nom et prenom</span></label>
<br />
<input size=" 40" style="border-color:darkorange" asp-for="Name"/>
<br />
<label><span style="color:blue">E-mail</span></label>
<br />
<input size=" 40" asp-for="Email" style="border-color:darkorange" />
<br />
<label><span style="color:blue">Message</span></label>
<br />
<textarea rows="10" cols="40" style="border-color:darkorange" asp-for="Message"></textarea>
<br />
<button style="background-color:blue;"><span style="color:white">ENVOYER</span></button>
....
#endsection
but when i click in the link in the view's link in the navbar , this is what i get ?:
so is there a missing part in the logic ?
Update:
the view and the layout are both under the same folder :
C:\xampp\htdocs\laravel\resources\views\layouts
the view's name wasn't ending with .blade.php , but doing so now i get an exception :
InvalidArgumentException in FileViewFinder.php line 137: View [layouts.WhoWeAre] not found.
this is the body code of the layout :
</div>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav ml-auto">
<li class="nav-item navbar1 ">
<a class="nav-link" href="{{action('HomeController#WhoWeAre')}}"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" ><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
<div>
<img src="images/decoupage/nawrass-logo.png " class="rounded-circle bg-light">
</div>
<div class="navbar-collapse collapse w-50 ">
<ul class="navbar-nav mr-auto">
<li class="nav-item navbar2">
<a class="nav-link" >
<span style="text-decoration: underline;"><B>Contactez-nous</B></span>
</a>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/location.png" style="padding-top: 7px">
<span style="padding-top: 15px">Djerba Houmet Souk</span>
</li>
<li class="nav-item navbar2">
<div class="row">
<div class="col-md-3" style="padding-top: 7px">
<img src="images/decoupage/phone.png">
</div>
<div class="col-md-8" style="font-size: 16px;">
<span>75 620 660 </span>
<br>
<span>98 816 962</span>
</div>
</div>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/fb.png" style="padding-top: 7px">
</li>
</ul>
</div>
</nav>
<div class="container " style="min-height:100%; padding-left:120px;flex:1;display:flex;flex-direction:column;">
<div style="flex:1;display:flex;flex-direction:column;">
#yield('content')
</div>
</div>
<div id="footer">
<div class="jumbotron " style="margin-top:0 ; background-color:blue">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="card mb-3 " style="background-color: blue">
<div class="row no-gutters">
<div class="col-md-3 ">
<img src="images/decoupage/logo-white.png" class="card-img" alt="my card image">
</div>
<div class="col-md-9 ">
<div class="card-body ">
<p class=" card-text text-white " style="font-size: 14.45px">
Bienvenu a centre de formation ennawres: formation en coiffure hommes et dames Langues {francais, anglais...} ,photographie..et plusieurs d'autres..
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 ">
<br/>
<img src="images/decoupage/phone.png">
<span class="text-white">
75620660-98815952
</span>
<br>
<br>
<img src="images/decoupage/location.png">
<span class="text-white">
Houmet Souk Djerba,1Km Ajim
</span>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-4 text-white">
PROPULSE PAR MOSAIQUE WEB COPYRIGHT 2019
</div>
</div>
</div>
</div>
</div>
For information the click in the navbar "Qui sommes nous" link trigger this controller method:
public function WhoWeAre()
{
return view('layouts/WhoWeAre');
}
and this is routes.php :
Route::get('/', function () {
return view('welcome');
});
Route::get('/whoweare', 'HomeController#WhoWeAre');

How to not display dropt list in fine uploader?

I need help with this.
I am using fineUploader and I would like to not display the upload list.
My current template :
<div>
<script type="text/template" id="qq-template-manual-trigger">
<div class="qq-uploader-selector baz-uploader" qq-drop-area-text="{{dropZoneText}}">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="buttons">
<div class="qq-upload-button-selector qq-upload-button">
<div>{{::selectFilesButton}}</div>
</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>{{::processing}}</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner baz-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" width="30" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Annuler</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Réessayer</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
<div id="baz-fine-uploader"></div>
I have tried to remove the ul tag "qq-upload-list-selector" directly but the drop zone is no longer display.

Resources