How to Install Bootstrap 5 in Masonite 3

In This tutorial, We Will learn how to install Boostrap 5 in Masonite 3.

Masonite uses Laravel Mix, which provides an effortless way to handle asset compiling like SASS, LESS and more.

You can begin by cloning or downloading and unzipping this demo project I created on Github. It is a simple bootstrap project that I created with masonite which contains the bootstrap classes, but it doesn't contain any bootstrap files.

DilanTsasi/masonite-bootstrap-demo

if you download and install the demo project above, run craft serve And you will see a page that looks like the one below

In your Terminal, make sure you are in your project directory and run the following command.

npm install

Installing Bootstrap css

The command above will install everything you need to start compiling assets with masonite.
Once installation is done, you will see a new folder in our application called node_modules. This is where all assets that you include in your application through the package manager will live.
Run the following command to install bootstrap in your application.

npm install bootstrap

Once the bootstrap is installed, you will find a new bootstrap folder in the node_modules folder. We can now go ahead to configure and use bootstrap in our application.

Open up the storage/static/sass/style.scss file in your application, and you will find some default code. You can choose to delete it or leave it the way it is. I will delete a huge section of the code and only leave the section that defines the default style on the application body. So my code will look like this.

$font-stack:    'Raleway', sans-serif;
$text-color: #636b6f;
$background-color: #fff;
html, body {
   background-color: $background-color;
   color: $text-color;
   font-family: $font-stack;
   font-weight: 100;
   height: 100vh;
   margin: 0;
}

At the top of the code above, I will add a new Line to install bootstrap. It will look something like this.

/* importing bootstrap */
@import '../../../node_modules/bootstrap/scss/bootstrap.scss';

Adding the Javascript.

You Should only add the Javascript in case you need it. to add the Javascript, add the following line in your storage/static/js/app.js file.

// importing boostrap JS
import "bootstrap";

Boostrap Javascript Depends on Popper Js so We will need to install popper js if we have to use Bootstrap JS., so all we will have to do is run the following command in our terminal

npm i @popperjs/core

After it Installs, we add it before the import bootstrap command in the app.js file. so the new file should look like this

//importing popperjs
import "@popperjs/core";
// importing boostrap JS
import "bootstrap";

Head over to the webpack,mix.js file in the root folder, and make sure you find code that looks like the one below. If you don't find it, make sure to add it.

mix.js('storage/static/js/app.js', 'storage/compiled/js')
  .sass('storage/static/sass/style.scss', 'storage/compiled/css');

Once we compile our assets(Boostrap and any other library you wish to use), the code that will we added in storage/static/js/app.js will be compiled and saved in storage/compiled/js/app.jsAnd that wich we added in storage/static/sass/style.scss will be compiled and saved in storage/compiled/css/style.css.

Compiling Assets.

To compile our assets, all we have to do is run the following command. it will build

npm run dev

after the command runs successfully, you will notice that it adds some lines of code in the following files
storage\compiled\css\style.css
storage\compiled\js\app.js.

in our resources\templates\app\base.html file, we can make changes so that our new HTML file is loaded. so change the following line in your code

<link href="/static/style.css" rel="stylesheet" type="text/css">

To this

<link href="/compiled/css/style.css" rel="stylesheet" type="text/css">

Bootstrap is now installed, configured, and ready to use. So if we run craft serve and head to our browser, we should see something like what we have below.

You will notice that we haven’t added Javascript because our application does not need Javascript.

That is it. We have learned how to install bootstrap 5 in our masonite project. You can go ahead to try things like compiling out assets to direct subfolders or files in the storage folder or even installing and using other frameworks.