Learn How to Code Using Bootstrap 5 Tutorial 2023!

hey everybody today I'm going to teach you how to create a responsive website in less than 20 minutes without writing a single line of CSS as you might know bootstrap is the most popular CSS framework used around the world it makes it easier to build great looking mobile first responsive websites I'll be making more tutorials in this series that'll teach you how to use pre-made components such as nav bars modals and accordions along with bootstraps responsive CSS grid system to quickly create interactive websites without writing a single line of CSS or JavaScript so if you're interested please consider subscribing to my channel and liking this video comment below if you have any questions or if there's anything new that you'd like to learn for those of you who are new to my channel welcome and thank you for joining me today I'm Jay from coding with Jaybird and here on my channel I'm here to help you build confidence in coding now let's not waste any more time get your favorite code editor ready and let's start coding I've got a project folder for our bootstrap 5's website now it has an index.html file and an IMG folder with a bunch of images that are loyalty free and they're from pixabay alright so let's start getting our code ready so we're going to need a starter template so let's go to getbootstrap.com to get that okay so here on bootstrap.com we'll open up docs and we'll scroll down to the second one and now it has a link for the starter template that includes bootstrap CSS and JavaScript so we're going to paste that at the top of our file here and let's call this build a web page using bootstrap 5. now we're not going to need this H1 tag for now so let's delete that and create some room for our content I plan on building a website about touring Canada now it'll be a single page scrolling website and I'd like to start with a navbar and a carousel so let's prepare for both and we can grab the nav bar from getbootstrap.com so we're going to scroll down to the component section and there you can find the nav bar and I'm going to scroll down until I find a nav bar that I like okay I like this one so I'll copy the code for that and I'll add it to my markup now we need to update it a bit there's a logo here which is just the word navbar I'm going to replace it with a logo that I already have saved now it's an image in my IMG folder so I'll Source out that image and it's called logo.jpg now we also want to remember to use an ALT tag and we also need to give this a height now I tend to use something like 80 or 100 to start so let's start with 80. and for the navigation links uh home is okay for the second one I'd like to have destinations and then we're going to have an about and a contact us section now we can remove this disabled class because we don't want that to be grayed out in our navigation and because this is a single page scrolling site I'm going to have IDs further down in the page and I'm going to Target those IDs here in the anchor tag so let's call this destinations and we'll point to about and lastly we'll have another href for the contact us section which will point to an ID of contact let's have a look at this in the browser using our live server nice and simple it's exactly what I was expecting okay let's move on to our Carousel now again we need to go to getbootstrap.com to get the right component or the right Carousel for the page so I'm going to go down and scroll down to Carousel which is also in the component section now there are a few carousels to pick from I like the second one with indicators so I'll copy that markup and we'll paste it right here in our index.html now this Carousel comes with three slides but I'd like to add a fourth one so let's go ahead and add an extra indicator button so I'll duplicate the last one and we'll point to number three and if we scroll down actually let's change the slide to four and then let's scroll down and add one more Carousel item now let's grab some images so I'll start with the lighthouse let's get geese next I think I'll get mountains next and lastly let's get false and let's not forget the alt tag as well so I'm going to change all the alt tags it's a good idea to be particular about these sort of things I always like to fill them in okay so now that we have our alt tags let's have a look at this in the browser okay looks good our indicators are showing perfect it's looping through them nicely all right so now we want to move on to our main content and I'm going to put everything in a main container so here we're going to use bootstraps div with a class of container okay and I also like to mention the end of the container because it gets easy to get mixed up with all of our divs now I want most of the content of the web page to be in this container so we'll start with an H1 and we'll say tour Canada today okay now it looks very simple so let's add some styling from bootstrap so what I'll do is I'll text Center this I will also give it some padding so I'll use p-5 which is the highest degree of padding using bootstrap and then margin bottom Dash 5 and margin top Dash five that looks good all right next I want to have a div with a paragraph now let's put lorem 100 in here now I'd like this div to have a background color and span the entire width of the container so let's give this div a class of w100 which will fill up the container's entire width which is not exactly going to the edges of the browser but close enough and that's because it's in a class of container div and then we're also going to give it a background color let's say dark subtle and let's also give this some margin and padding that looks good all right I think I'd like to add a button though it looks a little empty without a button so let's say we have a button now we could create a button like this or we could go right to bootstraps website and get one from there so let's actually delete this button and let's get one from getbootstrap.com so again in the components we'll grab a button now they have different sizes and colors I'd like to get a large button so let's grab this first large button here say book your trip now okay it's starting to look a little nice all right so let's move on to our next section now I want to have an H2 tag because I don't want to repeat my H1 tag again and this I'll call popular destinations now we also want to remember that we want to give this an ID of destinations because we're targeting this from our navbar and then we want to give it some styling as well I want this to look like large text similar to an H1 type but I didn't want to use an H1 again so I can use bootstrap's class system called fs-1 and that gives it a font size of the heading 1. so we've got fs-1 and let's also give this some padding and margin top and margin bottom and let's also Center this text okay I like it now in this section I'd like to have three separate columns that are responsive and in each column I'd like to have a card so an image some text maybe a button within each card okay let's go to bootstrap site and get some cards now I'm getting ahead of myself before we get the cards we need to plan out our columns so we need a div with a class of row and inside of it we need another div with the class of call in which we can place these cards and then we'll have card one let's go ahead and get our card okay again it's in the component section this first one looks nice I'm just going to grab that and we'll paste that here and let's give it a title of let's say Banff and for the paragraph let's just say lorem maybe 30. and for the image let's Source out maybe mountains and let's just put mountains in here as the alt tag and for the button instead of go somewhere let's say read more okay and let's have a look in the browser not bad I like it all right now we're going to need to copy this div a few more times so let's duplicate this two more times and we'll call the second one card two and the last one card three and let's also rename the titles so this one can be maybe Peggy's Cove and we can point to the lighthouse image and let's also change the alt tag to say lighthouse and lastly let's have a section for Yukon and capture the Yukon image now before we look at these in the browser I see something that I should have deleted this style with a width of 18 Rems we need to get rid of that now that's just something bootstrap uses because this is how it they display their cards in the browser on their web page so now that we've gotten rid of that I think the rest of the code looks nice and clean let's have a look at this in the browser now okay and we can stretch this and we shrink it and it's responsive and it looks great okay let's move on to the About Us section now so in the about section I'd like to have four blocks now in each block I want to have an H2 or an H3 and a paragraph tag and maybe give them a different background color and make them look like squares or rectangles but I only want to have to take up the width of the browser so I want to have two and then two below so let's take advantage of bootstrap's 12 grit system and use a call-6 class and apply it to each block so now we have our about section and before we start let's copy that same H2 that we have up here and use that for consistency and we use that here and we'll also use that for our contact us so this will be great to divide the area and at the same time it'll have a consistent look and feel so I'll say about and for this one we'll say contact us now in the about section let's have a div with a class of row and then we'll have another div with a class of call dash six and inside of that let's have another div which will have a P tag with maybe alarm 50 let's say and I also wanted a heading in here so let's add an H2 and maybe we'll say rates for this one okay looks okay but there's no styling so let's give this a class of maybe background color dark we'll give it some white text we'll give it some padding it's a margin and the top and the bottom it looks good but it looks pretty dark so let's not go with that dark color let's change this to secondary oops just a dark gray okay I like that looks better and now that we have that set up let's copy this div with a call of six three more times and then we can just change the details so we'll change maybe the H2 tags so fees for here we might say popular sites maybe we'll have one called features okay let's check it out okay not bad it's starting to take some shape I don't like that they look so boring though everything's gray and white so why don't we mix it up a bit maybe we can take these two that are diagonal from one another and change the background color maybe the text color so we'll grab the second and the third and instead of this background secondary and this white text let's delete that and now let's make it the same color we had up above background color dark subtle and we'll do the same thing here we'll get rid of the text white and change it to dark subtle oh I like it it already looks better what do you guys think I like it okay so now that we have our about section let's work on the contact us section I don't really have that much information that I want to put in the contact us section so let's go ahead and grab the paragraph from the beginning of this website we'll copy it and it's styling down below so it'll give it a consistent look and feel okay so we're going to grab this so copy that and let's paste that in the contact us section now I'd like to link to an email so let's change this text out of here we'll add an anchor tag and here we can say contact us for more information oops information and now for the h reference we can then refer to an email address so mail to maybe ABC def.com okay everything's fine except I don't see the text and it is there it's just coming up kind of blue a darker blue and there's an underlying so let's get rid of that so again we'll Target this anchor tag and we'll change the styling using bootstrap and let's change this to text white and to get rid of that underline text decoration none okay that's exactly what I wanted great now let's move on to the next section now I want to have a footer at the bottom but it's going to look kind of boring to go straight from some text to a footer so let's add another section with an image in it so I'm just going to copy this h2 tag here and let's change this to relax in beautiful Canada now let's add an image here so we'll grab the vacation image let's see how this looks okay it looks good but half of the image is getting cut off or at least a portion of it is yeah you can see there's a lot more to this image so let's fix that and give it a class of w100 now I could also use w-50 or w-75 which is basically going to take up 50 or 75 percent of the width of the container that it's in so we wanted to fill up the entire container so let's use W Dash 100. that looks really good okay now let's work on our footer and let's also add some margin at the bottom because I feel that we need some more space so now we have a footer and I just want a P tag in here I will say end copy and maybe we'll say tour Canada today I also want an email us link so let's set that up so I'll set up an anchor tag and inside of it I'll say email us but let's not forget to grab this H reference from up above and we'll paste that in here let's check out our footer okay it's kind of boring and plain let's give it some background color as well so we'll Target the footer give it a class of BG let's say dark um let's also give it some margin top five and maybe some padding and maybe text white maybe even text Center that would look nice okay I like it but I don't like this Blue Link at the bottom so let's give this some styling as well so we'll change this to text White okay it looks good hmm wait a minute it doesn't look that good I don't like that the footer doesn't go to the sides of the browser so let's fix that and that's because the footer is inside of our container so let's cut the ending div out or the closing div out and place it here and then our footer just below it much better I like it okay now let's also not forget to fill in our different IDs so we did the destination ID let's fill in the second one which is about and then we have a contact ID so we'll change that to contact and then I think we might have an extra yeah we have this extra one let's get rid of this from our beautiful Canada photo okay let's test out our navigation links so let's try destinations okay it works about also works contact us beautiful everything works smoothly let's also test it out in responsive mode so if I grab contact us still works perfect okay so I've expanded it to the full width of the browser I like it when I shrink it down it still looks nice I really like it what do you guys think do you like our site all right everyone that's it for today's video I hope you learned something new today and you found some value in this video if you did please consider subscribing to my channel and liking this video comment below with any questions or if you just have comments on the website that we made today or if you just want to say hi I'd love to hear from my viewers alright everyone I hope you have a lovely week until next time keep on coding

Channel: Coding With JayBird

Views: 31,592

Keywords: bootstrap 5 tutorial 2023, bootstrap 5 framework, build responsive bootstrap 5 websites, coding tutorial 2023, responsive web design, bootstrap 5 web developer, bootstrap 5 tutorial 2023 components, tutorial for bootstrap 5 in 2023, make fantastic responsive bootstrap 5 websites using this 2023 tutorial, codingwithjaybird, html css made easy, bootstrap crash course, bootstrap 5 new features, bootstrap 5 guide, bootstrap course, bootstrap 5 course

Id: g9b4LjYrsUQ

Length: 19min 14sec (1154 seconds)

Published: Fri Mar 03 2023