Skip to content

Instantly share code, notes, and snippets.

@ScottPhillips

ScottPhillips/app.blade.php

Forked from emmerink/app.blade.php
Created April 6, 2017 05:28
Show Gist options
  • Save ScottPhillips/c75b980ca50965d6e7c9ce8040057ce7 to your computer and use it in GitHub Desktop.
Save ScottPhillips/c75b980ca50965d6e7c9ce8040057ce7 to your computer and use it in GitHub Desktop.
Download ZIP
Laravel Blade layout for Twitter Bootstrap 4
Raw
app.blade.php
<!DOCTYPE html>
<html lang="nl">
<head>
<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="">
<link rel="icon" href="/favicon.ico">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<ul class="navbar-nav">
@if (Auth::guest())
<li class="nav-item"><a class="nav-link" href="{{ url('/login') }}">Login</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url('/register') }}">Register</a></li>
@else
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a class="nav-link" href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST"
style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>
@Classuposely1987
Copy link

The example is very practical and clear. Have fun playing Haunt The House!

@vhknjk64
Copy link

This Blade layout integrates Twitter Bootstrap 4 for a responsive and modern design. A great setup to streamline UI development with Laravel! Also, check the Outback Steakhouse price with the menu.

@MichaelConte
Copy link

To add Japanese username, you can update the Auth::user()->name to fetch and display the username in Japanese. If your application already supports Japanese usernames, it should display them accordingly. Here's how you can adjust the auth section in your Blade layout:

@if (Auth::guest())
    <li class="nav-item"><a class="nav-link" href="{{ url('/login') }}">Login</a></li>
    <li class="nav-item"><a class="nav-link" href="{{ url('/register') }}">Register</a></li>
@else
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
           aria-expanded="false">
            {{ Auth::user()->name }} <span class="caret"></span>
        </a>

        <ul class="dropdown-menu" role="menu">
            <li>
                <a class="nav-link" href="{{ url('/logout') }}"
                   onclick="event.preventDefault();
                             document.getElementById('logout-form').submit();">
                    Logout
                </a>

                <form id="logout-form" action="{{ url('/logout') }}" method="POST"
                      style="display: none;">
                    {{ csrf_field() }}
                </form>
            </li>
        </ul>
    </li>
@endif

Assuming your backend user model and database are set up to store and handle Japanese characters, this template will display usernames correctly. If you need to support multiple languages or scripts in your application, make sure your database character set is set to utf8mb4 to accommodate a wide range of characters.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment