Build A Landing Page using Bootstrap 5 | Full Step by Step Tutorial

hey guys it's david from md bootstrap and in this tutorial we're going to learn how to build this portfolio web page which you can use to promote well many different kind of companies like creative agency or software house and so on and we're going to build this website with um bootstrap 5 only and a pinch of css and as you can see the page is obviously fully responsive so regardless of whether you are watching this on browsing this on mobile device tablet regardless of orientation you use so we can change the orientation and so on it's like fully responsive we have this interactive nav bar which is changing which is which is collapsing on the mobile device so without further ado let's get started so i have a starting folder here and what we have um inside is cssnjs where we can find a bootstrap files so if you want to start building your website using bootstrap then you should visit bootstrap 5 website hit the download button and then you will start downloading css and js files over here i did it already and i have them unzipped over here see these are my css and js files other than that i have couple of images over here so i have some photos from unsplash which i really recommend you to use so you can get those photos for free and you can use them both for um personal as well as commercial use so this is unsplash and then just find picture you like and and download it and obviously it will be really nice if you can leave some credits to the outdoors and then what i'm also gonna use i i use this many pixels dot co so here you have also these pictures which you can use for free and that's what what i'm gonna be using in this um in this tutorial and yeah i have a couple of logos which we're gonna use uh from the company so you can basically get them from the company's website okay so let's get started uh we're gonna start with creating a new file from scratch so index.html i'm gonna type exclamation mark and then press stop emit will basically replace it with the starting html so let's call it portfolio portfolio let me increase font size for you so you can see it better what we are doing and let's open this one in using live server so it opened up here obviously it's empty now so let's start with our uh with our navbar so let's let me see so yeah so we're gonna start with this nav bar and in order to do that we're gonna go to uh to a bootstrap docs page so let's go let's visit bootstrap page go to content are actually components and then navbar and let's use let's find some navbar this one have search we don't wanna we don't want use search so let's let's use this one so i'm just gonna i'm just gonna copy this one and obviously before we gonna use bootstrap styles bootstrap js we need to import it to our file first so let's do it now link css bootstrap mean css let's do one more thing let's create an in styles css file so this is gonna be a file where we're gonna have our custom file um and let's link it also so we have css styles okay so now we have bootstrap so let's add our nav bar to our page and here it is we have our nut bar nav bar here now one important thing to mention here is that it doesn't work yet let me get rid of this one and this is because we didn't and this is because uh it doesn't work yet because um we didn't import js bootstrap.js so let's do it now script source js bootstrap i mean js and now it's working fine let's get rid of this disabled for now uh yep okay here it is okay now what we want to do we want to add some margins from left and right and we want to pull these links to the right we also want to replace this nav bar with our logo so let's do it now in order to add margins we're going to change container fluid to container so i'm going to leave it i'm going to remove fluid and if you don't know how this works please check our other video in description down below or somewhere here you should see the link for our bootstrap 5 tutorial where you're going to use where you're going to find information how to use bootstrap grid how to use containers and so on for now just remember that removing fluid will basically add us this margins from left and right okay great now let's get rid of this one and instead we instead we're going to use image and we want to use sar now i actually want to use image logo and we're going to have our logo here and now what we want to do what we want to do now we want to pull we want to pull it to to the right side okay so in order to do that we're going to use we're going to add a new class here and it's called justify content and and that should bring our links to the right yeah that's that's how it works now now the last thing which we want to do with our navbar is to make it sticky so it stays at the top of our page when we scroll down our portfolio so let's do it now and we're going to do it just by adding a single class called fixed top and now well it's going to be difficult to test it now because we don't have content so we'll get back to this one as soon as we have more content here so now let's move on to this part so we're going to have this header over here which will have this wave over here and a little bit of gradient from blue to purple on the bottom so let's do it now so header so we're gonna add two classes here and now let's um let's add these classes um so for gradient we're gonna use a gradient generator so if you go to cssgradient.io you're gonna find this this gradient generator which allows you to choose like different colors here right you can change it totally uh you can change this color and you can get different results so just play with it and i'm going to use this one and it would generate a css for us so i'm just going to copy paste this one here okay so this is first one now let's add some generic styles here as well html body so we won't have this height to 100 percent font size to one ram for now okay now let's see what we want to do now okay we want to add some heading paragraph buttons and some image on the right and we're gonna use uh bootstrap grid to place this content next to each other so let's do it so we're going to start with container row and we're gonna use call md6 two times and that's gonna be our text and this is gonna be our image so let's use image let's see how it looks now okay it's here now let's add some text here oops let me copy paste some text which is prepared here okay we need to add some margins here so let's do it like this now we forgot to add class here so now we have gradient and now for the page header let's let's add margin top for ram let's say okay yeah now it's better let's do a few more changes so what we're going to do we're going to change increase size and change it color to white yep and you know what let's change the font so i'm gonna use google fonts um so if you navigate to google fonts fonts google.com you're gonna find different phones i'm going to use let's say this you can use different style over here so i'm going to find this is too thin i guess let's use 300 select this style embed and here you here you have a code so we're going to link it in our index.html and we need to use this font formula in our css style and let's see how it works now how it looks actually yeah our font has changed now okay now we need to do small adjustments over here so um we want to justify this uh this content uh vertically uh so in order to do that we need to add one class to our code so in our row very throw we're gonna add just define content center and we also want to add some paddings and we also want to align items center okay so this will and this will ch this will align items and this align item center is centering this vertically and this justifying content center will basically center it and this is because i kind of have a feeling that this six rows is a little bit too big so i'm gonna change it to five to make it smaller right and now it's still centered and without this it will be aligned to the left side so that's why we need this class over here and now we have here okay now let's add um what we are missing are two buttons so then again let's navigate to uh bootstrap bootstrap page bootstrap docs and find some buttons i'm gonna use this outline buttons here so let's use this uh green one and an orange one so success and let's make them bigger by adding this btn large class okay now it's ready so the last thing we have to do is to add this wave over here in order to do that we're going to use another generator which generates waste for us so if you go here you can randomly generate some waves for you let's use this one so i'm going to copy svg code and i'm gonna paste it at the end of our header which will create wave like this so now we have to change this background color to the color of our background actually so in order to do that we're gonna change this one to fff and this will give us this nice result over here okay now let's see what else we have here let me combine this one so now we have this logos here so let's add new section we're gonna call it companies and we're gonna use container row and inside that we're gonna have six logo so i'm gonna do like call md two multiplied by six times and let's add these images which i have here um image companies one png alt company logo i'm gonna add class image fluid and now let's update numbers okay we have it here right so one thing we have to also take care of is this sizing over here actually spacing so they are too close to each other and they are not centered so we're gonna fix it by uh adding classes to our row so we're gonna say g five let's say for gutters and text center to our row and let's see how it works now yeah and now we have this nice spacing all over here okay great so let's see what now now we have this section this wavy section which halfway from both from bottom and from top so let's do it now i'm gonna call this section feature so let's add section okay we want also this section to use gradient and we want it to to have container row inside it and to call md6 multiplied by two and what we're gonna do we're gonna add some heading introduce mdb and i'm gonna copy paste some paragraph which we're gonna also use let's see okay and we have some list item over there so actually this is on the right side so so this one gonna be first and this is our image let's add image here okay we have image and now this text so let's add an order list and we're gonna have four list items like tfhs built with latest technology super responsive and creative design now let's add some styles so we want this color to be white okay here it is now let's um add some spacing so this one should be my three okay now let's align everything to the center and now let's take care of this uh this list so we what we want to do we want to replace this this bullet points with this icons and i have this icon downloaded it's in the svg format uh by the way you can you can find all the files uh for this lesson in the description down below so you can download it uh you can download the starting pack and then you can start building along with me which is the best way to learn how to do it by yourself so let's write a piece of css which will basically change this list items for us so we're going to start with adding some padding and list style type to none so this will remove styles and now we're going to add custom ones so feature lli padding left so the same value background image set to image and check svgs so let's see how it looks now okay now we don't want our background to repeat okay it's cool now let's increase a little bit our line height and add some spacing okay now it is so now let's generate some wave let's use this one now let's add it to our section at the bottom here again and we have it on the bottom and let's do the same on the top to use the top one we're gonna click this icon over here which will generate the same but for for the top wave so let's copy this one go to the top let's paste it and now let's change this color to white and we have our line from the top and the bottom ready so let's see what section we have now okay so this is the one with the icons so let's work on that now i'm gonna add new section and add some container then a row [Music] okay and we want call md4 three times and we're gonna use icons from bootstrap so if you navigate to bootstrap icons docs you're gonna find the list of different icons over here and find whatever you like and just pick up one and then you can have this svg code over here i already prepared them before so let me just uh let me just copy paste them so what we're gonna do uh i'm gonna add here some div with the icon class as well as gradient and margin bottom and i'm gonna paste copy paste this pre define icons with heading and description so there's nothing fancy over here so this is the icon which currently looks like that one we're gonna fix i'm gonna make it round and some heading and paragraph so let me just copy paste remaining two okay so now let's work on our icons so icon now what we want to do we want to change its color to white okay now let's change size to 5 ram as well as width yep now let's change a border [Music] radius okay and now we want to center it so [Music] hmm okay and now we need to justify this content inside our div and we're gonna use that by adding text center to our row which will center everything okay that's great let's see what what's next so this is the gallery part as you can see i've used a different color here just for some change so let's do it so we're gonna add a new section called gallery now all right section gallery and then again as always what we're gonna do we're gonna use container row inside it then we're going to use d 10 for heading okay then let's add some paragraph here okay here it is so let's add some styles now [Music] i'm gonna use background color white smoke okay so here we have this one i'm gonna add waves in a few seconds like this but for now let's just add images so i'm gonna add another row here and what we need here are three images so we call md4 multiplied by three and we want to add the image image c1 gallery image and add some class to make our image responsive okay now let's adjust numbers great and let's change border radius so to all images inside our section gallery section to five percent great now i think there was some button over here as well yeah there was this button so let's do it now so let me do it this way row we're gonna use two column okay now we need to move it to the right and let's add some spacing as well so starting from row we're gonna add margin 3 and gutter 3 so our images will get this nice spacing here between between the images right before it wasn't there so that's why we need it and now for this one we're gonna add some margin from the top and justify content and which will bring our button to the right side okay now let's quickly add waves from the bottom and the top so you already know this one okay so now we have this waves here but uh the spacing here is a little bit too too big so in order to do that we're gonna change this svg which is currently taking that much space and i'm going to show you how to do it so here we have size so we have 0 0 at starting point and we here we have width and height so i'm going to change this 330 to 220 and this will decrease the size here right let me show you that so if we change to 320 and then 120 so you can see that this size is changing so we can leave it at something like 160 probably okay now let's move to the next section oh which by the way will be the quite interesting section so this is the one i call it services so we're gonna use like this columns and we're gonna change this picture to be on the right and the left and the right again so let's do it we want this to have gradient as well and let's add container and then row and inside this row we want to have six six rows six columns call md five six let's start with six and see how it works okay so we have six of them so we will have text here picture here so let's add it already so first one is coding now we have image marketing then some text and then we will have again text and image and this one the last one is called revenue okay let's have a look right so we have text picture picture text text picture so now let me quickly feel missing missing texts okay so as you can see i've added this uh headings paragraph and buttons so what we need to do we need to add some styles to it uh or actually style just for font color and now we need to work a little bit on [Music] paddings and alignments so let's add to our row these two classes which we'll do align items center right and i think this sticks a little bit too much i want to make it a little bit more compact so instead of six columns i want this to be five columns so it will be a little bit wider so let me change this one actually you can do it like this select select and change it to md5 so now we have it smaller but now it's aligned to the left so we can fix it like we did before by using justify content center which will bring it back to the to uh to the center and then again let me quickly add this missing waves on the top and the bottom okay this section is ready so let's move to the next one which will be almost the last one which is the contact uh contact form so let's let's do it we're gonna use again bootstrap docs for this one so i'm gonna look i'm gonna search for some form which we can use but first let's create this section placeholder okay and now let's go to the docs and go to forms overview what we have here email passwords nope let's check form controls yeah this is the one we are looking for so we're gonna have the email and text so let's just copy this one and paste it over down below here okay now let's add some button this one for example and the bottom okay let's put it outside thief okay and what we are missing is this picture on the right so let's also do it here so let's add five and let's use image and shake yeah and as you can see since these are five so they are not centered and we could do it like we did before like we did here but i'm going to leave it as it is because i like because it's kind of aligned with these two waves over here so i kind of like this effect and finally let's add last section which is footer and we want this to also have gradient um so i'm gonna use container this time i want to use container fluid and text center oops i forgot the dot okay and i'm just going to use some span and say made with love by mdbootstrap.com okay here it is uh one but we are missing a couple of stacks so let's add them footer color white font size ram margin zero okay we wanted a little bit padding one ram bigger and change link size and get rid of this nasty internal explorer rich underline yeah okay guys so our page is ready thank you very much for watching i hope you find this useful and if you have any questions don't hesitate to um to ask them you can find us on the facebook group you're going to find all the links in the description down below so please check it you're gonna find a link to this files over there i'm gonna find a link to the starter so you can start you can um follow this lesson and code with me and this is the first part of the tutorial actually because this is gonna be our starting point to our second tutorial on php where i'm gonna teach you how to uh change this website to split it into multiple pages and how to generate them using php so if you don't know how to use it if you want to learn php if you want to learn backend then this is going to be perfect perfect option for you so please check um link for the tutorial in the description down below don't forget to subscribe to our channel if you don't want to miss more videos like that and don't forget to turn on notification uh if you enjoyed it please leave a like this will help us to reach more audience and yeah thank you for watching and see you in the next second part of this tutorial

Channel: Keep coding

Views: 56,982

Keywords: Bootstrap, MDBootstrap, Web Development, Web Design, UI Kit, Landing Page, Bootstrap tutorial, Step by Step Tutorial, Bootstrap 5, Material Design, tutorial, how-to, guide, explained

Id: 1v_XcJsGtyA

Length: 45min 41sec (2741 seconds)

Published: Tue Jul 28 2020