How to Install Bootstrap 5 in Masonite 3
Tags: python, masonite, beginners, webdev
Published: 2022-10-28 15:51:12

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.

{% embed https://github.com/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


![masonite demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mz89k9j2pptgntnyfy7.png)
In your Terminal, ensure 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.
You can just 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 code section 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.js` And 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.

![masonite and bootstrap demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2downi9lnto0k2bd2edh.png)
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.