{"id":6494,"date":"2019-09-13T08:46:24","date_gmt":"2019-09-13T08:46:24","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=6494"},"modified":"2021-11-16T10:14:03","modified_gmt":"2021-11-16T10:14:03","slug":"how-to-configure-laravel-5-5-with-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-configure-laravel-5-5-with-bootstrap-4\/","title":{"rendered":"How to configure Laravel 5.5 with Bootstrap 4"},"content":{"rendered":"\n
\n

Bootstrap 3 to bootstrap 4.3.1 upgrade in Laravel 5.5<\/h4>\nNote: Laravel 5.5 uses bootstrap 3 by default<\/span>\n<\/div>\n
\n
Steps involved in the upgrade<\/h5>\n
  1. Open gitbash in the home directory of the Laravel application and run the command given below:\n
    npm install bootstrap@4.3.1<\/code><\/pre>\n<\/li>\n
  2. Change needed in resources\\assets\\sass\\app.scss file:\n
    \n\/\/ Remove this line <\/i>\n
    @import \"~bootstrap-sass\/assets\/stylesheets\/bootstrap\";<\/code><\/pre><\/strike>\n\/\/ Add this line <\/i>\n
    @import \"node_modules\/bootstrap\/scss\/bootstrap\";<\/code><\/pre>\n<\/li>\n
  3. Change needed in  file resources\\assets\\sass\\_variables.scss\n
    \n\/\/ Remove this line from _variable.scss as “px” is not supported by bootstrap4.x.y <\/i>\n
    $font-size-base: 14px;<\/code><\/pre><\/strike>\n\/\/ Add this line. This will work for bootstrap4.x.y <\/i>\n
    $font-size-base: 0.875rem;<\/code><\/pre>\n<\/li>\n
  4. Change needed in file resources\\assets\\js\\bootstrap.js\n
    \n\/\/ Remove this line <\/i>\n
    require('bootstrap-sass');<\/code><\/pre><\/strike>\n\/\/ Add this line for using bootstrap 4.3.1<\/i>\n
    require('bootstrap');<\/code><\/pre>\n<\/li>\n
  5. Open gitbash in you project directory then run\n
    \n\/\/ Run following command <\/i>\n
    npm run dev<\/code><\/pre>
    \nNote: npm run dev compiles all the css and js files from resources\\assets to public dir<\/span>\n<\/li>\n<\/ol>\n<\/div>\n
    \n
    \n
    How to check if bootstrap 4.3.1 was successfully compiled?<\/h4>\n
    Open app.css from public\/css and check the bootstrap version mentioned in the top comments section. It must show something as shown below<\/p>\n
    @import url(https:\/\/fonts.googleapis.com\/css?family=Raleway:300,400,600);\/*!\n * Bootstrap v4.3.1 (https:\/\/getbootstrap.com\/)\n * Copyright 2011-2019 The Bootstrap Authors\n * Copyright 2011-2019 Twitter, Inc.\n * Licensed under MIT (https:\/\/github.com\/twbs\/bootstrap\/blob\/master\/LICENSE)\n *\/<\/code><\/pre>
    \n<\/div>\n
    \n
    \n
    How to use bootstrap 4.3.1 in your html or blade files?<\/h4>\n
    Import app.css from public\/css directory in blade or html file (s) using below code<\/p>\n
    <link rel=\"stylesheet\" href=\"{{asset('css\/app.css')}}\"><\/code><\/pre>
    \n<\/div>\n
    \n
    \n
    Do we need to do anything else? <\/h4>\n
    If you have used any class that’s not supported by bootstrap 4\nthen you need to make changes accordingly by going through the official documentation of bootstrap 4<\/p>\n<\/div>\n
    \n
    \n
    Possible Errors!<\/h4>\n\n
    Solve it by running following commands!<\/h6>\n
    npm install --save popper.js\nnpm run dev<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n