1 00:00:00,510 --> 00:00:04,670 The bootstrap framework has many built in text formatting options. 2 00:00:04,950 --> 00:00:10,500 In this lesson we'll go over a number of formatting options and show you how they differ from default 3 00:00:10,690 --> 00:00:14,710 HDMI styling we'll start with the heading tags 4 00:00:19,300 --> 00:00:26,710 in the HMO code on the left hand side of the screen we can see we have each one each to write to each 5 00:00:26,710 --> 00:00:31,480 six in our web browser on the right hand side. 6 00:00:31,520 --> 00:00:36,560 This is what the bootstrap formatting looks like for adding tags. 7 00:00:36,860 --> 00:00:39,800 We can see each one right down to H six 8 00:00:45,010 --> 00:00:55,400 bootstrap allows for a secondary text which is smaller text with less emphasis than the heading and 9 00:00:55,400 --> 00:01:04,620 in order to use the secondary text we simply have to add the small tags around whichever text you want 10 00:01:04,620 --> 00:01:14,110 to make secondary and so you can see we've done that for a number of items here right from heading each 11 00:01:14,110 --> 00:01:15,220 one to H six. 12 00:01:15,220 --> 00:01:22,270 We've added small tags around the text secondary text and that is what it looks like here. 13 00:01:30,710 --> 00:01:38,300 We can highlight text using the mark tags so we've placed the mark tags around the word highlight in 14 00:01:38,300 --> 00:01:39,430 this paragraph. 15 00:01:41,800 --> 00:01:42,430 And 16 00:01:45,280 --> 00:01:47,160 this is what it looks like. 17 00:01:47,470 --> 00:01:48,040 Highlighted 18 00:01:53,140 --> 00:02:06,190 we can also create a dotted underline with a tooltip as you see here using the APB our tags be placed 19 00:02:06,190 --> 00:02:15,340 these tags around the word underline so you can see that we do have the dotted underline the tooltip 20 00:02:15,350 --> 00:02:21,980 that appears we've put the word explanation in there just for demonstration purposes and you can do 21 00:02:21,980 --> 00:02:29,260 that by adding title equals and in our case it's explanation but you can put in any text you wanted. 22 00:02:35,460 --> 00:02:43,570 Next we have block quotes block quotes allow us to place emphasis on quotes using the block quote tag. 23 00:02:45,310 --> 00:02:47,160 And that's this tag here. 24 00:02:47,290 --> 00:02:50,330 The open blackboard tag has an ending. 25 00:02:50,340 --> 00:02:55,270 Sorry a closing block or tag. 26 00:02:55,370 --> 00:02:57,350 This is what a block looks like. 27 00:02:57,380 --> 00:03:00,590 You can see the format of the of the block. 28 00:03:02,570 --> 00:03:07,290 We can add a footer to a block or using the footer tag. 29 00:03:07,730 --> 00:03:16,010 And in order to do this you need to nest the open and close footer tag inside the block wall and that's 30 00:03:16,010 --> 00:03:17,270 what the footer looks like here. 31 00:03:22,860 --> 00:03:30,600 BLOCK votes can be reversed by attaching a block quote reverse class to a standard block quote tag 32 00:03:34,080 --> 00:03:38,490 and this is what the reverse block will format looks like here 33 00:03:48,060 --> 00:03:58,360 we can use the code tags to highlight text in our HDL page so here is we have a paragraph of text here 34 00:03:59,370 --> 00:04:08,900 and you can see that we've applied the open and closed code tag around a few words and this is what 35 00:04:08,900 --> 00:04:10,600 it does. 36 00:04:10,610 --> 00:04:14,510 You can see we've placed a code tag around div section in span 37 00:04:18,220 --> 00:04:21,400 coattails are typically used when highlighting blocks of code 38 00:04:26,520 --> 00:04:35,820 the K.B. D tags allow us to emphasize keyboard shortcuts and in this example we've placed an emphasis 39 00:04:35,910 --> 00:04:41,280 on the control v command so you can see the K MIDI tags here. 40 00:04:41,450 --> 00:04:47,440 Replace them around control plus V the text and this is what appear what it appears like in our web 41 00:04:47,440 --> 00:04:47,890 browser. 42 00:04:55,050 --> 00:05:01,370 The Prix element allows us to display text exactly as it appears in the HDMI document. 43 00:05:01,770 --> 00:05:07,980 Typically whitespace is ignored when viewing an HD male page in a web browser so you can see here we 44 00:05:07,980 --> 00:05:10,020 have whitespace here. 45 00:05:10,050 --> 00:05:19,300 We also have line breaks so the text jumps to new lines in the HMO code. 46 00:05:19,300 --> 00:05:27,340 Now typically our web browser would ignore this the whitespace but using the Prix element it preserves 47 00:05:27,370 --> 00:05:29,350 all whitespace including line breaks. 48 00:05:29,380 --> 00:05:35,500 So it shows up exactly how we would appear or does appear in our case and in the HDMI code 49 00:05:40,600 --> 00:05:44,830 contextual classes allow us to add color to our text. 50 00:05:45,050 --> 00:05:55,600 See here you can see that we have a variety of different lines of text and we've applied different classes 51 00:05:55,720 --> 00:06:03,300 to this text so you can see we have new to text important text success text and so on and so forth. 52 00:06:05,340 --> 00:06:08,070 You can also see the corresponding classes on the left here 53 00:06:12,970 --> 00:06:20,960 and similarly we also have contextual background classes and this will highlight the text in different 54 00:06:20,960 --> 00:06:27,690 colors depending on which class is used so it's very similar to contextual classes. 55 00:06:27,700 --> 00:06:30,790 But this time you can see that the entire area is highlighted 56 00:06:34,000 --> 00:06:44,770 so the class name for the first item is BJP primary and that highlights the text in blue BJP success 57 00:06:45,100 --> 00:06:48,610 highlighted in green and so on.