Responsive Bootstrap Portfolio Website with Bootstrap 5

Hello everyone this is Kenneth Broni from  KenBroTech tech and welcome back to the channel   so in this video we are going to  build this interface using bootstrap   and trust me everything you see  over here is with bootstrap 5.1   and at the time of recording this video this is  about the latest version of bootstrap there is no   single line of css in this particular interface  and we are going to see everything as we build   along so i have vs code open up over here and the  resources i need for this one are the three images   in the design so here we have this image  and the next one is this image over here   all right so i'll leave the link in the  description below of all the resources you   need for this particular project so over here i'll  create a file and i'll call this index dot html so i think i need to respell this index all right so since you are using bootstrap  you need to get the bootstrap cdn and the link   is going to be getbootstrap.com i'll leave this  link in the description below and i've covered   this in other videos i'll leave the link in the  description of a playlist where you can have   access to the very basic to advanced concept of  bootstrap so i'll click on this link all releases   and i'll click on the version 5.1 then  i'll scroll down and come and click   to copy the starter template over here  so right over here i'll just paste this   and i'll save this i'm going to open this up in  live server so i'll open it up in live server   and here we are we have this over here  okay so i'll need all these tabs showing   up over here because i want to have a  preview of what we already built and what   we are building now then i also need the bootstrap  website over here because you're going to grab a   lot of things over here like i said i've already  covered this bootstrap in the other videos and   i just wanted to move very fast so the first  thing we are going to look at is a number   and we have to come in here and first of  all i want us to change the title to whom   so i'll put up a comment over here i'll get rid  of this and i'll put up a comment over here so   i'll call this number then what i'll do is i'll  duplicate this so shift alt and the down arrow   key and i'll bring ending up over here so that i  know where it is starting and where it is ending   so i'll get into getbootstrap.com  and i need to go into component so   just over here i'll go to components and within  component i have navbar over here so i'll click   on this link and we'll pick up this one and do  some view modification to it so i'll copy this   and i'll just paste it over here so i'll do a ctrl  v and ctrl s to save now when i come back here   we see this navbar showing up so what we have  over here is this entire thing is within a   container class and not a container fluid what  you have over here is in a container fluid   so in order to get this done we just  need to come to the very top over here   and you can see that we have this originally  in the container fluid so i'm going to clear   this fluid and now we have the container class so  and see that another is beginning to take shape   now with the final website you can see that this  we are going to get rid of this and we are going   to center this in the middle so what i'm going  to do is you're going to get rid of the form   so the form is somewhere here and this is the  form so i'll just get rid of this and save and   in order to get let me show you in order to get  this centered there's a simple trick that we must   look out for so there's a number that's enough  class over here and there's a on ordered list   you will tag okay and that's where we have the  link and everything over here okay the home the   link the drop down and everything so what i  want is this particular me o2 that's imagine   and o2 when i do margin stats auto and save this  it's going to float everything to the right as   you see over here or to the end so when i  just do m o 2 m o 2 is going to put this   in the center and that's exactly what we have  over here so i'm going to change the names to home   portfolio block and contact us as we have over  here so this is going to be home portfolio then we have block then finally we have contact us over here so i'll save this and you have home portfolio  block contact us and that's exactly what we   have over here now what i also did was i put  the shadow utility class on the nav so that we   have that shadow effect in order to get that done  you just need to come to the very top over here   where we have another class you can just add in  the shadow utility class so i'll just do shadow   and i think yeah we are in business so this looks  cool now the next thing to do is to change this   nav over here so i have brands and style so for  brands and style first of all i have an icon over   there we are going to look at the icon but what  i had over here was i had a span tag like this   okay so this is where the icon will sit and i also  had another spam tag and i had brands and style i'll save this and we are going to search for  the icon but then this is just a preview so   this is the brand and style as we have it over  here and we are going to just change the icon   over here so once again into bootstrap and we are  going to go and click on this icon link over here   but the first thing we need to do is to do the  installation obviously so i'll click on install   and it will send me down we are going to use the  cdn so with the cdn under this section i'm just   going to click on this to copy the link and i'll  come in here and inside of my head tag like i said   i've demonstrated this in the other videos so you  can just take a look at them so i'll say bootstrap icons cdn then what i'll do is i'll just paste it over here   all right so now you can go in and grab some  of the icons over here so i'll quickly go up   and i'll do a quick search i think the name of  this icon is strava yeah so i just click on this   and i'll just click on this to copy it and i'll  come down here and paste it here and i'll save   so after going through that process here we have  we have brands and style and as you can see we   had this a little bit i mean reaching the color  over here that's why i put it in a span tag so   that we can apply a bootstrap class on it so i  can come in here and do a class of txt dash info   so when i save this and come back now you have  this okay so the next thing we are going to look   at is this image over here and how we style  things over here now what i have over here   is i have um a rule okay i have this section a  row and i've divided it into two columns okay so   here's all six and this is also called six so what  i can do is just under the end number and that's   why i have all these commented out over here so  that i'll know exactly what i'm doing so i'll see profile section and i'll do it alt i mean shift  alt down arrow key and i'll end this session over   here so what i need is i actually need a container  class or no this is going to be a container fluid   because it's going to stretch across so i'll  come in here and do a dots container dash fluid and what i need is i need a rule and i  need a call and i'll do call dash md-6 so first of all the first section is going  to have the image and let me just add in   the image over here and i'm going to  navigate through my images folder and   what i need is an image or img dot g peg and  i'm just going to have a profile image over here all right and if i come back here you  can see that the image is very huge we   are going to size everything up and that's  very simple you just have to come in here   and add in a bootstrap class of img dash  fluid so when i do img fluid and come in here   and we can see that now things have been sized  up okay so all that's the img fluid does is it   is making this entire image taking the original  size of the call that we have over here okay   so inside of this we can also have a call dash  md and it's going to take the other session and   we are left with six so we have to choose six  and some of the few things we have over here is   we have this text showing up over here so this is  the text so the ui slash ux designer and software   engineer all that we need to do is first of all  this is what i did i had a paragraph in here   and inside every paragraph i had a couple of span  tags so i have the ui slash ux because as you can   see this is one color and designer is also going  to be another color so designer is also going to   be in a span tag so i'll come back here and do a  span and then i'll do designer then what i did was   i had an end also in span it's kind of a little  bit i don't know what to say but that's what i did   then the next one was software engineer was also  in one span tag so there's also software engineer   all right so i'll save this and  let's have a preview of what we have okay so we have this showing up this way  okay now we are going to find me some ways   to increase the font size and what i did  was i used a display font size over here so   with a typography i and just coming inside of  the paragraph because everything is going to be   a display okay so i can do  a class and i'll do display   dash too so when i do a display  dash 2 and come back and see that   things are beginning to look better okay at least  with a design so i also had everything capitalized   so i can do a text uppercase or the test  transform property so txt dash uppercase is going   to transform everything into an uppercase and  that's exactly what we have over here so there's   i mean there's supposed to be some kind of  spacing okay because with original design you   have some spacing over here and probably i think  i did a display for let me try display for nc   okay so i think display 4 is looking good so what  i remember doing was i also added a line height   over here so let me come back and also do a line  height dash lg to come up with a long line height   and things are beginning to look cool over  here now i just need to add in the colors   so the colors i had in this as warning  then i had success danger and primary   so this will be a class of warning txt  dash warning txt warning then the next one   which is the designer i'm gonna have a class  of txt dash success for the green color then the end is going to be a danger so class  of txt dash danger then the software engineer   is going to be a class of tsc dash primary i'll  save this and i think we are in business one way   or the other okay so i think there's some kind  of spacing that needs to appear over here and   let me have a look at it let me do this and save  and here we are all right so as you can see this   is almost like centered in the middle okay so  what i'm going to do is i can come to the very   top okay this is a parent class that's a rule  and first column six is having the image and   the other is having this text we are displaying  over there i need to come into the row and do a justify content and i'll do center so this  is almost like the flexbox properties we are   trying to apply over here and when i come we don't  seem to see anything yet but then we are gradually   going to see the change with the next property add  and that's going to be the align items dash center   so align item center is going to center everything  over here for us and that's exactly what we have   with this so the next thing i need to do is to  bring in the rest of the text we have over here   but one of the things i also did was i applied a  classifier so as you can see the number is sticked   to the top okay so whenever you scroll down the  numbers is where it is and with this one it is   disappearing so we just have to come back to  the very top of the navbar class okay and i'll   just do sticky dash top so sticky top is going  to make it stick to the top so back over here   now when i scroll you can see that everything is  sticking to the top okay so now let's continue   so the next thing i need to add is this text over  here so i am kenneth bruni and what i did was   they also in a display dash for like so i  can put up a class like this and i'll see i am now see kenneth let me do this capital i but  i don't have to come and change a lot of things   over here and i also did um something like a font  wait and i did bold over here so i'll save this   and i'll just duplicate this so i shift alt and  the down arrow key and i just change this to brony and let me type in brownie over here  okay and i think yeah that's about it   over here then the next thing i need to work  on is the buttons the two buttons over here   and that's where they about me and hire me so  they're about me and having those are just links   and i can just put them over here so  inside of a div let's put a d over here   and let's have a link tag or an anchor  tag and let's just type in hirami and what i had over here was also   the bootstrap icon but now so i can just come in  here and come and copy this so i'll do a ctrl c   and i'll come down here and put it over here and  all i need to do is i had a class of btn btn-info and i think i had a txt white then so let's save this and  see how things will look like so this is looking great and i use  the rounded peel around it okay   so for the rounded peel that's also very simple so  i just have to add a rounded dash peel over here   and what i can now do is i can add in  a class of my okay so margin to the top   and but some of let's say three so i'll save this  and now when i come in here it is looking good   um i don't know exactly but then it's  looking at like the original so i have   i me over here i need to have about  me so i'll just grab the hole of this   and i'll do a ctrl c and paste it over  here so i'll change this to about me and i'll save this and yeah i think we are  in business so i just have to separate this   a little bit so that is just going to be imagine  over here i can put in a margin over here so let   me just do imagine and this is going to be  a margin end okay no i think imagine stats   let's do a margin start of three  when i save this and come back here okay so it's supposed to be a  margin end so margin end of three and here we are okay so this is looking  awesome all right so the next thing we   are going to look at is um with  this session over here so i have   this text so let me just copy this  text okay and let's just come in here and inside of this i mean under this if we  can come in here and let me check this one out   so this is a call okay we need to come under the  call and let's just have a div okay let's just   have a div and let's have an h3 and paste this  over here i'll do a ctrl s to save and here we are   with this particular text so now we just need to  apply some margin to the top and kind of center   this so in order to do this i'm just going to  give a class over here of txt dash center and   i'll do an empty so margin to the top of four let  me see this and come back here okay we are making   some progress i think the margin to the top is  a little bit wider than what we have over here   but then let's copy this message over here  so that enables us to find ourselves and lose   ourselves at the same time i don't know who said  this but that person definitely says something   then what i think i have this in a paragraph  so within this paragraph also has some   classes over here so i can do a class of um  the font style okay so i can do the font style   and i had this italic so this is italic and  once i come back here you can see that we have   this showing up over here now we need to have  some space down okay because there's some space   over here so i think we just have to come in  here and give imagine bottom let's do five so let's come back here and yes we have this  margin bottom over here now the next thing we   need to concentrate on is with the portfolio  session okay so let's come back over here   and let's get out of this profile section and  let's create another session so i'm going to add   some comments over here then i'll say profile  section then i'll do a shift alt down arrow key   to duplicate this and put an end to the profile  section so let's see the profile session the   profile session will be or it is in a container  class and we have some rules and we have some   columns over here okay so let's do a dot container  to have a div of class container and we have a row   now inside of the row we have um one two three  four so this is four sections or four columns so   it's going to be three each so let's just design  one and duplicate the other so that we can move   very fast over here so i'll do a dots call dash md  and i'm gonna do mds 3 because i want four of them   so i'll do md3 and before we even  proceed let's have this portfolio   typed in over here so i'll just copy this  ctrl c and just above the rule i have an   h3 and i'll paste this over here and  let me see something okay so let's just   have the entire rule have a class of txt dash  center so that everything will be centered   and let me have this portfolio have a class  of txt info so that it'll have that full color   so inside of this score i have a card so but  before we even proceed let's see exactly what's   happening over here so that we don't get  confused so this is what we've done so far   okay so this is a portfolio now let's have the  card so inside of this we can have a class of card   over here within a div and let's do it dot card  body so that we can have the card body in here   and inside of the cardboard we have a text  okay we have a text that's a bootstrap theme   so let me just copy this bootstrap teams  ctrl c and let's just have an h3 over here   no i think this should be in an h4 tag and let's  do bootstrap themes over here and we are going   to have the icon over here as well so with the  icon let me just open this and if your guess   is as good as mine um bootstrap has some level  of consistency with the naming of the icons   so like i showed in in the series you  can see that it all starts with bi   i mean the prefix bi then bi dash the name of the  icon so here we have bootstrap icon bootstrap icon   dash strava so what i have with the first one is  actually bootstrap okay and i'll show you exactly   how to get it but then that's what i did i have a  bootstrap over here so let me come back here and   come and refresh because my live server is down  and the image is going to appear so that's what   we have over here all right now let me also add in  this class over here so that's on this row okay we   can have an my so imagine to the top and bottom  let me see here to the top and button so let's do   imagine and this is going to affect  this portfolio it's going to stretch   this over here but then let's do it that way so  we have imagine to the top and bottom let's do   five so when i do five like this and see that  this is further straight so let's go and close   the margin we give on to this particular paragraph  tag over here let's go and close it down so   i think yeah so the imagine  button i don't think we need this   again so yeah this is looking good all right  so with this bootstrap class we have over here   let me see exactly what we have  let me come back to the card   and let's just first of all let me just do a ctrl  x and put this in a span tag so that's i just want   to apply some bootstrap classes over here so i  can do a class and i can give this a class of h3   so that i increase the font size of the icon so  here we have this icon being increased over here   i think h3 is even smaller zoo and each  one and see how this will look like so each one is not as big as i want  it to be so let's try um display let's do a display so i think display 4 would do it for us okay then  let's change the font size over here because it's   a little bit too big okay as compared to the  original design we have over here so let's do h3   you know h3 is rather going to  make it bigger so let's do h5   over here and let's come back and inspect what we  have it may look a little bit different but then   yeah this is cool now let's give a little bit  of a margin over here okay imagine over here so   let's imagine bottom and i think yeah this is just  about it so coming in here we can add in a class   of margin bottom unless we imagine bottom  of let's say three so i'll save this and yeah i think this looks exactly like what you  have over here now i had a shadow class on this   ad over here so let's also do that so on  to this card i have a shadow like this okay   then i think what then is the most important thing  is to change the color over here and that's why   you put it in a span tag so that we can add in a  number of classes over here so i can do txt info   for the class of the icon and this is exactly what  we want and yeah no i think this should be primary   and this should be primary as well  okay so let me change this to primary and let me change this to primary as well okay so we have this going for us and i  think we are making some progress so all   that we need to do is to duplicate this  um three at a time so i'll just come in   here and come and highlight the entire column  okay the entire column so i'll just do a ctrl c   and i'll paste this ctrl v control v ctrl  v i'll save this and if i come here this   is exactly what we've done so far now i need  to also separate this so i just have to apply   imagine button over here so that i kind of  separate this so let's come to the portfolio   and let's do a margin so let's do an mb an  mb of let's say three i'll save this and nb of three is not as good as we wanted  it to be so mb of 4 and margin bottom 4 okay i think 5 to do it so mb5 yeah and i think we are in business so now let's  change this and the next thing we have over here   is windows app ios app and ux ui design so let's  come in here and the next one is windows app   so we can do a windows for the text windows  apps and i think the icon is bibi windows   like i said i'm going to show you exactly  how to combine all these so i'll save this   and the other one is ios apps so ios apps  and i think the extension over here is apple then this one i don't remember i'll go  and check it out so i have ui ux design all right so i'll save this and i need to come in  here and come and refresh because the live server   is down all right so basically this is what  we have and we then need to change the colors   in here so i think with the colors we had um  this as secondary we had this as primary and this   was the danger color but let's  come into the icons over here   and get back to our search so like i said you  can just come in here and come in search for   like i did windows okay so with the windows  there's a windows icon we are using and   as you can see it is bibi dash windows  okay so that's exactly what i used so   let's look for the camera and i think  let's search for the word camera let's search for camera so  this is what i had so i had   camera so bibi dash camera dash reels so  i'll copy this and i'll put this over here i'll do a control v and i'll save this  and i think this was danger for the text   of the icon and i think apple was  this and then windows was secondary   for the color of the icons all right so i'll save  this and once i get back over here we have this   neatly styled over here and this is looking  exactly like what we have over here all right so the next thing is to have this session  in previous versions of bootstrap i think   with version 4 there was um there was a particular  component called jumbotron which has been taken   out so this whole section is kind of behaving  like the jumbotron okay so what i'm going to do is   i'm just going to come down here the end  profile and have a new session over here so   let me just call this jumbo section and i'll do a shift alt down arrow  key to duplicate this and give the   end jumbo session over here so as you can see  there's going to be a container fluid because   it is stretching across the viewport so we have  a container sorry so dots container dash fluid so with this container we have some few things  working out over here so the entire background is   going to be a bg info so let's do a bg dash info  over here then i also had a five around it okay so once i come in here and come and refresh  you can see this showing up over here   good let's also do a margin bottom over here  so that we can separate this so let's do   an mb of uh yeah let's do five so that you have  some space down there now once i come in here   like we have over here you can see that we have  this text okay and this button over here now   these are being put in different columns okay so i  have some columns over here and what i'm going to   do is i'm just going to copy this text so i'll do  a ctrl c and what i have over here is i have call no first of all let me have  a row and i'll do a call   dash and i'll do md-8 over here and i have  this paragraph i'll paste this over here and   the next thing i'll need is a dot call dash md4  and that's where i'm going to have the button   okay of contact me so this is going to be a  link or an anchor tag and i'll say contact   so i'm gonna put in some bootstrap classes over  here so i'm gonna have bt and btn dash info you   know it's gonna be btn btn outline dash lights  okay so i'll save this and contact me here we   have contacts over here so this is supposed to  be contact me so let's do a contact me sorry untouch me this way now i apply  some few tricks over here let me   touch on those tricks so as you can see the um  the border looks a little bit thick over here   okay as compared to this so all i did was i added  in a border okay so i did something like border   dash five okay so when i do a buddha dash five and  see that the buddha is going to be thicker okay   okay so i think this should be about three  so badass three and i think we are good to go all right so this is exactly like what we have  over here okay so this text is obviously not   looking cool okay from the way it is behaving  over here so let's come in here and i just want to   apply a class over here so i can do a class of txt  dash white then i'm going to do a txt dash center   so when i do this and come  back now you can see that   everything is beginning to take shape over here  everything is beginning to take shape now what   i need to is to increase this okay so in order  to just use a paragraph let's just use an h3   okay so that we don't have to i mean be adding  classes for adding six so we have h3 over here and this is looking like what we have over  here now we need to go into the today's blog   section okay so with the today's blog also we  have a title over here which is today's block   and so let me just copy this  for the mean time then we have   these two sessions being divided  into two calls okay so we have   a container because of the gaps over here so  you have a container so let's come in here and let's add in a section so i'll do a  comment over here then i'll say block section and i'll do a shift alt down arrow  key and i'll say end block section   so i can having the container class   i can have in my row and i can have my code  md6 then this is going to be where i have the   accordion so once again i'll come in here and  inside of my component i have accordion and we   are just going to pick up um the very first one  a very simple one so i just copy this i'm in here   and paste it over here so i'll save this and the  only modification i did over here was just change   the text so i just changed this one to let's say  block one so blog post one and we have block was 2 then we had blog post 3. all right so i'll save this and  come and have a preview of it okay   it's not looking bad okay it's not looking bad  so all that we need to have now is to have this   title and this text over here okay so first of  all the title and the title is going to appear   um somewhere at the very top okay so just  before we have these calls just under the rule   we can have an h3 and i'll have to this post  let me just go and copy this so to this block   ctrl c and i'll paste this over  here and let's give it a class of   txt dash center then txt dash primary and i'll  save this and yeah that's what we have over here so what i then need to do is to give  it some margin to the bottom so i   just come here and do mb dash and let's  do four over here and see how it looks and oh it's not looking bad but then let's make it  five all right so five looks cool okay and let's   just give the entire section imagine button  because all the um sections we have over here   will then have a margin bottom so let's just put  it on the rule so margin bottom of five all right then the next side of the call is going to  have the the image so first of all let me   just collapse this so that we don't get confused  okay so we have this accordion collapsed okay so   there's a call and this is where it ends so we  have the other session so i'll do a call md6 and inside of this is going to be the  image so the image once again i'll just do   um yes and there's a side image so i'll save this  and once we come in here you can see that this   is also becoming or behaving like what we had  over here and remember what we did we just applied   an image fluid class on the image so all i  need to do is to come in here and bring in an   image so img fluid class once i save this and  come back and see that everything is looking good   okay now what i had over here was i had this  text okay so this text let me just copy this   i'll do a ctrl c and i'll just have to  bring it up so that's also going to appear   yes under this okay so just under this i'm going  to have this particular text so let's have this in   a paragraph for now now let's do an h three let's  put this in an h3 and let's save this and i think   yeah this is it okay so we need to bring this  particular one down and yeah i think that's all   so i think yeah i applied the fonts so  let me do a class of onto it or bold and try this and see so i'll do a ctrl s to  save this and yeah yeah okay so let me just   put a margin bottom over here because i have some  space over here for us so i can do an mb of oh   i think most of my margin bottoms had been five so  let me try five and see all right this looks good   this looks good okay no so i mean this is what  we have okay so this looks good and let me see   it kind of looks different i don't know exactly  what's happening i think we are making progress so   basically we have these little little changes or  i mean slide changes coming up over here but then   the most important thing is we have this design  on and going all right so we have this section   sorted out now the next thing we need to look at  is the location so with the location you can see   that we have i mean we are repeating almost the  same thing but then applying different concepts   of things in the buildup so also in the  location we have this container fluid   because it stretches across the viewport then  we have these two sections over here so core md6   then pretty much this location everything  over here so let's come in here and let me do   um a comment section over here so i'll say  location section then i'll do a shift alt down   arrow key to duplicate this and come in here and  say end location so i'll do a container dash fluid then i'll do a rule over here and call md-6 for  the map let me just type in map over here okay   i'm later going to show you exactly how we are  going to get about this and what i need now is   i need to come in here inside  of the row and do a call dash   md6 for the form all right so with the form we are  going to get into the nitty nitty-gritty of this   okay so here we have a text so let's  have this h3 contact text over here   so let's do an h3 and i'll see  contacts save this and let's see so we have this showing up  over here let's put up imagine   let's do an mb-5 right i have the space down here  all right and now let's put out what i had over   here was you can see that there's some slides this  is supposed to be at the very top but there's some   imagine okay oh no i think there's a padding okay  the internal distance so let me come over here   this particular or where we have the  contacts i think i had a p-4 over here   so some padding yeah and i think this was just  about it so now let's look at the form okay   now there are number of things we can do and let  me show you exactly what we had so we have this   text over here so let me bring this and i'll do  a ctrl c let me add some font to it over here   and let's do a class of fw dashboard so that's we  have this thick all right this is looking good now   what i did or what we had was we had a paragraph  and i'll paste in what i just copied over here   and that's essentially what we have let me see  so there's some kind of gap over here let's do   that so obviously imagine button over here so  let's do an mb of let's say true let's do an mb3 okay so now let's have our phone yeah so what  we have over here is a text box and a few   things over here so we have the text the email the  subject and the text area so we have some inputs   so first of all let's have a form okay and inside  the form you can have an input of type text we have this text over here now let's forget  about the name and the id and let's add in   the placeholder so the placeholder  is going to be i think your name so when i do this and save and come back here you  can see that you have this name over here we then   need to add in a bootstrap class to style things  up okay so all that we need to do is to add in a   class over here so i'll do a class and the name  of this class is going to be form dash control   so the form control class is basically  everything that handles forms in here for us   so as you can see there's a form control  class but what i had over here was um   i had some kind of demarcation over here so i  divided this section into two equal parts okay   so i had like um core six and call  six over here so in order to get that   then we can actually put this in a call okay  we can actually apply and let's do this we can   apply a rule class over here onto the form okay so  this becomes like a rule then what i can now do is   and i'll just cut this okay and do a core  six so that this is now behaving like the   call within the row so when i save this and  come back here you can see that this has now   taking half of it okay this has now  taken half of it so we can now add in   other calls within that row so i'll just do a ctrl  c and ctrl v over here and now there's going to be   an email field so this is going to be an email  folder and i'm going to say let's say name at dot email.com okay for the placeholder  and this is exactly what we want   all right so there are some few things i realize  now you can see that this is a little bit small   as compared to what we have over here okay and  what i did was i just added in another class over   here so let me just copy this that's basically  the form control class an extension of it so   it's just form control dash sm remember  most of the sm things that we've spoken   about so when i save this and come back i can  see that this is now a little bit um smaller   as compared to this so that's exactly what we  did over here so let me add this here as well   sm and the next obvious thing  we have over here is we had this text field okay so this text field  is just going to behave like this   with a placeholder of um just name  or subject sorry so what i have   is i'm just going to come in down here and i'm  just going to have an input of type text okay   i'm going to ignore the things over here and  add in a placeholder and i'll say subject so subject is going to have  a class of form dash control then i'm going to make it small so i'm going  to say form dash control sm so i'll save this   and here we are okay so  something might have gone wrong actually nothing went wrong okay nothing went  wrong but i just have to put it at the appropriate   place so i'm just going to copy this and i'll do  a ctrl x and all that i need is i have this rule and okay so i just have to get a call dash  md tour and i'll just paste this over here   and i think we are in business now i need  to give this imagine so let me just apply   imagine button over here so within this um  i think within this core okay i can do an my   imagine to the top and bottom and i'll do my  three so my three is going to put us in good   shape for us okay now the last thing or the  next thing we have over here is a text area   so i can also copy this i'll do a ctrl  c and i'll paste this over here and   this is going to be a text area so let me  just be very careful over here so i'll do   text area like this okay and the number  of rules i want is the number of calls   i don't think i need number of calls over here but  the number of rules i want over here is like five   and i'll just have to add in the class okay of a  text or i mean a form control class over here so   i'll just come in here and i'll do form dash  control then i'll do form dash control sorry dash sm so i'll save this and yeah i think  this is looking good now the last thing i need   is the button the button and i think  this is making it too big imagine button   and yeah i think this is looking cool   so the button is just going to be a link tag  or an anchor tag with what i have over there   so this is going to be an input of type submits  okay and the value is going to be send message so send message then i'm gonna have a class  of bt and btn-primary then i'll do a btn-sm   to make it small so when i save this and come back  over here we can see that we seem to have an issue   over here yeah i think for the purposes of what  we are trying to accomplish over here let me just   put this outside of this i'll need to check this  out and maybe do a video to do a correction okay   but basically this is what  we have and let's do a btn-sm all right so btn-sm is going  to make this show up this way   we have this contact form being displayed now  the next thing we want to do is to have this   map okay and this is i mean this has got nothing  to do with bootstrap but then i felt it was a cool   feature i needed to add in order to make um my  interface look very nice as we had it over there   so now let's go into google map okay so let's do  a google map and let's just go and get a location so it can be anywhere okay so search for  location and let me use the university of ghana   or university of ghana cry and  what you then need to do is to get click on this share okay i want to  embed it in a map okay embedded map   so it's going to give us this iframe tag and there  are quite a number of things over here all right   you don't need to worry too much about this but  we need to copy this html so it has this copied   and we need to come in here so where we  have our map okay that's why i left this   over here we just have to put this over  here so ctrl v and then we save there are   some few things we are going to do over  here but for now let's keep it this way so if i close this one up obviously we  don't need this again you can see that   this map is showing up over here but it's not  showing us we wanted it okay now bear in mind   and let me just for the purpose of this let  me show you now when i this is the original   one that we've already built okay now when i  strike this you can see that it is responsive   to i mean everything's showing up over here and  once it gets to the very small screen size you   can see that this takes shapes and everything  is looking i mean over here all right let me   go back to what we have and i'll show what we  are building so this is what we are building okay   so far we have to resize some few things over  here but then when i shrink this you can see that   this is now beginning to behave funny  okay so you can see that it is not   um kind of respecting what you intend doing okay  and basically there are some other things we would   i mean we're also going to work on because for  instance on this smaller screen side these ones   are too stacked up okay we are going to give  some margins and we are going to fix this as   well and some few other things okay this one too  we just have to give some imagine here and there   so in order to fix this and not to make this look  a little bit creepy like we have it over here   imagine somebody using a tablet that's how the  website is going to appear and it doesn't look   too good so what we can do is we need to start  things up over here so as you can see we have   the width is 600 pixels let's change the height  to 800 pixels so i'll do 800 over here and save and the height is beginning to look um a  little bit longer okay that's not bad and   first of all let me have this location um  showing up over here so let me have an h3   of the word location all right then let me  start things over here so i can have a tlc dash   center then i'll have a tsd dash  primary so i'll save this and let's see   okay let's give imagine to the  button over here and i'll do an mb-5 okay so here we are now we need to strike this  a little bit so we can work with the height i   mean the width now let's instead of this let's  do a width of 800 and a height of 600 i think   that'll work out perfectly for us so you  can see that this is looking not too bad   but then it is over stretching so let's  decrease the width a little bit to let's say   700. do a width of 700. a  bit of 700 is not bad let's   um kind of open this up a little bit just a  little bit so let's do a weight of 710 and c all right so i think a width of 710 is not bad but  the problem still remains okay when we resize this   or get to a a medium screen size we are having  this problem over here it doesn't look cool   so what we are going to do is i  mean it's going to be very simple   and all that we need to do is to come into  the core okay where we have this map okay   and do a display flex over here so we  do a d flex like this so i'll save this i'll do a ctrl s over here and when this is  refreshed okay and now when i shrink it you   can see that it's resizes and it kind of behaves  itself okay then put it that way and now finally   when we get into the medium screen size you can  see that it changes and this is now displayed in   a better way okay so the display flex property is  helping us achieve this okay and i had to do a lot   of research on this so it's very simple but then  you have to know exactly what you are doing so   this looks cool for all screen sizes all right  now let's complete everything so that we can just   quickly handle the few patches we need to work  on so the next one is going to be the footer so   finally we are getting into the footer  and let's come down here and have this   comment over here so i have the footer and i'm  just going to do a shift alt down arrow key   to duplicate this and do end footer so the  footer i'm going to have a container fluid   because that's what it is and inside of  the container fluid let's have a background   deck and let's have a pattern of five okay so  for status this is what we are going to have   now we have um three calls over here okay you  have this call one call to call three so let's do   a roll over here and do a call md four because we  want three of them so four times three is going to   be 12 and within the first section we just have  quick links okay so let me just do quick links   and i think that should be in an um i think  a paragraph paragraph tag so let me do quick it cleans so i'll save this and let me just  have a preview of it and see okay so i need   to change the text so let's have everything  in this row or i'm in this column txtu white now that's going to conflict with some of the  things you're going to do over here so let's just   have this a class of txt dash white so when i save  this and come back here we have this quick links   showing up over here all right then all that we  can do is to bring these links over here so these   links first of all if you had to just put it in an  anchor tag anchor tags are inline elements so they   are going to be lined up okay but then we need it  in a block form so what i did was to actually put   this all in a paragraph so i have this and  i have like faq frequently asked questions   and yeah that's just about it and this is the  faq and this the faq that we have but then as   you can see this is underlined and we want to get  rid of it so i just added in a class of the text   the creation property and i did none over  here so text the creation and it's going   to take away the underlining thing over  here now what i did was to center this so   i actually centered everything so what i can do is  to come inside of the row and do a txt dash center   so txt dash center is going to center what we  have over here so that's exactly what we can see   so the next thing is obviously to duplicate this  link and changing the text services work lane so   i'm just going to do a shift alt and a  down arrow key okay and i'll do services um and i think work and the last  link is len all right so here we have   yes services workland and the quick link so i  think yeah this just um the design we have over   here okay now the next one is the social  links so with the social links let me also   try and locate the call so there's  a call we we all have to be in the   in the row okay so i'll do a dash call dash  md and it's so full over here so md4 and   we have a text of social link so let me do a  paragraph and there's going to be social links and for the social links like i said i have  these uh bootstrap icons over here so i'm just   grabbing one of the icons and um apply common  sense to change what i have in there let's   go to the cats and that's where we had these  icons showing up so let's just copy this ctrl c   and come into the footer and  let's have this in a div tag   so let me have this uncle link over  here and paste this right about here   all right so when i do this and come back  here we are going to see this i think this   is supposed to be white as well so let me  just have a class over here of txt dash white all right so this is supposed to be like our  youtube um no sorry our facebook instagram   and twitter so i think i can do facebook over  here let me see i think facebook is going to   work let me shift alt and the down arrow key to  duplicate this three times and let's see we have   facebook facebook facebook let's have  instagram and twitter so instagram instagram and twitter so i'll save this and   yeah we have this over here so now  let's start things up over here because   as you can see they are looking a little bit  bigger over here and they have some styling   so let's come in here and add in a class of  let's do an h4 and a txt dash dash primary let's save this and let me see how it looks okay i think it's just about the same size and let me give imagine x of one okay and  to be quick let me just copy this ctrl c   come in here do a ctrl v save this and also  do a ctrl v and save it as well all right then   i think this was info and this was danger  for the red color so i'll save this and   here we are okay it's looking kind of cool all right so these are the social links and the  last obvious thing is going to be the contact   s so the contact x is going to be the last  of the calls we have over here so let me just   do let me just copy this and change some  few things because this one was going to be   like this so i'll copy this and bring it over  here and the text is going to be contacts   it's supposed to be contacting me because  it's a portfolio website so i don't know who   and who is working over here so contact me okay  and all that i had over here was this telephone   um icon and the mail icon but what i actually did  was i used a proper html tags over there so for   a link tag you can actually have a link of tail  and this link of tail will have an href of tell   and we can add in any number okay so  what will actually happen is any person   who clicks on this link if it is a mobile  phone it's actually going to call a number   or this number okay it's actually going to dial  this number and the next one i'm going to do is   i'm going to do an anchor tag of mail so this  is also going to send a mail so you can do   admin at mail.com and it's going to send the  mail now you need to put in the icons over here   so for the icons let's go back to this and come  back over here and let's search for telephone so for the telephone icons we use this  one all right so let me just copy this   and paste it over here control v   like we have this and i think for the mail  it was envelope okay so let me see envelope i think yeah with this one so i'll  just copy this and come back here   and come and paste it right  over here i'll save this   and if i'm to come back here you can see that  we have these links showing up now let's do the   little styling we have over here so let's  do a class of first of all txt secondary you have that grayish color and let's do an h4  over here as well and let's do an mx and mx2   so i'll save this and i'll just copy this  so i'll do a ctrl c and apply the same   class over here as well or the same classes  actually and this is what we have okay it's almost   the same i mean there are going to be slight  differences but basically this is what we have   all right so this is what we had okay and this  is what we have built okay the replica um i   mean we've gone through this whole session one  after the other now there are some few issues we   are going to run into if we decide to look at the  responsiveness of this website and we are going to   fix them gradually so now when we shrink this okay  you can see that it is beginning to look a little   bit funny as we have it over here and that's  because we haven't made it responsive enough   it is only going to respond to this particular  breakpoint that's like about the small screen   size okay so this is what i want us to do i want  us to have at a medium screen size let's display   only two cards over here okay all two cards pero  and in order to do that let's go to the cats so with the cats and i think i made a mistake  over here i think they're supposed to be portfolio   what was i thinking all right so with the cats we can see that  all that we did was we just did a core md um   three over here actually what we should be doing  is we need to have a core md6 okay so that's at   the medium screen size we are just going  to have two columns okay so we do call md6   you can do a core md6 over here so we are changing  everything to md6 and om d6 over here as well   and core md6 i'll save this and let's have a  preview of it so this is what we want called   md6 now when it stretches very big it is be  giving funny there's no way we want okay but   obviously the small size is okay now we are  satisfied with the core md6 okay now let's look at   the lg or the extra light so  the lg is going to be call lg then we do that 3 okay so this is  very systematic you don't need to rush   about this thing so we can do call dash lg for  this one so let me just copy this do a ctrl c   and i needed to do it this way for  beginners to actually appreciate   why we need some of these things and finally  i think i'll need to have this over here all right so i'll save this and now see we  have this at the large screen size okay we   don't seem to have any problem now once  we get into the medium screen size yes   this is still looking cool and if we get to  the small screen size we don't have any problem   but clearly you can see that there are no i mean  there's nothing separating this if it gets more   and all that we need to do is to just put out  imagine why so let's do imagine y or one so that   at every breakpoint we are going to  see some kind of margin to the top and   bottom so let's just do this bring this  over here bring this over here as well   and finally bring this over here so when i save  this now you can see that you have the separation   over here okay when it gets to the very small  screen size you can see the separation as well   and obviously for the big one we don't seem to  have any problem it's only when it gets to this   particular breakpoints that we seem to have some  issues over here all right so that's the first   thing we fixed let me see the other things over  here okay so this is looking cool we don't seem   to have any issue over here all right i think  this is the other thing we need to sort out   and yeah also this one too so let's go to the  accordion and the yeah so this is the accordion   all that i need is i just want an my of one over  here and let me put an my of one here as well so my dash one and when i save this and see  that there's this separation over here and it   looks cool all right so this is obviously  okay we can also put some kind of um yeah   we can separate things over here so let's  come down here to the footer session and   we can just put an my okay so all that we  need is um for all the calls over here so   for the quick link okay for the call let's do  an my one so let me just copy this ctrl c and   yeah that's the social link the quick link  or we have this over here and finally let's   put this over here as well so i'll save this and  here we have some separation let me refresh this yeah we i mean we do have some separation  over here all right so let's look at   the final thing over here which is or which  happens to be this okay now that's like the   jumbotron session we created ourselves okay  and i think the whole issue is coming up from   this we had a call so let's do six and six and see okay so i think we had a txt center over here okay  so we also needed to do a txt center   over here so tsd dash center let's save  this and yeah i think we are okay for now   let me come back here yeah i think this is  looking pretty much like what we had with   the original design okay yeah so this is what  we had all right and on the mobile screen size   yeah everything looks cool let's kind of separate  this a little bit so we just have to come in here   and let's say do an my of one and repeat that over  here an my of one as well so when i save this you   can see that there's a little bit of separation  in this little screw now remember i did a preview   i mean this way so normally after  going through this whole thing   i also urge you to also go to your i mean right  click and go to inspect and chrome is going to   give you this interface which is um pretty much  awesome because this is actually going to give you   the exact screen size of different types of  phones okay so that you can actually have   a preview of how your website is going to look so  this an iphone x okay and this is how our website   is going to look on an iphone x and i think  everything over here looks okay okay everything   over here looks okay our map is looking great we  can zoom in and zoom out and everything is looking   i mean perfect then we have our contactors session  over here and yeah everything is looking good now   let's preview this on an ipad pro and these are  very important stuff because you'd want to know   exactly how your website is going to look on  different screen sizes okay so for an ipad   this is looking awesome not too bad then let's  look at it on let's say an ipad okay so this is   going to be an ipad interface and yeah it doesn't  look bad for an ipad and it has this overflow   around it but i don't think it's too much of a  problem and let's look at it on a galaxy phone   on a galaxy phone as well this is looking good and  yeah so this is going to be the end of this video   now you find this tutorial very interesting  there are a couple of ways you can help me   grow my channel finally subscribe to  KenBroTech and don't forget to hit on   the notification button so that anytime i  release a video you'll be really notified   also share this video with friends and  family who find this content very useful   at KenBroTech we say lm programming you can  do it bye bye and catch you in the next video

Channel: KenBroTech

Views: 141

Keywords: Bootstrap 5, How to learn Bootstrap, easy ways to learn bootstrap web development, interface, text-colors, color properties, text-danger, text-primary, text-info, bg-warning, h1 h2 h3 h4 h5 h6, display-1 display-2 display-3 display-4 display-5 display-6, text-start text-center text-end, text-uppercase lowercase capitalize, container, container-fluid, bootstrap container

Id: crMBzTGBfIQ

Length: 82min 22sec (4942 seconds)

Published: Thu Nov 25 2021