<h1 id="heading-1-create-a-laravel-project">[1] Create a Laravel Project</h1>
<p>e.g.</p>
<p>Laravel v.10.23.0</p>
<p>PHP v.8.2</p>
<h1 id="heading-2-add-package">[2] Add Package</h1>
<p>Add Laravel UI package</p>
<pre><code class="lang-plaintext">composer require laravel/ui --dev
</code></pre>
<h1 id="heading-3-install-bootstrap-styling">[3] Install Bootstrap Styling</h1>
<p>Add Bootstrap Styling for the Laravel UI Auth</p>
<pre><code class="lang-plaintext">php artisan ui bootstrap --auth
</code></pre>
<p>Add bootStrap icons.</p>
<pre><code class="lang-plaintext">npm install bootstrap-icons --save-dev
</code></pre>
<h1 id="heading-4-update-styling-files">[4] Update Styling Files</h1>
<p>[4.1] Change the name of <code>resources/css</code> to <code>resources/sass</code>.</p>
<p>[4.2] Add/Update the following codes to <code>resources/sass/app.scss</code>.</p>
<pre><code class="lang-plaintext">/* Fonts */
@import url('https://fonts.bunny.net/css?family=Nunito');
/* Variables */
@import 'variables';
/* Bootstrap */
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';
</code></pre>
<h1 id="heading-5-build-the-bootstrap-styling-files">[5] Build the BootStrap Styling files</h1>
<pre><code class="lang-plaintext">npm install

npm run build
</code></pre>
<h1 id="heading-6-view-the-site">[6] View the site</h1>
<p>View the Register page i.e. <code>http://your_domain_name/register</code></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1694709621179/f6f06b55-d01f-466d-adb0-603ea166ef38.png" alt class="image--center mx-auto" /></p>
<h1 id="heading-github">GitHub:</h1>
<p><a target="_blank" href="https://github.com/mohamadrazzimy/lara10BootStrap5">https://github.com/mohamadrazzimy/lara10BootStrap5</a></p>


# \[1\] Create a Laravel Project

e.g.

Laravel v.10.23.0

PHP v.8.2

# \[2\] Add Package

Add Laravel UI package

```plaintext
composer require laravel/ui --dev
```

# \[3\] Install Bootstrap Styling

Add Bootstrap Styling for the Laravel UI Auth

```plaintext
php artisan ui bootstrap --auth	
```

Add bootStrap icons.

```plaintext
npm install bootstrap-icons --save-dev
```

# \[4\] Update Styling Files

\[4.1\] Change the name of `resources/css` to `resources/sass`.

\[4.2\] Add/Update the following codes to `resources/sass/app.scss`.

```plaintext
/* Fonts */
@import url('https://fonts.bunny.net/css?family=Nunito');
/* Variables */
@import 'variables';
/* Bootstrap */
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';
```

# \[5\] Build the BootStrap Styling files

```plaintext
npm install
   
npm run build
```

# \[6\] View the site

View the Register page i.e. `http://your_domain_name/register`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694709621179/f6f06b55-d01f-466d-adb0-603ea166ef38.png align="center")

# GitHub:

[https://github.com/mohamadrazzimy/lara10BootStrap5](https://github.com/mohamadrazzimy/lara10BootStrap5)

Laravel 10 With Laravel/UI BootStrap 5 Auth

[1] Create a Laravel Project

[2] Add Package

[3] Install Bootstrap Styling

[4] Update Styling Files

[5] Build the BootStrap Styling files

[6] View the site

GitHub: