MDBootstrap In Laravel

Source: /g/xampp8/htdocs/laravel/ForTesting_Purposes/laravel-for-testing

Branch: mdb

--------------------------------------------------------------

1. Create a new Laravel Project:

composer create-project laravel/laravel mdbootstrap
cd mdbootstrap
code .

2. Create a test blade template
$ code resources/views/test.blade.php

Add to test.blade.php (minimized code with MDB Header Added)
header Code from: https://mdbootstrap.com/docs/standard/navigation/headers/

 <!DOCTYPE html><html lang="><en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>MDB In Laravel</title><!-- Font Awesome --><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/><!-- Google Fonts --><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/><!-- MDB --><link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.1.0/mdb.min.css" rel="stylesheet"/></head><body><header><!-- Navbar --><nav class="navbar navbar-expand-lg bg-body"><div class="container-fluid"><button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-target="#navbarExample01" aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation" ><i class="fas fa-bars"></i></button><div class="collapse navbar-collapse" id="navbarExample01"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item active"><a class="nav-link" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Features</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">About</a></li></ul></div></div></nav><!-- Navbar --><!-- Jumbotron --><div class="p-5 text-center bg-body-tertiary"><h1 class="mb-3">Heading</h1><h4 class="mb-3">Subheading</h4><a data-mdb-ripple-init class="btn btn-primary" href="" role="button">Call to action</a></div><!-- Jumbotron --></header></body></html>

3. Add a new route:
$ code routes/web.php

Add Route to web.php:

Route::get('test', function () {return view('test');});

4. Start Dev Server:
$ php artisan serve

5. Open in Browser: http://127.0.0.1:8000/test

MDB UI Kit:

Follow the instructions from the MDB npm installation instructions: https://mdbootstrap.com/docs/standard/getting-started/installation/#section-npm

6. Install mdb-ui kit.
$ npm i mdb-ui-kit

7. Add to app.js
$ code resources/js/app.js

import * as mdb from 'mdb-ui-kit'; //lib
import { Input} from 'mdb-ui-kit'; //module

8. Add to App.css
$ code resources/css/app.css

@import '~mbd-ui-kit/css/mdb.min.css'

9. Add to Index.html

<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.1.0/mdb.umd.min.js"
></script>

Note: CDN css Links already included in step 2 of test.blade.php

10. Open in Browser: http://127.0.0.1:8000/test

Resources:

15t@LAPTOP-D80P87P4 MINGW64 /g/xampp8/htdocs/laravel/ForTesting_Purposes/laravel-for-testing (mdb)
$ git add .

15t@LAPTOP-D80P87P4 MINGW64 /g/xampp8/htdocs/laravel/ForTesting_Purposes/laravel-for-testing (mdb)
$ git commit -m "Added mdboostrap ui kit to /test test.blade.php template"
[mdb 1ea854b] Added mdboostrap ui kit to /test test.blade.php template
 4 files changed, 6 insertions(+)
 create mode 100644 resources/views/test.blade.php

57wXgYIJG6Q