#Part10 laravel 5 Blog Tutorial : Adding Bootsrtap Theme in Laravel 5.3

How to make a blog using Laravel 5.3? create simple CRUD operation in laravel 5.3 part10. Add bootstrap theme into laravel 5 project for beginners

Create blog using Laravel 5.3 - This lesson bout how to add Bootstrap theme into Laravel project, at the privews lessons, we have learn about Bootstrap theme in Laravel 5.3, please read Adding Bootstrap Theme to Laravel 5.3.

What we needed?

  1. Download Bootstrap file - to download bootstrap theme going here http://getbootstrap.com/
  2. next, we will add Bootstrap theme into our project, stored on \public folder
  3. create new page for master template (master.blade.php)
  4. create bootstrap theme for all pages
After you hasbeen downloaded the Bootstrap files, please extract it into our project >> in the "public folder".

Next, we will create an master page, that using bootstrap theme, create new page stored on \resources\views and rename it with "master.blade.php"

master.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>My First Blog</title>
    <!-- Bootstrap core CSS -->
    <link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="{{ asset('/css/ie10-viewport-bug-workaround.css') }}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="{{ asset('/css/blog.css') }}" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="{{ asset('/js/ie-emulation-modes-warning.js') }}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="/blog">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>
    <div class="container">
      <div class="blog-header">
        <h1 class="blog-title">My First Blog</h1>
        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
      </div>
      <div class="row">
        <div class="col-sm-8 blog-main">
          <div class="blog-post">
            @yield('content')
          </div><!-- /.blog-post -->
        </div><!-- /.blog-main -->
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About Us</h4>
            <p>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="sidebar-module">
            @yield('sidebar2')
          </div>
        </div><!-- /.blog-sidebar -->
      </div><!-- /.row -->
    </div><!-- /.container -->
    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
    <script src="{{ asset('/js/bootstrap.min.js') }}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{{ asset('/js/ie10-viewport-bug-workaround.js') }}"></script>
  </body>
</html>

After done, your bootsrap master has created, next we will change all pages to make Bootstrap theme.

index.blade.php

@extends('master')
{{ Session::get('message') }}
@section('content')
<h1>My First Blog</h1>
@foreach ($blogs as $blog)
  <h2><a href="/blog/{{ $blog->id }}">{{ $blog->title }}</a></h2>
  {{ date('F d, Y', strtotime($blog->created_at)) }}
  <p>{{ $blog->description }}</p>
  <a href="/blog/{{ $blog->id }}/edit">Edit this Post</a><br>
  <form class="" action="/blog/{{ $blog->id }}" method="post">
    <input type="hidden" name="_method" value="delete">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="delete">
  </form>
  <hr>
@endforeach
{!! $blogs->links() !!}
@stop
@section('sidebar2')
  <h4>Archives</h4>
  @foreach ($blogs as $blog)
    <ol class="list-unstyled">
      <li><a href="/blog/{{ $blog->id }}">{{ $blog->description }}</a></li>
    </ol>
  @endforeach
@stop

Adding Bootsrtap Theme in Laravel 5.3

edit.blade.php

<!-- @if (count($errors) > 0)
  <ul>
    @foreach ($errors->all() as $error )
      <li>{{ $error }}</li>
    @endforeach
  </ul>
@endif -->
@extends('master')
@section('content')
  <h2>Edit Article Post</h2>
  <form class="" action="/blog/{{ $blog->id }}" method="post">
    <input type="text" name="title" value="{{ $blog->title }}" placeholder="this is title"><br>
    {{ ($errors->has('title')) ? $errors->first('title') : '' }} <br>

    <textarea name="description" rows="8" cols="40" placeholder="this is description">{{ $blog->description }}</textarea><br>
    {{ ($errors->has('description')) ? $errors->first('description') : '' }} <br>

    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="edit">
  </form>
@stop
// or you can add some links in your sidebar

next, on the single page

detail.blade.php

@extends('master')
@section('content')
  <h2>{{ $blog->title }}</h2>
  <p>
    {{ $blog->description }}
  </p>
@stop

Create.blade.php

<!-- @if (count($errors) > 0)
  <ul>
    @foreach ($errors->all() as $error )
      <li>{{ $error }}</li>
    @endforeach
  </ul>
@endif -->
@extends('master')
@section('content')
  <h2>Add new post</h2>
  <form class="" action="/blog" method="post">
    <input type="text" name="title" value="" placeholder="this is title"><br>
    {{ ($errors->has('title')) ? $errors->first('title') : '' }} <br>
    <textarea name="description" rows="8" cols="40" placeholder="this is description"></textarea><br>
    {{ ($errors->has('description')) ? $errors->first('description') : '' }} <br>
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" name="name" value="post">
  </form>
@stop

Video Tutorial Adding Bootsrtap Theme in Laravel 5.3




See you next lessons ....

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: #Part10 laravel 5 Blog Tutorial : Adding Bootsrtap Theme in Laravel 5.3
#Part10 laravel 5 Blog Tutorial : Adding Bootsrtap Theme in Laravel 5.3
How to make a blog using Laravel 5.3? create simple CRUD operation in laravel 5.3 part10. Add bootstrap theme into laravel 5 project for beginners
https://4.bp.blogspot.com/-DueI0nyXlAw/V-MJVGJ9iFI/AAAAAAAACi8/mSU_cHEkbPk5ztTJl39YSnh_yKgqMhgKwCLcB/s320/laravel-tutorial-for-beginner.jpg
https://4.bp.blogspot.com/-DueI0nyXlAw/V-MJVGJ9iFI/AAAAAAAACi8/mSU_cHEkbPk5ztTJl39YSnh_yKgqMhgKwCLcB/s72-c/laravel-tutorial-for-beginner.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/09/laravel-5-blog-tutorial-adding-bootstrap-theme.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/09/laravel-5-blog-tutorial-adding-bootstrap-theme.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy