Build a Landing Page using Bootstrap 5 - Step by Step Tutorial

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