I am using Laravel 6 and working on a blade.php file. Also, I'm using tailwindCss and tailwindUi in parts of my code. I have a layout file with the main nav bar working, on the other pages when I #section('content') nothing is being outputted and isn't showing in the browser. If I exclude the #section the code is passed through the browser but then pushes my nav bar down which isn't good. Hoping its a silly mistake but if you have had this issue and know of a fix please do share.
LAYOUT File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.0.1/dist/alpine.js" defer></script>
<title>#yield('title')</title>
</head>
<div>
<nav x-data="{ open: false }" #keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
Home
Contact
Blog
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button #click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
Home
Contact
Blog
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli#gmail.com</div>
</div>
</div>
INDEX File (blog)
#extends('layout')
#section('title', 'Blog')
#section('content')
<div class='blog-form'>
<h1>My Blog</h1>
<h3>A place where I create posts on random things that interest me</h3>
<form action="/blog" method="post">
<input type="text" name="title" autocomplete="off">
#csrf
<button>Add Blog Post</button>
</form>
<p style="color: red">#error('title') {{ $message }} #enderror</p>
<ul>
#forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
#empty
<li><h3>No Blog Posts Yet</h3></li>
#endforelse
</ul>
</div>
#endsection
HomeController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
public function index()
{
return view ('/home');
}
public function about()
{
return view ('/about');
}
public function contact()
{
return view ('/contact');
}
}
WEB Route
use App\Mail\WelcomeMail;
Route::get('/email', function() {
return new WelcomeMail();
});
Route::get('/home', 'HomeController#index');
Route::get('/about', 'HomeController#about');
Route::get('/contact', 'HomeController#contact');
Route::get('/blog', 'BlogController#index');
Route::post('/blog', 'BlogController#store');
Route::get('/subscribers', 'SubscriberController#index');
Route::get('/subscribers/create', 'SubscriberController#create');
Route::post('/subscribers', 'SubscriberController#store');
Route::get('/subscribers/{subscriber}', 'SubscriberController#show');
Route::get('/subscribers/{subscriber}/edit', 'SubscriberController#edit');
Route::put('/subscribers/{subscriber}', 'SubscriberController#update');
Route::delete('/subscribers/{subscriber}', 'SubscriberController#destroy');
You need to use #yield('content') in your layout file.
Layout.blade.php
<html>
<body>
<nav>
</nav>
#yield('content')
</body>
</html>
now you can use #section('content') in extened files.
index.blade.php
#extends('layout')
#section('content')
<div class="">
...
...
</div>
#endsection
Related
Been googling around for multiple hours, I want to change the color of the svg of one element during the onClick event, turns out it either style all the elements in the for loop, or just the first one. I added my ejs and toggleSvg() js script here. Hope you can help me.
ejs snippet:
(look for "svg here")
<div class="max-w-5xl mt-14 mx-auto sm:max">
<% posts.forEach(post=> { %>
<div class="my-20">
<div class=" px-2 mb-2 flex items-center justify-between">
<div class="flex items-center">
<div class="border border-gray-300 p-1 rounded-full w-10 h-10 flex items-center bg-white">
<img
src="<%= post.merchant.image %>"
alt="..."
class="w-10"
loading="lazy"
/>
</div>
<p class="pl-5"><%= post.merchant.name %></p>
</div>
<div>
<!--svg here!-->
<svg id="test" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" onclick="toggleSvg()" >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
</div>
</div>
<!--image carousell-->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide w-10 h-20 bg-black ">
<div class="justify-center flex ">
<img
src="<%= post.imageUrl[0] %>"
alt="..."
class="h-72"
loading="lazy"
/>
</div>
</div>
<div class="swiper-slide bg-black">
<div class="justify-center flex bg-black">
<img
src="<%= post.imageUrl[1] %>"
alt="..."
class="h-72"
loading="lazy"
/>
</div>
</div>
<div class="swiper-slide bg-black">
<div class="justify-center flex bg-black">
<img
src="<%= post.imageUrl[2] %>"
alt="..."
class="h-72"
loading="lazy"
/>
</div>
</div>
<div class="swiper-slide bg-black">
<div class="justify-center flex bg-black">
<img
src="<%= post.imageUrl[3] %>"
alt="..."
class="h-72"
loading="lazy"
/>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div class="">
<p><span class="font-bold pr-3"><%= post.merchant.name %></span><%= post.description %></p>
</div>
</div>
<% }) %>
</div>`enter code here`
toggleSvg() js:
<script>
function toggleSvg() {
svgElem = document.getElementById("test");
if(svgElem.style.fill === 'red'){
svgElem.style.fill = 'none';
}else{
svgElem.style.fill = 'red';
}
}
</script>
you're using a id in a loop
the can only select one element, if you want to color all svg you can use a class, if you want to color a specific svg you can do it like this
onclick="toggleSvg(this)"
this way you pass the current element when you click
<script>
function toggleSvg(svgElem ) {
if(svgElem.style.fill === 'red'){
svgElem.style.fill = 'none';
}else{
svgElem.style.fill = 'red';
}
}
</script>
I want to include this Summernote rich text editor in Laravel Jetstream Livewire Alpine.
I tried to extend the possibility to include additional Javascript and CSS by using the #stack() directive, right in the layouts/app.blade.php file:
<!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 rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
#stack('css')
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#stack('js')
#livewireScripts
</body>
</html>
Inside my blade view I included the summernote js and css CDN links as follows:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<form action="{{ route('post') }}" method="post">
#csrf
<label class="block text-gray-700 text-sm font-bold mb-2" for="fuente">
Your text
</label>
<div id="summernote">
<textarea name="fuente" id="fuente" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none" rows="4"></textarea>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 border border-blue-700 rounded">
Send
</button>
</form>
</div>
</div>
</div>
</x-app-layout>
#push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
#endpush
#push('js')
<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/summernote#0.8.18/dist/summernote-lite.min.js"></script>
<script>
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 120,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
</script>
#endpush
However, the editor is not loading. If I load the source code of the blade view, I don't see the Summernote javascript.
What am I missing? How do I make it work?
My bad.
I've realized I have to include the #stack() directives inside the <x-app-layout> tag. For example, just before the end of the </x-app-layout>.
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<form action="{{ route('post') }}" method="post">
#csrf
<label class="block text-gray-700 text-sm font-bold mb-2" for="fuente">
Your text
</label>
<div id="summernote">
<textarea name="fuente" id="fuente" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none" rows="4"></textarea>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 border border-blue-700 rounded">
Send
</button>
</form>
</div>
</div>
</div>
#push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
#endpush
#push('js')
<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/summernote#0.8.18/dist/summernote-lite.min.js"></script>
<script>
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 120,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
</script>
#endpush
</x-app-layout>
And finally, that fixed it.
I am using Laravel 8.
My Livewire Controller
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class SearchDropdown extends Component
{
public $search = 'hello there';
public function render()
{
return view('livewire.search-dropdown');
}
}
Livewire blade
<div class="relative mt-3 md:mt-0">
<input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
<div class="absolute top-0">
<svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
</div>
<div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
<ul>
<li class="border-b border-gray-700">
{{ $search }}
</li>
<li class="border-b border-gray-700">
Avengers
</li>
<li class="border-b border-gray-700">
Avengers
</li>
</ul>
</div>
</div>
I have included Livewire in my main.blade file
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Movie App</title>
<link rel="stylesheet" href="{{ URL::asset('/css/main.css') }}">
<livewire:styles />
</head>
And this before the end of the body
<livewire:scripts />
Now when I write something in my searchbox, it should have updated as i write, but it's not updating instead showing "hello there" - initial value of the $search variable.
P.S :
This is what its showing in my browser. For some reason livewire.js is getting error. How to fix this?
I had the same issue, fixed it by adding
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"></script>
in the main layout file because apparently, it was missing that.
Add
#livewireStyles
<link rel="stylesheet"
href="{{ mix('css/app.css') }}">
and
<script src="{{ mix('js/app.js') }}"></script>
#livewireScripts
at your main layouts file, I think it should be worked
Try wrapping your content with a div and container class in your Livewire blade.
<div class="container">
<div class="relative mt-3 md:mt-0">
<input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
<div class="absolute top-0">
<svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
</div>
<div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
<ul>
<li class="border-b border-gray-700">
{{ $search }}
</li>
<li class="border-b border-gray-700">
Avengers
</li>
<li class="border-b border-gray-700">
Avengers
</li>
</ul>
</div
</div>
I faced this problem and I solve it by just clearing cache ...
try to add this code snippet to your web route for fast clearance of caches
Route::get('/clear', function() {
Artisan::call('cache:clear');
Artisan::call('route:cache');
Artisan::call('view:clear');
Artisan::call('config:cache');
return "all cleared ...";
});
or just in cmd
Php artisan cache:clear
Php artisan route:cache
.... and so on
I followed the advise by #Kamlesh Paul and it worked.
you need to setup livewire base url
in config/livewire.php
'asset_url' => env('APP_URL', 'http://localhost'),
then in .env
APP_URL=your_app_url
I am creating a blog using Laravel 5.8. I have a created master layout containing navbar, sidebar and footer. Rest areas are yielded in the subsequent layouts. Since I have included sidebar in the master layout file, my query is how can i load categories in the sidebar from the database.
The current situation is: I have kept the categories static.
Main Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Aarthna Maheshwari" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="A fully functional blog made from scratch using HTML5, CSS3, Javascript, Boostrap and Laravel In India" />
<link rel="stylesheet" type="text/css" href="{{asset('/css/bootstrap.min.css')}}" />
<link rel="stylesheet" type="text/css" href="{{ asset('/css/blog.css') }}" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet" />
<title>Laravel Blog - A complete blog with admin panel created using HTML and Laravel with Bootstrap</title>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
Create
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
</div>
</div>
</header>
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 text-muted" href="#">World</a>
<a class="p-2 text-muted" href="#">India</a>
<a class="p-2 text-muted" href="#">Technology</a>
<a class="p-2 text-muted" href="#">Design</a>
<a class="p-2 text-muted" href="#">Culture</a>
<a class="p-2 text-muted" href="#">Business</a>
<a class="p-2 text-muted" href="#">Politics</a>
<a class="p-2 text-muted" href="#">Opinion</a>
<a class="p-2 text-muted" href="#">Science</a>
<a class="p-2 text-muted" href="#">Health</a>
<a class="p-2 text-muted" href="#">Style</a>
<a class="p-2 text-muted" href="#">Travel</a>
</nav>
</div>
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0">Continue reading...</p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
Continue reading
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
Continue reading
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
</div>
</div>
<main role="main" class="container">
<div class="row">
<div class="col-md-8 blog-main">
#yield('content')
</div><!-- /.blog-main -->
<aside class="col-md-4 blog-sidebar">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="p-4">
<h4 class="font-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li>March 2014</li>
<li>February 2014</li>
<li>January 2014</li>
<li>December 2013</li>
<li>November 2013</li>
<li>October 2013</li>
<li>September 2013</li>
<li>August 2013</li>
<li>July 2013</li>
<li>June 2013</li>
<li>May 2013</li>
<li>April 2013</li>
</ol>
</div>
<div class="p-4">
<h4 class="font-italic">Elsewhere</h4>
<ol class="list-unstyled">
<li>GitHub</li>
<li>Twitter</li>
<li>Facebook</li>
</ol>
</div>
</aside><!-- /.blog-sidebar -->
</div><!-- /.row -->
</main>
<footer class="blog-footer">
<p>Blog template built using Bootstrap by Aarthna Maheshwari.</p>
<p>
Back to top
</p>
</footer>
</body>
</html>
Expected output:
The app should load the categories from the database.
You can use view composer for to load your category each time your sidebar template are loaded.
see here : https://laravel.com/docs/5.7/views#view-composers
Can someone help me out here - how do I take the following that I have put together and make each image panel where I have band logos the same height and width? Still very very new to uikit so having trouble following online docs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>4WAPEX3</title>
<link rel="stylesheet" href="css/uikit.css" />
<script src="jquery/jquery-2.1.3.js">
</script> <script src="js/uikit.min.js">
</script>
</head>
<body>
<ul class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5" data-uk-grid-margin>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold ">
<div class="uk-panel-teaser">
<img src="images/metallica.jpg" alt="metallica" width="100%"/>
</div> Metallica
</div>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold">
<div class="uk-panel-teaser">
<img src="images/nin.jpg" alt="nine inch nails" width="100%"/>
</div> Nine Inch Nails
</div>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold">
<div class="uk-panel-teaser">
<img src="images/tbe.jpg" alt="the butterfly effect" width="100%"/>
</div> The Butterfly Effect
</div>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold">
<div class="uk-panel-teaser">
<img src="images/tool.jpg" alt="tool" width="100%"/>
</div> Tool
</div>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold">
<div class="uk-panel-teaser">
<img src="images/tfn.jpg" alt="twelve foot ninja" width="100%"/>
</div> Twelve Foot Ninja
</div>
</div>
</div>
</html>
</body>
Thanks