Getting Started with Bootstrap 5 for Beginners - Crash Course

www.hostinger.com/designcourse - Use coupon code "DESIGNCOURSE" for an additional 10% off!
-- 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.
getbootstrap.com
nodejs.org
The project we're going to create:
mybootstrap5site.com
Here's the final project along with all of the project assets in zip format:
coursetro.s3.amazonaws.com/bu...
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!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
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?

[@ead5590]

It's been quite a while since I've used Bootstrap mostly because I stick to using SASS for creating my own custom styling from scratch. But that was back when Bootstrap was v4. Time to hit the docs to see what's changed.. 😁

[@Silentanwa661]

@@ead5590 2nd this

[@kapa4208]

Been using tailwind and i have no reason to look back to any UI framework 😅

[@welling1]

I picked up Bootstrap a long time ago when my CSS skills weren't so sharp. I wouldn't touch it now for a real project.

[@justingolden21]

I started off web dev with bootstrap 3 and then 4. Recently I've been using tailwind and love it way more, but I've been awaiting bootstrap 5 and will certainly give it a go in the future. It's one of those things you may as well try, and it'll make some websites faster / easier to make. I like tailwind for any websites that I want to customize more or look nicer imo, also lighter file sizes and faster loads. But bootstrap really has some value in providing everything you need quickly. Tailwind has a UI kit thing as well, but it's expensive, I'll try it out someday though.

[@TraversyMedia]

Damn it Gary. You beat me to it 😒

[@MultiMemich]

I'll watch both.

[@samisbgh6253]

​@@MultiMemich +1 😂

[@tmkj69]

I am eagerly awaiting yours!

[@rakib17874]

You Gotta Hurry...Brad😊😊😊

[@MysticMac000]

Maybe do one for bootstrap-react, Brad :) I would watch!

[@rorycantellow2973]

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.

[@englishwitha5532]

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 , for example ........ it works

[@TeoVala]

At 21:50 where he says to align it right. At ---> Just add ms-auto and it works!

[@chebellipavankumar649]

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

[@mokone2020]

Thanks a lot Gary. You made crash course so easy.

[@Webtricker]

Thank you so much for explaining Bootstrap 5 in such a simple and beautiful way. It's very helpful for beginners.

[@surajpujari4014]

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

[@daverobb2011]

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!

[@justingolden21]

Love the content as always Gary. Would float have worked in the beginning of the video? Also, I think it would have been helpful to show how to change the column breakpoints to make them fit full width on mobile. Keep making awesome stuff : )

[@Lobaluna9333]

Thank you . I totally grasped the concept and flexibility of Bootstrap! Also I thanked for the great HTML/UI design tips ;D

[@robomq9186]

Excellent tutorial!! Very much appreciated !! 🙂

[@KryptoWooks]

yo your a good teacher thanks for all the free education god bless u some people dont have money for school learned so much keep it up

[@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

[@ryanisthewind]

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

[@cerealrakist7360]

He is amazing!! He helps us for free and i don’t think he gets the recognition he deserves !!!

[@mounirboualili7862]

Thank you Gary!

[@2525samot]

Thank you so much for this video Noob Life Saver!

[@user-km9vl9ck9u]

great tutorial thanks!

[@olagisrarikis]

will accomplish the padding and you can use breakpoints on that as well...

[@matthewstorey3320]

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

[@AdiSings2023]

Probably the best Bootstrap tutorial on yt

[@krupeshanadkat635]

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

[@cerealrakist7360]

I love tailwind. I have a recommendation for you. When I was learning it, the one video that I found amazing and thorough was the free one here on KZbin that scrimba put out. It’s a little old but it’s updated. Don’t be thrown off by the upload date. It’s up to date.

[@krupeshanadkat635]

@@cerealrakist7360 thanks, i know bootstrap very well. The thing is the components. Boostrap gives components and i can put up a scaffold with navbar, jumbotron, cards and footer in 30 mins. With Tailwind it takes whole day 😕 I need to put classes and make my own component library from raw..

[@krupeshanadkat635]

@@cerealrakist7360 tailwind has more classes than bootstrap so transition is not that difficult for me, i really miss pre made components. I know tailwind UI but most things there is paid.

[@steffe6410]

At 21:44 you just needed to add comma before d-flex Class="collapse navbar-collapse, d-flex"

[@romievthedon]

Unfortunately, parcel-bundler has migrated to v2, and is now just 'parcel' for npm. So if you guys run into dependency issues just uninstall parcel-bundler (globally if necessary) and install parcel for the updated version.

[@justingolden21]

Gary uses winrar when windows10 includes zip file support by default in the right click menu! Also they really should pay for your temp domain name for your example to get people to use them lol. That takes a little while to get the initial thing setup, but I was in awe at how fast the website was live after you uploaded the zip. I know the file size is small but wow that's impressive, usually takes me a bit longer on github pages, netlify, and firebase.

[@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"

[@wizzacx]

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

[@joshuapearson7405]

Thanks for the course! Installing Bootstrap was me basically doing things that made no sense to me considering I am new to the command line and am unfamiliar with a lot of the things I was installing. Is there a good resource for trouble shooting? I got a few errors with 'npm run dev'.

[@programmersharif7834]

Awesome.......!!! thank you so much,,,,,, sir.

[@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.

[@avinashmurmu9070]

Thank you so much ❤️❤️❤️

[@robertstimmel1100]

Thank you, Gary. This is a great video! I have been trying to teach myself to learn to code over the past few months. I spent a lot of time working on C#. Now, I am working on HTML and CSS. So far, this is much easier than working in C# (and it's pretty fun too). With a little luck and a lot more work, I am hoping to be able to make a career change within a few more months. This would've been nearly impossible for me if it weren't for videos like this and mentors to teach me the things I need to learn.

[@fishinghunter4030]

@23:01 instead of creating separate css for justify-content, add d-flex and justify-content-end classes after navbar-collapse class

[@cerealrakist7360]

You don’t get the recognition you deserve! Although I have to admit that you are pretty well known and are considered amongst the top best , in my book 💯 and pretty much everyone else’s lol

[@nik4690]

Some of the things you are using custom CSS for, you should be demonstrating how you can apply the styles via Bootstrap classes instead (considering this is a Bootstrap course)... For example, the justify-content: end, at 23:00 - you should be adding the class (justify-content-end) on the html classes list as that's the Bootstrap method... Also, when you copied and pasted the media query for the link padding from the browser. If you then go and change the breakpoint values, you have to go and change all the custom media queries. Whereas Bootstrap allows you to retrieve the breakpoint values with a simple utility: map-get($grid-breakpoints, $breakpoint); In my opinion, if you make a course on something, you should first study the topic enough so that you have an intermediate to expert level of understanding, and I don't feel like this was achieved this in this particular video.

[@HawkFest]

31:30 There's a simpler and nicer way using boostrap classes : his manual modification also moves the last button slightly to its left, while we only want to put more space between the buttons rather than also move the whole thing to th eleft... We could use instead *ps-3* class in all 4 tags, including the _nav-item_ dropdown, as follow: . It also indents the menu from the title when viewing in a small viewport wich IMHO is more relevant as a menu from that title. Else, *px-3* could also be used, having the same behavior as his modification (rightmost button slightly moved left), but along a nicer indentation when in the smaller viewport as the sub-menu from the drop-down link gets centered (its container having the same margin on its right since its parent container will apply an x padding, not just a p padding)

[@kofestotech]

I also noticed he use custom styling while pushing the navbar to the right, though the class name with "ml-auto" on the ...... works for me

[@HawkFest]

But still, it's cool to see how we can manually modify bootstrap (and flex) stuff

[@kofestotech]

@@HawkFest ​ There is no need to modify when bootstrap already has what you want, you can only add custom styling to the pages and that has to do with what Bootstrap doesn't have, why using Bootstrap if you are still gonna write CSS codes to solve problems Bootstrap already solved😎

[@HawkFest]

@@kofestotech Agreed, but specifically to our case that's not the context (it doesn't work) nor the point : 1- Using FLEX properties that are W3C candidates (part of the standard) and guaranteed to work in all browsers, which is the case of the Flex container's _justify-content_ property (with a value of flex-end), is better than using Bootstrap's _mr-auto_ which does *not* work in our case BTW (at least in Edge, I've tried it) : it could work in a div tag, but I've tried it in the container's div tag and it didn't work too. But even then, this would rely on the parent container _not_ having its justify-content property set to something else than default (in order to be compatible with some browsers). Since we don't know about the latter without some proper declaration (unless we dig through bootstraps css files), simply using the standard justify-content property is better and safer. 2- Personally I'm new to bootstrap, and I also want to know how I can make custom changes to cohabitate with bootstrap, and this was a good opportunity.

[@stewartjames932]

Thanks!

[@danishjaffri8840]

Amazing, waiting for React Course

[@MysticMac000]

Awesome! I would love a similar course on React Bootstrap :)

[@abhijeetdhanwate4065]

Anyone still getting an error with npm run build? "build": "parcel build --public-url ./ ./src/index.html --out-dir build"

[@petertroymacero9780]

yes! until now i cant debug it.

[@hiteshsuthar1097]

After Ur sad story, I'll definitely watch it👍

[@demetrous-yt]

Nice job! I had an issue with build: "....scss:undefined:undefined: plugin is not a function", fixed with reinstalled parcel "npm i parcel", not "parcel-bundler".

[@lukaanchieta2102]

Nice tip bro, it worked here. thanks.

[@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

[@pukstar]

For right-aligning the navbar elements, have you tried adding flex-row-reverse to the navbar-collapse div? Worked for me.

[@yondaime_dg]

thank you ❤️😁

[@rahavareddy5510]

Waiting for this video

[@AdrianCardoza]

24:15 that's what she said. Literally, my frontend professor always says that :).

[@theisoj]

Thanks 😊

[@funnyhaha19]

Note that "parcel-bundler" has now been depreciated but is worth still using as the newer "parcel" bundle is currently broken (Jan 2022)

[@theironpixel]

Tried this and when I uploaded my site to my host, the navigation "download links" section didn't come up. Looking at console I saw it wasn't pulling popper.js. Trying to troubleshoot that now.

[@ahmadkhaled7497]

21:57 To move the options of the Navbar to the right side. Simply give the ul tag a class named 'mr-auto' and it will automatically move the options to the right side.

[@kevinkiarie3338]

doesn't work

[@TomSchouten92]

@@kevinkiarie3338 justify-content-between is what you're looking for. Might have to add d-flex.

[@kevinkiarie3338]

@@TomSchouten92 thanks my guy

[@steffe6410]

Might be a bit late but all I did was I added comma then d-flex so like Class="collapse navbar-collapse, d-flex"

[@TomSchouten92]

@@steffe6410 classes don't have to be separated by comma. Only need a space in between

[@DjGilburt]

At 30:20 I found a way to increase the spacing between nav links. The items in the unordered list are under the flex property so you need to include the gap property in the html. Something like this! . Hope that helps anyone else :)

[@codechimps]

Such a good video, better than we could do!😂

[@gabhubdesigns6393]

Thanks Gary but my custom sass file is not working. Anytime I write a style code it doesn't show in the browser. Can anyone help me out?

[@LemonDust13]

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

[@dobie9400]

Loved the course. After the npm run build, I got it all working except for the dropdown menu. Can't find a solution. Anyone?

[@vinayrwt]

Thanks

[@levihenrydotcom]

There's an issue with parcel. I tried this method twice, and both times it produced a Build Error, specifically "The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null." Save your time, don't use parcel.

[@lukogs]

Can someone tell me how to add bootstrap to new project? should i need to run npm install again for every new projects or is there other codes? I heard somewhere that if npm bootstrap is only one time process..

[@ThanHtutZaw3]

1:55 hostinger show all low prices are useless. When I select lowest price(one month) , all total prices are 9$ above(with coupon).Why

[@rezarahman1782]

Pretty much same as 4. But it was a good tutorial. 🥰

[@NecolasHamwi]

Third time is a charm!

[@unickvibe6926]

Like before watch ❤️

[@AbrarKhan-sl1ju]

nice video

[@talhaibnemahmud]

A Tailwind CSS Crush Course

[@sholaadelabu6075]

Hi there have you heard of any issues installing Bootstrap 5 on the M1 macbook?

[@taraksaha9]

I was expecting you to use bootstrap grid with flexbox.

[@_moxy9905]

Edward Norton look-alike is back!!! :)

[@porker5749]

I give up on Bootstrap...I got to the npm run dev and got nothing but error messages. Earlier when installing the parcel -g file I got errors as well, saying that most of the packages were out of date. F... this. I'm out of Bootstrap!

[@elliotbaker3757]

Same what a nightmare to just get it running

[@littlesandra87]

Can Bootstrap me used with React, so doesn't it make sense to combine the two?

[@DesignCourse]

It can be used with React, but just because it can, doesn't mean it always should. 😂 I personally do not like React. I'm a Vue guy.

[@codedjango]

I so wish if Gary could do a Vue JS 3 tutorial...

[@georgegeorgio70]

when i run npm dev i get 'parcel' is not recognized as an internal or external command please help

[@JosephCampbellSolutions]

adding class h-100 to all the cards.. will give the cards equal height.

[@shrey768]

Why customize? Could have used "d-flex justify-content-end" to align navbar items to end

[@shaderone07]

or ms-auto would do the work

[@aryanpandey2879]

Probaby ml-auto should also work by giving it an auto margin on left

[@shaderone07]

@@aryanpandey2879 i don't think so ... because ml-auto does not work in b5, instead use ms-auto or me-auto (where s(start) replaces l(left) and e(end) replaces r(right).

[@aryanpandey2879]

@@shaderone07 oh didn't know about that. Thanks

[@aleksandraryan]

worked for me :)

[@ravisirswa8123]

Thnx

[@krunalshrimali4471]

Fonts look very small, Sir. Please zoom or make fonts bigger. Unable to watch on mobile.

[@namessis]

body-bg or other commands not working on my custom.scss any idea ?

[@Hammy5050]

Nice

[@xshad0w13x]

i have followed the video step by step everything seemed to work just as the video.... howver $body-bg:black; does nothing in my browser

[@NevenZec]

I get code ELIFECYCLE error when I try to run build... can`t find a solution on the net. What to do?

[@amuridesu]

found this solution, it works with me.. maybe ur file is still inside node_modules, try to move it out

[@jt663]

Legend

[@llothar68]

Looking for a mobile-last toolkit, any recommendation?

[@jitx2797]

Please make a tailwind one

[@collinskirui7885]

am living under a rock

[@olagisrarikis]

will push to the right....

[@mdfasadik9843]

Sir please, do a crush course on Tailwind CSS... please please please...

[@user-fo5oq9us4k]

can you plz share you vscode theme. that is so cool

[@AllenMarsam]

Love

[@Hassie]

"Boring company, which is Elon Musk's company" Someone lost their moneyyy 😂

[@IbrahimOseyi]

Waiting for Todo List and Form Validation tutorial

[@Arjun-yj1es]

I want to learn front end development from Gary what should I do? 7:26 🤣

[@majdshaheen8136]

You should take the majesty out if you want us to concentrate with you

[@romievthedon]

When I set up the navbar it took up the entire screen and appeared to be made for mobile. Then I realized the browser was on 500% zoom😆

[@majdshaheen8136]

the run build is not working

[@davidbieschke9345]

20:46 had me dying

[@bernardchisumo4054]

[@samisbgh6253]

What is your color theme 🙄??

[@patrick9969]

2:16 pain💔

[@luquillano997]

27:43 that's a dead laugh