Bootstrap 5 Crash Course Tutorial #3 - Typography

hello everyone this is Kenneth Broni from  KenBroTech and welcome back to the channel   so in this series of videos you are learning  bootstrap from scratch and we are learning   bootstrap 5.1 in this video we are going to  look at typography and a lot has changed since   the version falls to now division five so let  me put up a comment over here and do typography so with typography basically we are talking about  our text and things of that sort so the first   thing we're going to look at is let's say we have  a paragraph and let me do lorem five so this is   just to generate some lorem ipsiom dummy text and  i just need five letters so this is what i have   learned issue five so i have five letters over  here and let me duplicate this a number of times   so i have quite a few over here now i can come in  here and of course we are adding bootstrap classes   i can simply do on each one and this h1 class  over here is going to pick the default font   size of an h1 element and apply it to whichever  paragraph i want to see over here so when i save   now you can see that this is taking the default  font size of an h1 now we can also do an h2 and that's also going to reflect with a font size  of an h2 and if your guess is as good as mine you   can do an h3 you can also do a class of h4 and  we can do h5 as well and finally end up with h6   so this is something very intuitive you don't  need to memorize any of these things okay so we   are doing this and we are using there's a first  example of typography the different font size   and styles that we can use over here all right  now with the other versions of bootstrap i think   especially with the version for those who  had the display so for instance we can have   let me still use this and this  time around i'm just going to do   a lorem 2 so i just need two words so that's  what i have over here and i'll do a shift alt   and the down arrow key to duplicate this enough  time so i'll save this and this is what we have   so let me add in the new class and this is  going to be the display so we can do a display one when i do a display dash one when i save this  i see that this is also a different font size   font width and font style all together  so this is um in terms of the width   is a little bit smaller as compared to this  okay the h ones and let me continue to do   the other classes over here so we can also do a  display dash two and let me just copy this so that   will move very fast i'll do a ctrl c and paste  it here and change it to display dash 3 and also   change this to display dash 4 and previously this  is where it's ended it ended i mean it started   from one and ended with four but now with the  newer versions of bootstrap we are going to get   display dash 5 and display 6 as well so we can  do a display dash five and that's what we see   over here and let me duplicate this and finally  we can do a display dash six so this is with the   newer versions of bootstrap so clearly now we  have the h1 to h6 as bootstrap classes in order   for any text to reflect or to have the default h1  h2 up to a6 font weight and sizes respectively and   you can also use the display so it depends on  what you are doing and how you want to design   your website now let's look at other font styles  and this is particular with the newer version of   bootstrap that's a 5.0 so let's once again do lrm  and this time around i need three weights so i'll   save this and this is what we have over here let  me duplicate this a number of times and this time   around we are going to look at the font weight  so there's a new class in here and there's a font   um first of all let's look at the font size  so we can look at the font size we can do fs   one now when i save this and see that clearly this  has also changed okay now this is quite different   from the h1 this only deals with the font size  okay and nothing more so let me just copy this   i'll do a ctrl c and i'll bring  it over here this also starts   from one and ends with six so we have the font  size one that's the fs-1 we can do an fs-2 an fs-3   fs 4 as i currently have over here nfs-5 and finally an fs-6 so when i save this and see  that everything is showing up over here as far as   the font size is concerned this only has to do  with the font size all right so moving forward   there are a number of things i'd also want to show  you and like i said we can also look at the phone   to it but let's also put out some dummy text over  here and do a lorem this time around i need four   words and i'll save this and let me duplicate this  a number of times so i'll do a shift alt and the   down arrow key four times and i'll save and this  is what we have over here all right so in here we   are going to look at the font suite so once again  we put up our class over here and we can do a font   switch that's the fw and this time around we do  fw and i'll say bolder so when i save this you can   see that this is now builder as far as the other  contemporaries are concerned i can also come in   here and do a class and i'll do a font to it and  if your guess is as good as mine we can have boat so this is the boat and this is the boulder  it's probably looking the same but then there   are clear differences in there and we can also  have the fw that's the phone to it and this   is going to be normal so the normal is  just going to be normal we are going to   i mean we are not going to see any change over  here but that's with the phone to it with a new   version of bootstrap and before i finish with  this one over here the other two i quickly need   to add on over here so we can also have the fw and  we can do light we want to do lights this is now   light i mean clearly you can see that there's a  difference between this and the normal over here   now let me finally add this one we can  do fw and this is going to be lighter   and as the name suggests it is going to be lighter  as compared to the others so this has to do with   font weight all right so now this is where  it even gets interesting now let's look at   something over here let's do an h3 and let's  see we have let's see i have text one over here   so this is h3 test one and let me duplicate  this so i'll do a shift alt and the down   arrow key i need the all this and let me  do text two and let me do a text three   all right so this is what i have over here now we  are going to look at the text align property and   with the new version of bootstrap all that we need  to do is we have to do a txt dash so for text one   i want it to remain at the left tst dash stats  sorry a tlt that's test and clearly because this   is already to the left it's not going to have any  effect over here now with this one we can do a txt   especially with text two you can do a txt center  and as you can see this has now been aligned to   the center you can also do if your guess is as  good as mine we had stat center so now we cannot   look at end you can do a txt dash end so when i do  a tlc dash and you can see that text tray is now   floated today end or to the right side initially  this wasn't how we did it we're using right left   and um i think yeah center but now we are using  stats end and center so keep that in mind if you   are using the lower versions of bootstrap you  do txt right but with version 5 and above you   are doing txc stats est end and tst center  so moving forward i also want to show you   a few other things so now let's look at  the text transform property and this way   we want to look at how we can transform to  an upper keys a lowercase and things of that   sort so let's say we have a paragraph and  let me just have lrm um let's say you have   10 words over here so let me save this and yeah  this is what i need so let me duplicate this   a number of times so i'll just copy this ctrl  c and i'll come in here ctrl v a control v so i   have these lorem issues dummy text showing up over  here i can come into the paragraph and do a txt   dash now when i do uppercase it's going to  change everything into an upper case and now see   that's exactly what i have over here and when i  come into that second paragraph and do a class and   do a txt dash this time around i'll do lowercase  it's going to change everything into a lowercase   setting as we have over here and now i can do   a txt capitalize so capitalize is going to  capitalize the first letter of every weight   and that's with the text transform property  these ones haven't changed as far as other   versions of bootstrap goes now let's look at  something over here and over here let's look at   it in a paragraph tag or a p tag so let's see i  have a lorem ipsum dummy text i need five of these   so i'll save this and here we go so i'll do a  shift alt and the down arrow key to duplicate this   and what we can do is the let me first  of all bring in a class so i can do a txt   text the creation the creation and i can do an  underline to underline the text we have over   here and that's exactly what we can see over there  so the class is text the creation underline text   the creation dash underline and that's what we see  with this one over here we can also come in here   and do a txt dash decoration dash  line dash through so this is going to   strike you through okay so as you can see we are  striking through over here now for the purpose   of this let me put this in a link tag because  that's where we are going to see the relevance   of this so let's say we have a link tag over  here or an anchor tag and you can see let's see connect so as you can see we  have this um underline and   thing over here so all that i want to show is in  order to get rid of the underline we can do a txt   dash decoration and we are going to do none  so this is going to be the text decreasing   and property and clearly you can see that  the underlining is gone you can as well   if we are doing this we can do a txt let's say  danger and we are going to change the color to   red okay and we can move on and on all right  so finally let me also show the line height   okay the line heights property because the  newer version of bootstrap is actually giving   us almost everything we need not to do a lot of  css we just have to apply the bootstrap classes   so let's say we have a paragraph and this time  around let me do a lauren museum and i need 20   characters or 20 words okay let me do more  over here let me actually do let's say 50. lauren you see on 50 okay so this is what i need   and let me just copy this a number of times  so i'll do a ctrl c and a ctrl v and a ctrl v   okay so these are the paragraphs in here  we are going to look at the line height   so with the line height we can have a class  and it's very simple we do lh so once we do   lh we can do lh1 now pay attention to what we have  over here this is the first paragraph when i see   this you can see that the line height has now been  reduced as compared to the ones we have over here   we can proceed to have a class of line height  so lh dash sm and once i see this this has also   been reduced but not as reduced as the first one  all right then we can equally have a class the lh   and we can do lg so if you are quite old to  bootstrap you can clearly see that there's   some level of consistency as far as some of these  things goes so most of the sm stands for small   and the lg stands for large so when i see this you  can see that the line height over here has rather   increased as far as typography is concerned  so this is going to be the end of this video   clearly we are building up some competency with  the newer classes in bootstrap five now if you   find this tutorial very interesting thank you very  much and i'll be glad if you can subscribe to this   channel if you already haven't 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  always see learn programing, you can do it bye

Channel: KenBroTech

Views: 61

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

Id: fsnoWwLhxHk

Length: 14min 48sec (888 seconds)

Published: Tue Nov 16 2021