Skip to content

Instantly share code, notes, and snippets.

@emmerink

emmerink/app.blade.php

Last active February 16, 2021 09:24
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save emmerink/10b68ea27747970279c6c1f0c7b0d8f7 to your computer and use it in GitHub Desktop.
Save emmerink/10b68ea27747970279c6c1f0c7b0d8f7 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>
@wilga
Copy link

wilga commented Feb 15, 2017 •
edited

line 60
change <ul class="dropdown-menu" role="menu">
to <ul class="dropdown-menu bg-inverse" role="menu">

and, thank you for sharing.

@nicodevs
Copy link

Thanks for sharing!

@black2002
Copy link

Great! just migrated to b4. All menu is shrinked. Thanks for helping.

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