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

Watch other courses

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. We're going to build this website with Bootstrap 5 only and a pinch of CSS. The page will be fully responsive, so regardless of whether you are on while browsing this - mobile device or tablet, in any orientation it stays displaying correctly.

This is the first part of the tutorial. It's starting point to our second tutorial on PHP where we're gonna teach you how to change just created website and split it into multiple pages and how to generate them using php. You don't know how to use PHP, and you never before tried backend, but you want to learn it, watch our second part 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