{"id":8616,"date":"2021-12-05T17:31:32","date_gmt":"2021-12-05T16:31:32","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=8616"},"modified":"2022-05-29T17:52:46","modified_gmt":"2022-05-29T15:52:46","slug":"laravel-tipps-und-tricks-bootstrap-verwenden","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2021\/12\/05\/laravel-tipps-und-tricks-bootstrap-verwenden\/","title":{"rendered":"Laravel | Tipps und Tricks | Bootstrap verwenden"},"content":{"rendered":"\n

Create and Prepare your Laravel Project<\/strong><\/h2>\n\n\n\n

Create Laravel App<\/h2>\n\n\n\n

Installing a fresh Laravel project by running the following steps:<\/p>\n\n\n\n

Create a new app<\/td>laravel new --stack livewire --jet --teams app<\/code><\/td><\/tr>
In the file .env<\/code> and change DB Connection to sqlite<\/td>DB_CONNECTION=sqlite<\/code><\/td><\/tr>
Create an empty file database\/database.sqlite<\/code><\/td><\/td><\/tr>
Start DB Migration<\/td>php artisan migrate<\/code><\/td><\/tr>
Start Laravel<\/td>php artisan serve<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Create Page for Bootstrap Demo<\/h3>\n\n\n\n

Create a file resources\/views\/using-bootstrap.blade.php<\/code> with the following content:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n<head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n    <title>Laravel: Using Bootstrap from Local<\/title>\n<\/head>\n\n<body class=\"antialiased\">\n   <main>\n      <div class=\"container py-4\">\n         <header class=\"pb-3 mb-4 border-bottom\">\n            <a href=\"\/\" \n               class=\"d-flex align-items-center text-dark text-decoration-none\">\n               <title>Bootstrap<\/title>\n               <span class=\"fs-4\">Bootstrap example<\/span>\n            <\/a>\n         <\/header>\n\n         <div class=\"p-5 mb-4 bg-light rounded-3\">\n            <div class=\"container-fluid py-5\">\n               <h1 class=\"display-5 fw-bold\">\n                  Using Bootstrap in Laravel Projects\n               <\/h1>\n               <p class=\"col-md-8 fs-4\">\n                  It's very easy to add the Bootstrap Framework \n                  to your Laravel Project.\n               <\/p>\n               <button class=\"btn btn-primary btn-lg\" type=\"button\">\n                  See how...\n               <\/button>\n            <\/div>\n         <\/div>\n      <\/div>\n   <\/main>\n<\/body>\n<\/html><\/pre>\n\n\n\n
Add the link \/using-bootstrap<\/code> to your App by adding this to route\/web.php<\/code><\/p>\n\n\n\n
Route::get('\/', function () {\n    return view('welcome');\n});\n\nRoute::get('\/using-bootstrap', function () {\n    return view('using-bootstrap');\n});<\/pre>\n\n\n\n
If you open http:\/\/127.0.0.1:8000\/using-bootstrap<\/a> in the Browser, you the demo page but with no bootstrap styling.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Adding Bootstrap to your Project<\/strong><\/h2>\n\n\n\n
You have three possibilities to add Bootstrap into your Larval Project<\/p>\n\n\n\n
Methode 1: Adding Bootstrap by a Link to CDN<\/h3>\n\n\n\n
Using CDN (Content delivery network<\/a>) is quite easy and simple for beginners. CDN is a network of servers providing the source files for almost every library used in front-end development.<\/p>\n\n\n\n
We need the references for bootstrap.min.css<\/code> and bootstrap.bundle.min.js<\/code><\/p>\n\n\n\n
You add Bootstrap<\/a> by inserting the following code snippets in your main Laravel Page.<\/p>\n\n\n\n
We will use the file resources\/views\/using-bootstrap.blade.php<\/a><\/code><\/p>\n\n\n\n
<link            \n    href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\"\n    rel=\"stylesheet\"\n    integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\"\n    crossorigin=\"anonymous\"\n><\/pre>\n\n\n\n
<script  src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/js\/bootstrap.bundle.min.js\"\n    integrity=\"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p\"\n    crossorigin=\"anonymous\">\n<\/script><\/pre>\n\n\n\n
The final file looks like this<\/a>:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Boostrap 5<\/title>\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\">\n<\/head>\n<body>\n    <div class=\"container\">\n        <div class=\"alert alert-success mt-5\" role=\"alert\">\n            Boostrap 5 is working!\n        <\/div>    \n    <\/div>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-gtEjrD\/SeCtmISkJkNUaaKMoLD0\/\/ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4\" crossorigin=\"anonymous\"><\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
Methode 2: Adding Bootstrap Public Folder<\/h3>\n\n\n\n
Download<\/a> Bootstrap 5 file and put the files into the folder app\/public\/assets\/vendor\/bootstrap\/5.2.0<\/code><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Add the following code snippets to your Laravel Page:<\/p>\n\n\n\n
<link href=\"{{ asset('assets\/vendor\/bootstrap\/5.2.0\/css\/bootstrap.min.css') }}\" rel=\"stylesheet\"><\/pre>\n\n\n\n
<script src=\"{{ asset('assets\/vendor\/bootstrap\/5.2.0\/js\/bootstrap.min.js') }}\"><\/script><\/pre>\n\n\n\n
The final files look like this<\/a>:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Boostrap 5<\/title>\n    <link rel=\"stylesheet\" href={{ asset('css\/bootstrap.min.css') }}>\n<\/head>\n<body>\n    <div class=\"container\">\n        <div class=\"alert alert-success mt-5\" role=\"alert\">\n            Boostrap 5 is working!\n        <\/div>    \n    <\/div>\n    <script src=\"{{ asset('js\/bootstrap.min.js') }}\"><\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
Methode 3: Adding Bootstrap 5 using Laravel Mix<\/h3>\n\n\n\n
In Laravel, all Frontend Modules are handles with Laravel Mix<\/a>. This is an elegant wrapper around Webpack, a Package manager for installing and managing node modules.<\/p>\n\n\n\n
To use Mix, you need to install NodeJS and NPM.<\/p>\n\n\n\n
After this, install all required modules of your starter project<\/p>\n\n\n\n
npm install<\/pre>\n\n\n\n
If you can see node_modules folder, this means npm is working.<\/p>\n\n\n\n
Now we need to install bootstrap  and the required modules<\/p>\n\n\n\n
npm install bootstrap --save-dev \nnpm install @popperjs\/core --save-dev<\/pre>\n\n\n\n
You will find the new packages in package.json<\/code><\/p>\n\n\n\n
    \"devDependencies\": {\n        \"@popperjs\/core\": \"^2.11.5\",\n        \"@tailwindcss\/forms\": \"^0.4.0\",\n        \"@tailwindcss\/typography\": \"^0.5.0\",\n        \"alpinejs\": \"^3.0.6\",\n        \"axios\": \"^0.25\",\n        \"bootstrap\": \"^5.1.3\",\n        \"laravel-mix\": \"^6.0.6\",\n        \"lodash\": \"^4.17.19\",\n        \"postcss\": \"^8.1.14\",\n        \"postcss-import\": \"^14.0.1\",\n        \"tailwindcss\": \"^3.0.0\"\n    }<\/pre>\n\n\n\n
Next, add the following line to resources\/css\/app.css<\/code>:<\/strong><\/p>\n\n\n\n
@import \"bootstrap\";<\/pre>\n\n\n\n
Add the following line to the file resources\/js\/bootstrap.js<\/code>:<\/p>\n\n\n\n
window._ = require(\"lodash\");\nimport \"bootstrap\";<\/pre>\n\n\n\n
Run the following command to build the frontend files (css and js)<\/p>\n\n\n\n
npm run development<\/pre>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
You done. See the result here: http:\/\/127.0.0.1:8000\/using-bootstrap<\/a><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Using Bootstrap <\/h2>\n\n\n\n
With the Bootstrap Framework installed, now we can style our Pages. An overview of what you can do could be found in the Documentation <\/a>or using the Examples<\/a>.<\/p>\n\n\n\n
We will work with the Examples, so download all examples to the folder resources\/views\/bootstrap<\/code><\/p>\n\n\n\n
With the Commandline and PowerShell, you could do this: Change to the folder and download the Archive with the examples<\/p>\n\n\n\n
\u276f Set-Location resources\\views\n\u276f Invoke-WebRequest https:\/\/github.com\/twbs\/bootstrap\/releases\/download\/v5.2.0-beta1\/bootstrap-5.2.0-beta1-examples.zip -O bootstrap.zip<\/pre>\n\n\n\n
Extract the archive, don’t forget the trailing dot  ‘.’<\/strong><\/p>\n\n\n\n
\u276f Expand-Archive .\\bootstrap.zip .<\/pre>\n\n\n\n
Rename the created folder<\/p>\n\n\n\n
\u276f Rename-Item .\\bootstrap-5.2.0-beta1-examples\\ bootstrap<\/pre>\n\n\n\n
\u276f Remove-Item bootstrap.zip<\/pre>\n\n\n\n
Now, we have all examples in the folder resources\/views\/bootstrap<\/code> and we are ready to play with them:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Modify the album example to use with Laravel<\/h3>\n\n\n\n
Modify the \/using-bootstrap<\/code> (resources\/views\/using-bootstrap.blade.php<\/code>) page<\/h4>\n\n\n\n
Add a sample text and a link to out Album Page<\/p>\n\n\n\n
<div class=\"p-5 mb-4 bg-light rounded-3\">\n    <div class=\"container-fluid py-5\">\n    ... Keep the original content\n    <\/div>\n\n    <div class=\"container-fluid py-5\">\n        <p class=\"col-md-8 fs-4\">\n            Just start with an <a href=\"bootstrap\/album\">example<\/a>\n        <\/p>\n    <\/div>\n<\/div><\/pre>\n\n\n\n
Modify routes\/web.php<\/code> to include a link to \/bootstrap\/album<\/h4>\n\n\n\n
Add the following lines to route\/web.php<\/code><\/p>\n\n\n\n
\nRoute::get('\/bootstrap\/album', function () {\n    return view('bootstrap\/album');\n});<\/pre>\n\n\n\n
Modify the Album Page<\/h4>\n\n\n\n
Rename and move the file resources\/views\/bootstrap\/album\/index.html<\/code> to resources\/views\/bootstrap\/album.blade.php<\/code>.<\/p>\n\n\n\n
Please note<\/strong>: We also changed the folder of the file. All examples’ files will be placed directly under the folder resources\/views\/bootstrap<\/code><\/p>\n\n\n\n
You can do this for all files with the following PowerShell Script:<\/p>\n\n\n\n
Get-ChildItem . index.html -recurse                        | `\n\n\n\n\n\n
Addon: Script <\/a>to modify all examples files<\/h2>\n\n\n\n
Remove-Item _web.php\n\nRemove-Item _links.php\nAdd-Content _links.php \"<div class='list-group w-auto'>\"\n\nfunction Add-Link($header, $link) {\n\nAdd-Content _links.php ('<a href=\"' + $link + '\" class=\"list-group-item list-group-item-action d-flex gap-3 py-3\" aria-current=\"true\">')\nAdd-Content _links.php '<img src=\"https:\/\/github.com\/twbs.png\" alt=\"twbs\" width=\"32\" height=\"32\" class=\"rounded-circle flex-shrink-0\">'\nAdd-Content _links.php '<div class=\"d-flex gap-2 w-100 justify-content-between\">'\nAdd-Content _links.php ('<div><h6 class=\"mb-0\">' + $header + '<\/h6><\/div>')\nAdd-Content _links.php '<p class=\"mb-0 opacity-75\">Another examples><\/p>'\nAdd-Content _links.php '<\/div>'\nAdd-Content _links.php '<small class=\"opacity-50 text-nowrap\">&nbsp;<\/small>'\nAdd-Content _links.php '<\/a>'\n\n}\n\n $LINK_OLD_JS=\"..\/assets\/dist\/js\/bootstrap.bundle.min.js\"\n$LINK_OLD_CSS=\"..\/assets\/dist\/css\/bootstrap.min.css\"\n \n $LINK_NEW_JS=\"{{ asset('js\/app.js')   }}\"\n$LINK_NEW_CSS=\"{{ asset('css\/app.css') }}\"\n\n\nGet-ChildItem . index.html -recurse                        `\n| \n| \n    (Get-Content $_\\index.html)         `\n    | \n    | \n    | Set-Content  $_\".blade.php\"\n\n    Add-Content _web.php \"Route::get('\/bootstrap\/$_', function () { return view('bootstrap\/$_'); });\"\n\n    Write-Host \"Add links to example $_\"\n    Add-Link $_ \"bootstrap\/$_\"\n}\n\nAdd-Content _links.php \"<\/div>\"<\/pre>\n\n\n\n
FAQ<\/h2>\n\n\n\n
Errors and Problems<\/h2>\n\n\n\n
Build Modules with npm run dev<\/code> shows up a warning<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
To see more information about the warning, add the following to the file webpack.mix.js after the first mix.js( ...<\/code><\/p>\n\n\n\n
mix.webpackConfig({\n    stats: {\n        children: true,\n    },\n});<\/pre>\n\n\n\n
Then, run npm run dev<\/code> again.<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
Create and Prepare your Laravel Project Create Laravel App Installing a fresh Laravel project by running the following steps: Create a new app laravel new –stack livewire –jet –teams app In the file .env and change DB Connection to sqlite DB_CONNECTION=sqlite Create an empty file database\/database.sqlite Start DB Migration php artisan migrate Start Laravel php artisan serve Create Page for Bootstrap Demo Create a file resources\/views\/using-bootstrap.blade.php with the following content: Add the link \/using-bootstrap to your App by adding this to route\/web.php If you open http:\/\/127.0.0.1:8000\/using-bootstrap in the Browser, you the demo page but with no bootstrap styling. Adding Bootstrap to […]<\/p>\n","protected":false},"author":1,"featured_media":7765,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[99,57],"tags":[],"class_list":["post-8616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-php"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/8616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=8616"}],"version-history":[{"count":33,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/8616\/revisions"}],"predecessor-version":[{"id":9001,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/8616\/revisions\/9001"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=8616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=8616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=8616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}