Laravel 5 Tutorial : Adding Bootstrap Theme to Laravel 5.3

Laravel 5 Tutorial for beginner : How to add Twitter Bootstrap theme v3.3.7 to Laravel 5.3, Easy to Ause Bootstrap Theme in your Laravel 5 Apps.

Twitter Bootstrap theme can integrate with your Laravel 5.3 Apps with easy. Bootstrap is a front-end framework that is great for creating a view for a mobile device (mobile phone, smartphone etc.) in order to accelerate and simplify to development of websites. Bootstrap provides HTML, CSS and Javascript is ready to use and easy to develop.

Please Read
  1. Eloquent ORM (Object Relation Maping) in Laravel 5.3
  2. Database Migration & Schema in Laravel 5.3
Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

How to Adding Twitter Bootstrap to Your Laravel 5 App?

Laravel 5 tutorials At the previews Lessons we have install and create new project/app then rean how to use Blade Template in laravel, now we will integrate our laravel Apps with Bootstrap theme with Blade Template.

# Download Bootstrap (currently v3.3.7)

you can download twitter bootstrap at http://getbootstrap.com/getting-started/

download and extract all folders to our Laravel project, just copy CSS, FONT, JS folder into our project \public folder.

Adding Bootstrap Theme to Laravel 5.3

After copyed, we will create new file in the Views folder resources\views

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="{{ asset('favicon.ico') }}">
    <title>www.hc-kr.com</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/jumbotron-narrow.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="container">
      <div class="header clearfix">
          @yield('header')
      </div>

      <div class="jumbotron">
        @yield('sidebar-up')
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          @yield('sidebar-left')
        </div>

        <div class="col-lg-6">
          @yield('sidebar-right')
        </div>
      </div>

      <footer class="footer">
        @yield('footer')
      </footer>

    </div> <!-- /container -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{{ asset('js/ie10-viewport-bug-workaround.js') }}"></script>
  </body>
</html>

you will know "master.blade.php" is using for if you has learn about Templating in Laravel, that master.blade.php will can include to any page. just learn about Blade Template in Laravel.

Now, Create new file for our new page, rename it with "firstbootstrap.blade.php" in Views folder resources\views

firstbootstrap.blade.php

@extends('master')

@section('header')
  <nav>
    <ul class="nav nav-pills pull-right">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">About</a></li>
      <li role="presentation"><a href="#">Contact</a></li>
    </ul>
  </nav>
  <h3 class="text-muted">www.hc-kr.com</h3>
@stop

@section('sidebar-up')
  <h1>www.hc-kr.com</h1>
  <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
@stop

@section('sidebar-left')
  <h4>Judul 1</h4>
  <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

  <h4>Judul 2</h4>
  <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

  <h4>Judul 3</h4>
  <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@stop
@section('sidebar-right')
  <h4>Judul 4</h4>
  <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

  <h4>Judul 5</h4>
  <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

  <h4>Judul 6</h4>
  <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@stop
@section('footer')
  <p>&copy; 2016 www.hc-kr.com, Inc.</p>
@stop

and then, create ne routes to routes\web.php

Route::get('/bootstrap', function () {
    return view('firstbootstrap');
});

Try to access your apps following by this command, http://localhost:8080/bootstrap

Adding Bootstrap Theme to Laravel 5.3
You can use more Twitter Bootstrap theme, find it here http://getbootstrap.com/getting-started/

Video Tutorial Adding Bootstrap Theme to Laravel 5.3


Get more tutorial about Laravel 5.3 to your email everyday for free by following our newsletter.
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: Laravel 5 Tutorial : Adding Bootstrap Theme to Laravel 5.3
Laravel 5 Tutorial : Adding Bootstrap Theme to Laravel 5.3
Laravel 5 Tutorial for beginner : How to add Twitter Bootstrap theme v3.3.7 to Laravel 5.3, Easy to Ause Bootstrap Theme in your Laravel 5 Apps.
https://2.bp.blogspot.com/-qz77bV19688/V8cbVQjDLaI/AAAAAAAACZ4/EDHCh87Vc8Ej25C0Ofvm2EPK8sIdZfAcwCLcB/s320/laravel-tutorial-for-beginner.png
https://2.bp.blogspot.com/-qz77bV19688/V8cbVQjDLaI/AAAAAAAACZ4/EDHCh87Vc8Ej25C0Ofvm2EPK8sIdZfAcwCLcB/s72-c/laravel-tutorial-for-beginner.png
KODE AJAIB
https://www.kodeajaib.com/2016/09/laravel-5-tutorial-adding-bootstrap-theme.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/09/laravel-5-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