In this tutorial we’ll take just a bit of time to focus on the bootstrap panel layout of this application. Panels in bootstrap are a nice way to create space and provide a visually pleasing layout. In version 4, we would probably use Bootstrap Cards which are also a nice layout element. For now however, we’ll deal with panel design ideas including making a better bootstrap panel layout and how to center a bootstrap panel. We’ll also look at moving the navigation elements to their own partial view vile and creating a link for logged in users to see their threads.
Making A Better Bootstrap Panel Layout
We have been using Bootstrap panels in this application and as you know a panel in bootstrap is just a bordered box with some padding around the content. On our main page, there is not much space in between panels – they just kind of all mesh together. We can fix that with the following markup which will provide a better visual effect.
index.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
@foreach($threads as $thread)
<div class="panel panel-default">
<div class="panel-heading">
<div class="level">
<h4 class="flex">
<a href="{{ $thread->path() }}">{{ $thread->title }}</a>
</h4>
<a href="{{$thread->path()}}">
<strong>{{$thread->replies_count}} {{ str_plural('reply', $thread->replies_count) }}</strong>
</a>
</div>
</div>
<div class="panel-body">
<div class="body">
{{ $thread->body }}
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
@endsection
How To Center A Bootstrap Panel
Our main thread page is looking better now. How about we make the profile page look nice as well. What we will do is reduce the width of the panel on the profile page, and center it. To center the bootstrap panel, you can wrap it within a div and make use of the .offset class in Bootstrap.
show.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="page-header">
<h1>
{{ $profileUser->name }}
<small>registered {{ $profileUser->created_at->diffForHumans() }}</small>
</h1>
</div>
@foreach($threads as $thread)
<div class="panel panel-default">
<div class="panel-heading">
<div class="level">
<span class="flex">
<a href="{{ route('profile', $thread->creator) }}">{{ $thread->creator->name }}</a> posted:
{{ $thread->title }}
</span>
<span>{{$thread->created_at->diffForHumans()}}</span>
</div>
</div>
<div class="panel-body">
{{ $thread->body }}
</div>
</div>
@endforeach
{{ $threads->links() }}
</div>
</div>
</div>
@endsection
Creating A Navigation Partial View
The layout view of app.blade.php is getting a little bloated. We can fix that by extracting the navigation elements to their own partial view file. We will update app.blade.php to make a simple call to @include(‘layout.nav’), the place all the navigation markup into that nav.blade.php file. Rest assured, everything works the same once this refactor is completed.
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- My Basic Styles -->
<style>
body {
padding-bottom: 100px;
}
.level {
display: flex;
align-items: center;
}
.flex {
flex: 1;
}
</style>
</head>
<body>
<div id="app">
@include('layouts.nav')
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>nav.blade.php
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/threads') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Browse <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a href="/threads">All Threads</a></li>
@if(auth()->check())
<li><a href="/threads?by={{ auth()->user()->name }}">My Threads</a></li>
@endif
<li><a href="/threads?popular=1">Popular</a></li>
</ul>
</li>
<li><a href="/threads/create">New Thread</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Channels
<span class="caret"></span></a>
<ul class="dropdown-menu">
@foreach($channels as $channel)
<li><a href="/threads/{{$channel->slug}}">{{$channel->name}}</a></li>
@endforeach
</ul>
</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@guest
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endguest
</ul>
</div>
</div>
</nav>Create A Profile Link For Logged In Users
We can now add a link to the right side of the navigation menu. Currently the application checks to see if the user is logged in, and if they are, a logout link is displayed. Let’s add another link for logged in users that will link directly to their profile so they can see all of their threads. Of course, this is quite easy. Find the code in nav.blade.php and edit where highlighted. Note we are able to link to a named route since we had set that up previously.
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@guest
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="{{ route('profile', Auth::user()) }}">My Threads</a></li>
How To Create A Bootstrap Panel Layout Summary
with the tweaks we have made to our html markup in this tutorial, we have our bootstrap panels looking nice and slick. We now know how to properly space out panels in addition to getting them centered just right on the page.
Refactor The Laravel Regex Tool To Use Repositories and Dependency Injection
CSS Flexbox Tutorial
Install Twitter Bootstrap
Laravel String Helpers
Axios Powered VueJS Form Component
Write A Great Blog Post
How to Learn Cisco Networking
3 Easy Steps to Creating Awesome Twitter lists via the Twitter API