Getting Started with Bootstrap 5 for Beginners - Crash Course

-- Today, we're going to step into the wonderful world of frontend development, and tackle learning the most popular frontend development framework: Bootstrap 5. Bootstrap has been around for many moons! It allows you to create websites mobile-first, responsive websites with pre-built, customizable components. We'll tackle installation in a robust development environment using Parcel, and then how to create an example website with it.

The project we're going to create:

Here's the final project along with all of the project assets in zip format:

0:00 - Introduction
1:06 - An Awesome Offer
2:16 - My Sad Story
3:54 - Installing Bootstrap & Dependencies
14:34 - Creating the Website
53:16 - Creating a Build
56:34 - Deploying to Hostinger
1:01:08 - Closing

Let's get started!

#bootstrap #frontend #course

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

Are any of you still using Bootstrap, or have plans to use Bootstrap 5 in the future?

[englishwitha]

Thanks. What I appreciated most about this tutorial was the fact that you went through the proper set up process (npm, parcel, folder structure ...). In most other tutorials, the tutorial starts by just adding the CDN files to the html file.

[kofestotech]

Nice video, between 21:12 to 22:50 to push the navigation to the right, bootstrap 5 has "ml-auto" I tried that and it works for me, you add the "ml-auto" to the <ul></ul>, for example <ul class="navbar-nav ml-auto "> </ul> it works

[TeoVala]

At 21:50 where he says to align it right.
At ---> <div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav *ms-auto*">

Just add ms-auto and it works!

[chebellipavankumar]

Please do a crash course video like this on React or WordPress?

[ryanisthewind]

anything happens to this guy, it'll have an impact on the whole web world.

[rorycantellow]

Really good tutorial. Off the cuff and live dive into BS5. Great to see someone going small prep live and getting into flow. Reminds me of working in Ops. Brilliant.

[krupeshanadkat]

I would say tailwind css picking up, it would be really great to see tailwind css crash course 🙂🙂

[daverobb]

Hey Gary, some of your Parcel issues is that you are using parcel-bundler, instead of parcel 2.0.0. That is where the --experimental-scope-hoisting resides. Great tutorial!

[MagnusAnand]

You can change the position of the navbar items with just regular Bootstrap, no need for extra custom CSS.

Like adding this classes:

1. "d-flex flex-row-reverse"
2. or "justify-content-end"

[LemonDust]

me: ~tunes into video~
gary: ~time to pick a font~
me: let me guess, poppins?
gary: poppins! 😂

[steffe]

At 21:44 you just needed to add comma before d-flex

Class="collapse navbar-collapse, d-flex"

[wizzacx]

My life’s first corporate project and guess where am I for a crash course 💯

[matthewstorey]

can't wait to watch! Please do a React crash course as well :)

[AdiSings]

Probably the best Bootstrap tutorial on yt

[romievthedon]

I used "ms-2 me-2 text-center" on the 4 navbar-items to reposition the links on the right side of the nav

[surajpujari]

Never learned Bootstrap this much faster, Thank you, Gary!

[AZTECMAN]

[30:00] To increase the spacing between items on the navbar I just added the class "me-3" (meaning left margin increase by 3) to each nav-item

[olagisrarikis]

<li class="nav-item px-3"> will accomplish the padding and you can use breakpoints on that as well...

[DriveandThrive]

It would have been a little helpful to explain why the import has to be below the code in scss. I think you may have briefly mentioned scss converts the code to css...perhaps this is why it has to be below the code in order to work.