Bootstrap 5 Crash Course Tutorial #1 - Intro & Setup

hey gang and welcome to this bootstrap 5 crash course [Music] so i'm sure that most people who watch my videos on this channel have got a pretty vague idea of what bootstrap is already but for those of you that don't bootstrap is a front-end css and javascript framework that allows us to quickly make mobile first responsive websites it includes pre-made components like nav bars models tabs tooltips buttons accordions and loads of others along with the css needed to style them it also comes fully baked with a responsive css grid system that we can use to distribute content onto our web pages and all this means that we can pretty quickly create nice looking interactive websites without having to write a single line of css or javascript it's also really easy to customize bootstrap 2 meaning if you don't like some particular styles like the default theme colors for example you can change them to something that you do like and on top of all of these features it also takes care of browser compatibility so that your website looks pretty good on any modern browser and device and now bootstrap has just released a new version version 5 which includes new features and that's the version we're going to be using in this series so that's a little bit about bootstrap now let's take a look at what we're going to be building in this course so during this course i'm first of all going to cover some of the basics of bootstrap five things like colors typography buttons and that kind of thing and then after that we'll start building a landing page for an ebook that looks something like this and this page is going to pull together a lot of the different components and features of bootstrap five such as navbars grid system cards accordions list groups icons farms models and we're also going to see how to use a component new to bootstrap 5 the off canvas which is something like this a bit like a side navigation that slides into the page now on top of that i'm also going to show you how to use the tabs component as well first though we need to set up a new project and hook it up to the bootstrap framework so i'll be using vs code for this course and i would highly recommend that you do too because later on we're going to be using a sas compiler package inside vs code to customize our bootstrap theme and there's also another package i'll be using called live server to preview our site in a browser which we're going to see shortly so if you want to download vs code you can do at this address next i'm going to open up a new folder with vs code and i've got this folder already created on my desktop it's completely empty at the moment but what i'm going to do now is add in a new file called index.html and inside this file i'm going to boilerplate an html file just by typing dock and tab and i'll also change the title and i'm going to put an h1 at the top of the body as well all right so now we just need to add the bootstrap framework to our web page and there's a few ways we can do that we could either download the javascript and css files and add them directly to our project folder we could use the cdn bundles one for the css and one for the javascript as well and we can also use npm to install it locally into our project or yarn if you prefer in our case to keep it simple for now we're going to be using the cdn links but later on near the end of the series we'll also use npm to install bootstrap locally to so that we can customize it so grab the cdn links and head back to your editor and paste them into the html file in the head so the css is going to stay up here in the head we need to take the javascript though and place that one at the bottom of the body so that's pretty much all we need to do for now now we can use bootstrap classes and components in this file so now the first thing i want to do is preview this in a browser and to do that we'll be using a package called live server so open your packages tab and type live server to find it and install it and what this package allows us to do is right click any html file and open that up in a browser using a local development server so once that's installed we can go back to the html file and we can right click it and click open with live server and now we can see this in a browser and already we can see that bootstrap has changed the default font family it's no longer times new roman but instead it's a sans serif font loaded in by bootstrap now one more thing i want to do is add in an assets folder into my project and put in a couple of images that we're going to use later on so i'm going to just drag this in but if you want to grab these images you can find them and all the course files as well for this series on github so then my friends this is the repo you're gonna find those images in as well as all the course files for every single lesson as well and every lesson in the course has its own branch in the repo and to get the code and files for a particular lesson you're gonna need to select that lesson from the branch drop down up here in the top left for example to get the lesson 10 code you'd select the lesson 10 branch then you can click the code button and download a zip file of this lesson which contains the final code for that lesson now to get the images we can select lesson one and then we can download that lesson as a zip file which contains the images inside it now one more thing before you start i would definitely recommend that you have at least a basic grasp of html and css before you start if not check out my html and css crash course first of all the link to that is going to be down below the video but anyway that is your introduction to bootstrap next up we're going to talk about the new features bootstrap 5 brings to the table by the way if you want to watch this entire course now without youtube adverts you can do it's all up on the net ninja website netninja.dev you can buy the course for two dollars to get instant access to all of it or you can sign up to net ninja pro and get instant access to all of my courses without adverts as well as premium courses not found on youtube including my udemy ones that's nine dollars a month and you can get your first month half price when you use this promo code right here so i'm gonna leave this link down below in the video description for you to sign up and i really hope you enjoy this series and please do not forget to share subscribe and like the videos that really helps a lot and i'm going to see you in the very next lesson

Channel: The Net Ninja

Views: 69,217

Keywords: bootstrap, bootstrap 5, bootstrap 5 tutorial, bootstrap tutorial, tutorial, bootstrap 5 crash course, bootstrap crash course, what is bootstrap, bootstrap 5 new features, crash course, responsive design, responsive development, CSS, bootstrap sass, bootstrap setup, install bootstrap, bootstrap getting started, bootstrap guide, bootstrap 5 guide, bootstrap 4 vs bootstrap 5

Id: O_9u1P5YjVc

Length: 7min 8sec (428 seconds)

Published: Mon Jun 14 2021