#124  Typography in Twitter BootStrap
Articles Blog

#124 Typography in Twitter BootStrap

December 2, 2019


It this video we’re going to learn how to use bootstrap style text content. Let’s start with headings so we can use the same heading tags we covered in the H.M.S. of course these can be used with most trouble they can. They will give a similar styling to headings. So let’s start with H-1. So who is trub heading. OK you can keep going until age 6 and you can see how the starting appears. OK. Three four five and six. OK. There’s another way to style a certain text content similar to a heading. So this creates a div with some text there we can use a class and we can name it using the name of one of these tags. So if we go for age 2 the text is going to be styled exactly as a in a shoe heading. OK. If use h 5 is going to be the same as an 8 5 heading. OK. All right so moving on. Let’s have a look now it’s styling using styling tags. OK so let’s create a paragraph. Let’s have some text in the list of line breaks inside. OK. So we can highlight text using a mock attack. You can see how text is highlighted. Now also we have seen earlier we can make text strikethrough OK using the s tag. We can make text underlined using the tag. OK. All right OK. Now we can de-emphasize text or make it smaller using the small class so this creates a span and play some text in it because we want to be sized When we small. If you use the Glaus small you can see how text is going to be it’s more OK to make text bold. We can still use the same strong tag. OK we can also emphasize text with italics using the M.Tech OK. All right so most of these tilings we already cover them earlier. But the new thing is Klaas’s like this small glass to de-emphasize text or make it smaller. All right so now let’s move to paragraphs. See how we can style them so let’s create a simple paragraph. This is a simple program. OK. OK. So the default styling in Bootstrap for paragraph. So first of all we’ve got a font size of 14 pixels as a default and paragraph’s they will receive a bottom margin which is going to be half of the computed line heights. OK so you can always see that’s what’s emerging there. Right now we can cover a few classes we can use with paragraphs to just type them so let’s create another paragraph and we want this paragraph to stand up. So this paragraph stands out to the class to use in this case is going to be elite. And if you use this class you can see how this paragraph is going to stand out in the page. Also we can make a system barograph smaller. So this is made small and you can use the clus more subtly the same way you have used earlier to make these tax deemphasized. All right we can align text using pre-built classes in Bootstrap. So let’s try this text in this paragraph is all right aligned. The class is going to be text right. You can try other ones like text left. OK. Then you can see how this tiling shows here text is aligned is right. All right. It creates another one. We can use some other classes for text transformations so text in this paragraph for example is capitalized . So we want every single word to start with a capital letter. So the class in this case is going to be text capitalized. OK now we can see how each word is starting with a capital letter. You can use text uppercase to transform everything to capital letters. You can use lowercase as well. OK. See that everything is lowercase. OK. Just keep capitalized for now. All right. OK. Let’s create another per paragraph and this time we want to emphasize text using some pre-built classes that will change the color of the attacks it does show a very special styling. So this text is emphasized. So there are a few classes we can use here. So the first one so are you going to use text minus sign followed by if you type so first one is going to be primary and you can see how these tiling works usually would use this for information you want to show the user notes etc.. OK. So the class is text primary for us. OK. So let’s try something else. So let’s say when I write some text once a certain message is sent successfully or whatever. So we can use text success. Going to show a green color. And usually it’s used for successful events to let the user know that something happened successfully . All right. Another one danger and this will be used for error messages. For example you can use text warning or warnings or whatever. And another one takes info. OK. And it’s going to be to share information whatever. OK. So you can see how these Starling’s differ and all you need to do is use one of these classes to style text. OK. All right so now let’s have a look quickly lists. So let’s create a simple not a list of some list items there let’s say a symbol. See this is something I’ve learned so far. Jay equerry OK. Nootropic includes also some classes we can use with lists. So for example if we want to in-style the adolescent take all the bullet points and padding we can just use the class list on the side. OK. OK so this saves us a lot of effort so we don’t have to go to the style section and write styling. We can just use these classes. This makes it really easier for us. There is another class we can use to change or display the the list a line list in line just like this . OK. All right. Now let’s move to styling the background of text using pre-built classes like we did with the X emphasis . So let’s create a new device. OK. So one class is going to be background primary. So we’re going to be doing exactly the same we have done with emphasizing text rather than styling the text itself. We’re going to be styling the background checks. OK so all we can do is use the class background primary. OK. And you can see these styling so text is white and the background is styled using this blue color that we used earlier with the tax emphasis. OK. Another one is going to be background success. OK. And you can see how this is styled background danger. Next one. Background wanting. OK. And finally background info. OK. OK so we discovered very quickly how we can use bootstrap to style text content in the next video. We will see how to use bootstrap style tables.

Leave a Reply

Your email address will not be published. Required fields are marked *