Create a stunning, responsive portfolio website with Bootstrap 5

Watch other courses

In this video we're gonna show you how to build portfolio website using just Bootstrap 5 (HTML & CSS). It gonna be page which will apply to any profession where you need to present your work & projects in a nice looking portfolio. We're gonna build this portfolio website which will have feature some my recent projects my recent blog post and short contact form which allows users to send me and message so without further

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