Create a stunning, responsive portfolio website with Bootstrap 5

00:00 hey guys it's David from MD bootstrap 00:02 dot-com and in this video I'm gonna show 00:04 you how to build this website using just 00:08 bootstrap 5 so I'm gonna change myself 00:11 into an architect for this evening an 00:15 architect which needs his portfolio 00:18 website so we're gonna build this 00:20 portfolio website which will have which 00:23 will feature some my recent projects my 00:26 recent blog post and short contact form 00:30 which allows users to send me and 00:32 message so without further ado let's get 00:36 started 00:36 I've prepared empty project with nothing 00:41 except images here so you can see 00:45 different images and by the way this is 00:46 the moment where I would like to really 00:50 send all the kudos to amazing 00:53 unsplash.com I don't have any 00:55 affiliation from that so on a commission 01:00 it's just a great website where you can 01:02 get all the images for free and what is 01:05 even what is amazing is that people are 01:07 just making this this is awesome 01:09 pictures over here and allows you to use 01:12 them for free like entirely for free so 01:17 if you open one of them you're gonna see 01:19 here download free do whatever you want 01:22 so so it's amazing that people are doing 01:25 this kind of stuff ok guys so first 01:27 thing we have to do is we need to 01:29 download the bootstrap 5 so just 01:33 navigate to the bootstrap 5 web page and 01:36 then hit download button and we're gonna 01:39 use just compiled CSS and J's files that 01:42 that's gonna download file here let's 01:45 let me open this one and another window 01:49 it's online second display so what I'm 01:53 doing I'm just unzipping this one and 01:57 opening and we we have here like CSS and 02:00 J's files so what I'm gonna do I'm just 02:02 gonna copy down and let's get back to my 02:04 workspace so this is my project folder 02:08 I'm gonna paste it over here 02:11 and we can we see them here now so now 02:16 let's add new file called index.html 02:21 let's start with a basic set up 02:28 portfolio let's do it like this 02:32 we also need one file for our stylist 02:37 we're gonna hold style.css let's open 02:40 this one up and now let me do something 02:44 like this I'm gonna increase font for 02:47 you so so you can see that better and 02:51 obviously what we have to do is to link 02:56 link a bootstrap first so CSS dot slash 03:02 bootstrap and we're gonna use bootstrap 03:05 mean obviously we we could also link 03:10 bootstrap J's but we're not gonna use it 03:12 in this in in this project so I'm not 03:15 gonna do that and so let's just link our 03:19 stylist so CSS stars CSS okay guys so 03:25 that's ready so since this one is ready 03:29 let's let's continue what are we gonna 03:33 do we're gonna use container to we're 03:38 gonna use container to set up our layout 03:43 for the page so as you have seen let me 03:48 open the preview we have this this 03:51 layout where we have this left column 03:52 and the right column and when we shrink 03:55 the account so our page is responsive so 03:57 when we shrink it it will behave like 03:59 this so it will change its size so let's 04:05 start with the ones that one we're gonna 04:10 use bootstrap grid for that so I'm gonna 04:14 start with 04:19 container fluid so we want and this one 04:24 to take the whole width available and 04:28 now let's add some oops 04:31 row into it and we're gonna add two 04:33 columns so when I use call MD for and 04:38 we're gonna use and this is gonna be our 04:39 left column and let's add also right one 04:46 and let's add all the show panel right 04:56 to this one as we gonna we're gonna 05:00 we're gonna style it a little bit right 05:02 later 05:03 and it's gonna be over right side so 05:06 let's see how it works go live open life 05:13 sir okay so for now nothing fancy you 05:15 can see that we have this two columns 05:17 over here so we have this left one and 05:21 the right one okay now let's start with 05:27 with the left one 05:29 um so what we want to do we want to 05:35 create this we want to have this left 05:42 side which is sticky which is sticky too 05:48 which is sticky basically right so it 05:50 doesn't move so when we scroll the right 05:52 side it doesn't it doesn't move but 05:54 obviously on the other hand when we 05:56 shrink the account shrink the window 05:59 then we want this one to stay at the top 06:03 and then this one moved to the bottom so 06:08 in order to do that I'm gonna add some 06:12 extra leaf over here 06:18 I'm gonna call infra left then I'm going 06:22 to add another container here so I'm 06:25 using greet again then again obviously a 06:31 please keep in mind that we could do all 06:34 that stuff using different options using 06:37 CSS options but my goal is to show you 06:40 how you can achieve that using bootstrap 06:42 so let's add row' and let's add some 06:49 column over here and what we want to do 06:51 we want to start with this image which 06:55 is avatar so we're gonna use this one so 06:59 this is just like user avatar okay and 07:05 let's add some class to it so we're 07:07 gonna add some styles so let's also I'm 07:10 gonna be called avatar 07:13 okay now let's have a look at the 07:17 preview whoops it's like huge avatar so 07:20 let's move to our Styles now so what we 07:25 gonna do 07:25 we're gonna start with setting our body 07:28 and HTML to fill the full height of the 07:33 window and let's do something else let's 07:38 also set few more options so I won't 07:43 have this light feeling light design of 07:49 the page so I'm going to change font way 07:51 to 200 so this is gonna make our font 07:56 lighter let's set default size of our 08:03 font to one and a half Ram and let's set 08:06 it holo color to something like 4 4 4 08:10 which is not black but it's still 08:13 visible so it's not like a very harsh 08:17 okay now obviously nothing to change 08:22 here yet so what we also want to do now 08:24 we want to take care of this if in throw 08:29 left so let's do this now so 08:31 intro left and what we are going to do 08:35 we're going to set up a background as 08:40 URL to our image so we have this image 08:43 number 1 and we want this one it's not 08:50 visible anyway you know what let me let 08:57 me get rid of this for a second 08:59 so we could see more here ok so and now 09:04 it's not visible obviously because our 09:06 div is an empty right we don't have 09:10 anything here yet so okay so let's do it 09:15 differently let's start with avatar so 09:18 let's we want to make it round and we 09:24 want to make it smaller so let's set it 09:32 to offset this with 210 Ram oops 09:37 the same the same goes to height which 09:41 is 10 Ram as well and we want to add or 09:45 set it border read use to 50% and if i 09:50 only can type it correctly then it 09:54 should do the work and let's add some 09:58 margin okay and now we can uncomment 10:02 that one ok now we have it smaller 10:09 that's cool what we can see here is that 10:12 our thief is taking the whole wave so 10:16 let's fix it now so let's get back to 10:20 this intro no we need to set this 10:28 position 10:31 position two relative and we want and no 10:42 sorry we don't want to position:relative 10:44 obviously we want this position to be 10:47 fixed and we want to fix it to the left 10:50 so left zero okay now we have it here 10:56 but it's too small so what we need to do 11:00 we have to set its width so let's add 11:04 with and since we have our bootstrap 11:08 layout which is forc using four columns 11:12 against eight columns so it's briefly 11:15 like 33% so let's set it to 33% and 11:24 let's see how it looks 11:25 yeah now we have the correct wave so 11:28 let's give a height to 100% and yeah 11:33 okay now we have this one here okay so 11:37 left side is looking better but what we 11:41 also want to do is that once we shrink 11:44 this one then we don't want to keep it 11:50 on the left side we want to nest it 11:51 right so what are we gonna do we're 11:56 gonna add a media query so I'm gonna add 12:00 this add media max wave 7 6 8 pixels 12:06 which is kind of standard and we want to 12:10 change this intro left mm let's give it 12:14 some height height let's say 13 VH so 12:21 there's gonna be relative to them all 12:24 right of the window and margin bottom 12:30 the wind barging let's see let's 12:34 let's set it now we don't need it 12:38 actually for now let's let's reset it 12:40 and change what is Morris important 12:43 change please position to relative right 12:45 so now we want this to be relative and 12:50 we still want to have this 100% width 12:54 and now our page is is nesting our our 12:59 intro our left side is nesting down 13:01 below the other okay so now let's align 13:10 or Center this vertically and 13:14 horizontally so how can we do that we 13:20 gonna use it again then again there are 13:22 multiple ways we could possibly do that 13:25 but since this is about bootstrap 5 13:27 we're going to show you the bootstrap 13:28 way to do that so there are two classes 13:32 which we're gonna use we're gonna add 13:34 them to our row so first its text Center 13:37 and this will Center its horizontally 13:43 and the other one is a line items center 13:47 and this should align it vertically but 13:53 it's it doesn't do it or actually it's 13:55 doing this but we can't see it and the 13:58 reason behind it is because it's 14:02 aligning to the center of the row so you 14:06 can see that this is currently exactly 14:08 in the middle in the center of of the 14:11 row but our row isn't like doesn't have 14:13 a full height right so we need to do 14:16 something about that 14:17 so what are we gonna do why are we gonna 14:19 do a small fix cure and I'm gonna add 14:22 some class we're gonna call it full 14:26 weight full height sir and this this is 14:33 gonna set our heart 14:36 to 100% okay obviously we need the class 14:41 selector we could 14:43 I mean someone might ask why we don't 14:46 change for example a row but obviously 14:48 we don't want to mess up and overwrite 14:50 bootstrap styles so we're just gonna use 14:53 this class and what we're gonna do we're 14:56 gonna add this class to our row and this 15:04 doesn't work yet and the reason behind 15:06 it is because the row is taking the 15:09 whole the all available space which 15:10 which it has which is obviously the 15:13 parent & parent is still small so we got 15:16 we also need to enlarge this one and now 15:19 we've got this one 15:21 centrally vertically centered so let's 15:26 add in some name and the title over here 15:30 or or something like a title um so we 15:41 can get rid of this one don't need it 15:42 for now and let's add some heading 15:48 perhaps so actually you know we're gonna 15:51 use it's not heading so it's at this 15:54 paragraph and give some name and let's 16:00 add some subheading and design okay 16:09 let's have a look at this one 16:10 so it's there however it's well it's a 16:15 little bit too dark 16:16 so let's make it let's make it let's 16:20 change the color and let's make it 16:22 lighter so what we want here is that we 16:27 want this color to be I would say white 16:31 let's make it okay 16:38 yeah now it looks cold bad let's enlarge 16:43 let's enlarge this this first paragraph 16:48 so what we can do we could possibly add 16:51 this class like h1 let's say which is 16:57 available there in bootstrap so this 16:59 class gives this a heading style to 17:04 something which you know unnecessarily 17:05 is something which unnecessarily is 17:10 heading because you don't there are 17:13 situation where we didn't want to use 17:14 having like this what is not heading 17:16 right but we want to look like a heading 17:18 um so you can use this one but there is 17:21 something else and actually there are 17:23 this display classes like this play 1 17:27 which will make it a little bit lighter 17:29 which I which I prefer and I will bit 17:32 more verbose and it's not dead enough 17:35 thick anymore so let's just make it 17:37 smaller than c4 a little bit too big 17:43 then side 5 or even 6 don't make it too 17:49 let's not make it too big okay so the 17:52 left side seems to be seems to be ready 17:55 now so let's move now to the to the 18:02 right side and let's see what we have 18:08 here let me quickly have a look at our 18:11 page so okay so we what we looking I 18:15 have here is this gonna be our heading 18:17 subheading and some quote over here and 18:21 some paragraph here ok let's let's do 18:23 that now so let's move here to the right 18:31 side and let's add some section it's 18:39 gonna be called I'm gonna have class 18:41 quote okay so let's go to to bootstrap 5 18:51 dogs let's go to bootstrap five dogs and 19:01 that's search for quote like okay we 19:07 have it here yeah this one looks cool so 19:11 I'm gonna use this one let's add it 19:16 let's change it to something related to 19:19 architecture so I have this ready okay 19:26 let's see okay it's your now great okay 19:33 and yeah for now let's leave it yeah 19:36 we're gonna we need to we need to move 19:38 it to the right side right so we're 19:41 gonna use it we're gonna do that using 19:46 using float so I'm gonna add this called 19:50 selector here and I'm gonna say float to 19:53 the right okay now let's see yeah and 19:59 there on the right side let's do 20:03 something else 20:05 let's since we're gonna use more 20:09 sections so I'm just gonna use I'm gonna 20:12 add styles to all sections to give some 20:16 padding all right so we don't we don't 20:18 we want to add some space between those 20:20 so let's add let's add this some 20:27 padding's here or actually no not 20:31 padding let's add margins let's say five 20:35 RAM for now that should do and change 20:39 now let's don't change font yet or 20:41 actually let me have a look yeah that's 20:44 little less let's play with it 20:48 I would say what do ya think 20:55 now it's neat okay now the next section 21:01 is so this is section quote so let's add 21:06 another section and another section 21:08 we're gonna call it 21:11 intro so section dot intro tap whoops 21:15 intro tab and what we have here we want 21:23 to add headaches I'm gonna have a 21:25 heading one beautiful and and forth for 21:35 you page this number one heading two 21:41 will be that's I built with bootstrap 21:45 five okay let's save it 21:50 yeah it's okay but again it's too fake 21:57 so what I'm gonna do and I'm gonna use 22:00 this class display again so I'm gonna 22:02 say display for and I'm gonna use this 22:07 play six to this one let's have a look 22:16 yeah now it looks better if we remove 22:20 this one yeah and let's let's add some 22:27 margins now actually we should have 22:31 large margins already because this is 22:34 sections so we messed up oh okay now I 22:37 see I didn't put them inside this intro 22:40 section 22:44 [Music] 22:46 yep now they are cool and finally let's 22:52 add some paragraph down below so we're 22:57 just gonna add some paragraph here I'm 23:00 gonna add some text and let's have a 23:06 look 23:06 yep let's know I want to add some 23:09 margins between those two elements so 23:11 I'm gonna use bootstrap classes again so 23:15 I'm gonna just add MB which stands for a 23:17 margin bottom and let's save 5 whoops 5 23:21 should do yeah 23:24 now it's down below okay now let's add 23:27 this new section with our projects so 23:33 section project ok and now what we're 23:40 gonna do here is we're gonna use 23:43 bootstrap grid again so let's start with 23:48 some heading so its subheading obviously 23:51 and we're gonna use this display sixth 23:57 class here and yeah we're gonna place it 24:03 in correct location like here and let's 24:08 say this is my project 24:11 ok and now what do we want to do we want 24:16 to add obviously container which is 24:19 required by bootstrap grid container 24:23 flow it again because we want this 24:27 container to to feel the full web 24:30 available let's add row' and we need how 24:35 many how many 1 2 3 4 5 6 7 6 columns 24:45 here ok so let's do it and so we're 24:49 gonna use call and these 6 6 because as 24:56 you know the street 24:58 uses columns which is some up to 12 so 25:00 we gonna if this is six then we will 25:01 have like 6 plus 6 which is 12 and then 25:04 the newline and when we shrink our 25:08 screen below this MD breakpoint it will 25:12 just use the full width so let's have a 25:14 look at this one and we need 6 of them 25:19 and let's add some image with class 25:27 image fluid okay so here we have no 25:37 let's do multi color here and let's add 25:43 image /g one I'm gonna change it and 25:50 it's a this is our port for your image 25:54 and let's also add class because we 26:01 probably want add some extra some extra 26:05 stuff to our images and what I'm doing 26:09 right now it's called multi cursor so 26:11 you can do it and just by pressing alt 26:13 or option and clicking in multiple 26:16 places and then you can edit a few 26:18 things at the same time okay so let's 26:20 just change these images here quickly 26:24 and let's have a look at the preview 26:30 yeah I think they look good what we want 26:37 to do we want to add this little bit 26:39 spacing over here so we can do that by 26:46 adding gutter 26:52 class to our row so this will add this 26:56 will at this spacing over here yeah I 26:59 think this this looks good actually 27:03 let's see how it looks on mobile so once 27:08 we reach this breakpoint yeah they will 27:11 just nest one below the other and yeah 27:14 and it really looks cool okay so I think 27:18 this section is done for now let's move 27:21 to the next section then which will be 27:24 the block section so all this one and 27:29 we're gonna have and we're gonna have 27:33 this block section so section block okay 27:39 what we have in a block section its 27:44 let's copy this one so put it here and 27:49 say my blog okay now again we're gonna 27:55 use grid again fluid we're gonna use 28:03 gonna have the row and we want to have 28:07 we had what we had here we had three 28:12 blog posts here right so one two three 28:17 so we're gonna use columns with the size 28:26 of four right because 3 times 4 gives 12 28:29 okay so call MD 4 and we need 3 like 28:36 that right and now then again let's go 28:42 to the bootstrap a dogs and I'm gonna 28:46 use a cart with drop cart okay 28:54 yeah I like this one with image let's 29:00 copy this one again and paste it over 29:04 here okay right now we need to change 29:08 this image so we want to use image block 29:12 one then we want to use change that one 29:17 image block two and the last one will be 29:22 image block three okay we have it here 29:31 now what we are missing here is that we 29:38 need to add some we need to add a little 29:41 bit spacing here so let's say margin 29:44 bottom five which will set it to five 29:47 REMS whoops 29:50 yeah spacing is there let's change this 29:59 let's change text here let's see how it 30:03 works let's do it 30:14 okay and let's do it like great more 30:23 mm-hmm okay 30:25 yeah I would change one more thing here 30:31 and let's go to components buttons I 30:41 would use different let's say this one 30:44 light or you know what or even something 30:47 like this for example secondary so let's 30:51 use this one instead 31:05 yeah that looks cool and let's try to 31:11 float it right yeah that looks better 31:18 okay so we have this one read more over 31:21 here and let's do the same with with 31:25 remaining ones 31:36 yeah okay so I just noticed that we are 31:40 missing one tiny thing which is a link 31:45 to which will which will link us to 31:47 another page with more projects and more 31:49 blog post so let's do let's add it now 31:53 so it's gonna be just just normal link 32:03 so let's have it 32:05 let's get back to projects and we want 32:10 this one to be here so see more okay 32:26 let's add some class to this one to 32:30 float it right and add some margin top 32:35 yeah and now let's add some styles to 32:42 our link to change it color let's say 32:48 some pups something like this should 32:50 work okay and let's get 32:58 let's get rid of decoration yeah now 33:01 it's more neat well maybe we can also 33:12 yeah more to the right a little bit and 33:15 now let's copy this one here at the end 33:21 of this section and I just change it to 33:23 read more yeah cool 33:29 so the next one almost the last one oh 33:34 by the way now you can see that this 33:35 this one is sticky right finally because 33:37 we have enough content here okay so the 33:42 next section will be what it is is 33:49 contact for all right let me check yeah 33:51 this is contact form so let's call it 33:53 contact and what we won't do again we're 34:00 gonna go to forms 34:02 that's overview and this is nice but 34:07 this is email we don't want this one we 34:10 want oh this is cool 34:13 email contact we're gonna add name here 34:16 okay so let's add it and let's see how 34:25 it work and it looks yeah okay it's fine 34:32 and now let's fix it 34:40 so this cannot be actually no let me let 34:52 me copy paste this one so we have this 34:54 one that's gonna be name and input type 35:02 text not email 35:13 some placeholder update this one is 35:17 email a little bit of this and this one 35:22 is message okay okay so technically we 35:31 could leave it all as it is but let's 35:33 set this name and email next to each 35:37 other and leave this text area down 35:40 below for the full width and let's also 35:45 add some button to submit our form so 35:50 what we gonna do we gonna use a greet to 35:52 set this next to each other on a desktop 35:55 screen size and obviously on the smaller 35:59 screen it's going to nest one below the 36:01 other so let's let's start with adding 36:05 our greet to it so what we're gonna do 36:11 we're gonna add container actually I 36:20 think it will be also wise to add this 36:25 and this heading over here and say 36:38 something like contact me 36:47 okay let's go look 36:52 yep now let's add grit so we're gonna 36:57 have containing our fluid now row and 37:04 now we need to call em d6 twice and 37:13 we're gonna put the name into the first 37:19 one 37:20 now we're gonna copy and we'll actually 37:23 cut and paste it here now we're gonna 37:28 put the last one in call em d12 so let's 37:34 take this one out yeah okay and now 37:39 let's get back to bootstrap dogs and 37:46 let's take some bottom here let's use 37:50 something else now so we have buttons 37:55 let's use the outline one this one dark 37:59 looks nice 38:01 let's get this one here let's float it 38:07 right and something like scent okay yeah 38:14 it looks cool now and finally we're 38:18 gonna add some small footer into to our 38:25 page so let's just add footer with 38:32 filter class 38:35 we're gonna use container but this time 38:40 we're not gonna use colons anymore we 38:45 just I'm gonna add some spun over here 38:51 let's use bootstrap text muted class and 38:56 let's say made with love boy and you put 39:10 calm and the bootstrap calm yeah we have 39:18 it here so now let's add some style to 39:22 our footer so what we want to do we want 39:25 to add footer background color let's say 39:32 white font size something slightly 39:36 smaller and margin actually let's do not 39:44 set margin yet I want to show you I can 39:48 this is the one okay I want this 39:52 background to be a little bit grayish so 40:00 let's add tip on the write something 40:06 like background color like II saw 40:14 something like very light gray and now 40:18 we see this this this footer has this 40:24 small margin over here so that's why we 40:28 want to add this margin set zero 40:38 okay and no we need to get rid of this 40:45 small thing here and this is because 40:51 call by default and by default has this 40:54 small padding so let's adjust it as well 40:57 so what we're gonna do to get rid of it 41:03 we gonna add your X 0 which will rest at 41:12 our padding in x-axis so now we have 41:18 this full width and what we would like 41:21 to also do is to Center this text here 41:28 so let's add put stroke last text center 41:34 and now we have it here ok and oh by the 41:38 way this one doesn't resize properly 41:41 let's see why it is so now I see ok so 41:48 we have style here 18 RAM and this is 41:50 like hard coded and I just copy paste it 41:53 from dogs 41:53 so since obviously we are using grid we 41:56 don't need this style here we want to 41:59 remove it and let's see yeah now it's 42:03 responsive right this is something which 42:05 we want ok and finally let's let's add 42:09 some nice feature to our background so 42:14 we're gonna add some mask here in order 42:18 to do that we're gonna use 42:24 some generator or so we have like masks 42:27 like here and yeah let's do something I 42:33 don't know like this let's say maybe 42:38 like that something like let's try this 42:47 one 42:48 so I'm gonna copy this clip off it 42:49 generates clip path or a scout and let's 42:54 do one think what we gonna do we're 42:57 gonna add background here this is empty 43:08 div and we're gonna add some styles to 43:11 it so background 43:25 mmm-hmm with 100% 100% okay 43:37 we want to move it to backward so it 43:42 doesn't cover anything and 43:44 position:fixed and finally we will paste 43:50 this creep buff which we used let's have 43:56 a look I know it doesn't work because we 43:58 have this one so let's comment it out 44:01 for a second and yeah you can see we 44:04 have this nice mask over here which 44:09 stays like that obviously we can play a 44:12 little bit we have a shape so it looks 44:17 like this now it it has this extra 44:19 effect and let's see how does it work 44:23 yeah 44:24 also it behaves correctly on a mobile 44:28 device so we have this name this form 44:35 footer everything seems to be working 44:39 fine okay so thank you very much for 44:43 watching I really hope you find this 44:45 video useful and if we enjoyed don't 44:47 forget to leave a like down below and if 44:51 you don't want to miss more tutorials 44:52 like this don't forget to subscribe to 44:55 our Channel enter a notification on 44:58 thank you for watching and see you in 45:00 the next video