WEBVTT 00:00:06.780 --> 00:00:12.070 It this video we're going to learn how to use bootstrap style text content. 00:00:12.360 --> 00:00:20.100 Let's start with headings so we can use the same heading tags we covered in the H.M.S. of course these 00:00:20.100 --> 00:00:21.850 can be used with most trouble they can. 00:00:21.870 --> 00:00:25.070 They will give a similar styling to headings. 00:00:25.140 --> 00:00:26.490 So let's start with H-1. 00:00:26.490 --> 00:00:31.630 So who is trub heading. 00:00:32.520 --> 00:00:39.540 OK you can keep going until age 6 and you can see how the starting appears. 00:00:39.660 --> 00:00:41.140 OK. 00:00:42.010 --> 00:00:50.400 Three four five and six. 00:00:52.710 --> 00:00:53.240 OK. 00:00:53.600 --> 00:00:59.490 There's another way to style a certain text content similar to a heading. 00:00:59.580 --> 00:01:10.590 So this creates a div with some text there we can use a class and we can name it using the name of one 00:01:10.590 --> 00:01:11.500 of these tags. 00:01:11.520 --> 00:01:19.430 So if we go for age 2 the text is going to be styled exactly as a in a shoe heading. 00:01:19.520 --> 00:01:19.970 OK. 00:01:20.070 --> 00:01:24.850 If use h 5 is going to be the same as an 8 5 heading. 00:01:25.050 --> 00:01:25.820 OK. 00:01:26.250 --> 00:01:27.850 All right so moving on. 00:01:27.960 --> 00:01:32.920 Let's have a look now it's styling using styling tags. 00:01:33.090 --> 00:01:36.050 OK so let's create a paragraph. 00:01:36.930 --> 00:01:38.310 Let's have some text in the 00:01:42.500 --> 00:01:48.060 list of line breaks inside. 00:01:48.780 --> 00:01:49.070 OK. 00:01:49.080 --> 00:01:57.160 So we can highlight text using a mock attack. 00:01:57.870 --> 00:02:00.350 You can see how text is highlighted. 00:02:00.360 --> 00:02:05.020 Now also we have seen earlier we can make text strikethrough 00:02:08.460 --> 00:02:08.800 OK 00:02:14.190 --> 00:02:15.870 using the s tag. 00:02:16.680 --> 00:02:21.710 We can make text underlined using the tag. 00:02:22.930 --> 00:02:24.580 OK. 00:02:24.960 --> 00:02:26.650 All right OK. 00:02:26.670 --> 00:02:37.050 Now we can de-emphasize text or make it smaller using the small class so this creates a span and play 00:02:37.050 --> 00:02:44.350 some text in it because we want to be sized When we small. 00:02:44.640 --> 00:02:46.260 If you use the Glaus small 00:02:49.690 --> 00:02:58.380 you can see how text is going to be it's more OK to make text bold. 00:02:58.440 --> 00:03:02.410 We can still use the same strong tag. 00:03:03.430 --> 00:03:04.200 OK 00:03:07.830 --> 00:03:18.030 we can also emphasize text with italics using the M.Tech OK. 00:03:19.660 --> 00:03:25.750 All right so most of these tilings we already cover them earlier. 00:03:26.140 --> 00:03:33.490 But the new thing is Klaas's like this small glass to de-emphasize text or make it smaller. 00:03:33.900 --> 00:03:37.220 All right so now let's move to paragraphs. 00:03:37.290 --> 00:03:44.230 See how we can style them so let's create a simple paragraph. 00:03:44.260 --> 00:03:48.340 This is a simple program. 00:03:49.200 --> 00:03:53.950 OK. 00:03:55.230 --> 00:03:56.920 OK. 00:03:56.970 --> 00:04:01.440 So the default styling in Bootstrap for paragraph. 00:04:01.440 --> 00:04:12.750 So first of all we've got a font size of 14 pixels as a default and paragraph's they will receive a 00:04:13.410 --> 00:04:19.020 bottom margin which is going to be half of the computed line heights. 00:04:19.170 --> 00:04:23.050 OK so you can always see that's what's emerging there. 00:04:23.380 --> 00:04:33.540 Right now we can cover a few classes we can use with paragraphs to just type them so let's create another 00:04:33.900 --> 00:04:40.400 paragraph and we want this paragraph to stand up. 00:04:40.410 --> 00:04:47.680 So this paragraph stands out to the class to use in this case is going to be elite. 00:04:47.910 --> 00:04:54.720 And if you use this class you can see how this paragraph is going to stand out in the page. 00:04:54.900 --> 00:05:02.410 Also we can make a system barograph smaller. 00:05:02.500 --> 00:05:13.730 So this is made small and you can use the clus more subtly the same way you have used earlier to make 00:05:14.360 --> 00:05:17.710 these tax deemphasized. 00:05:17.750 --> 00:05:25.830 All right we can align text using pre-built classes in Bootstrap. 00:05:26.240 --> 00:05:31.700 So let's try this text in this paragraph 00:05:34.450 --> 00:05:37.220 is all right aligned. 00:05:37.900 --> 00:05:42.610 The class is going to be text right. 00:05:42.680 --> 00:05:45.110 You can try other ones like text left. 00:05:45.290 --> 00:05:46.010 OK. 00:05:46.290 --> 00:05:52.560 Then you can see how this tiling shows here text is aligned is right. 00:05:53.220 --> 00:05:55.810 All right. 00:05:56.560 --> 00:05:58.550 It creates another one. 00:05:59.240 --> 00:06:14.810 We can use some other classes for text transformations so text in this paragraph for example is capitalized 00:06:14.810 --> 00:06:15.220 . 00:06:15.280 --> 00:06:19.140 So we want every single word to start with a capital letter. 00:06:19.690 --> 00:06:26.950 So the class in this case is going to be text capitalized. 00:06:30.070 --> 00:06:35.990 OK now we can see how each word is starting with a capital letter. 00:06:35.990 --> 00:06:44.170 You can use text uppercase to transform everything to capital letters. 00:06:44.200 --> 00:06:48.300 You can use lowercase as well. 00:06:48.490 --> 00:06:48.940 OK. 00:06:48.980 --> 00:06:51.510 See that everything is lowercase. 00:06:51.690 --> 00:06:52.070 OK. 00:06:52.200 --> 00:06:56.900 Just keep capitalized for now. 00:06:59.180 --> 00:06:59.810 All right. 00:06:59.920 --> 00:07:00.710 OK. 00:07:01.570 --> 00:07:11.510 Let's create another per paragraph and this time we want to emphasize text using some pre-built classes 00:07:11.500 --> 00:07:17.580 that will change the color of the attacks it does show a very special styling. 00:07:17.840 --> 00:07:24.500 So this text is emphasized. 00:07:25.490 --> 00:07:28.940 So there are a few classes we can use here. 00:07:29.440 --> 00:07:41.720 So the first one so are you going to use text minus sign followed by if you type so first one is going 00:07:41.720 --> 00:07:50.000 to be primary and you can see how these tiling works usually would use this for information you want 00:07:50.000 --> 00:07:53.410 to show the user notes etc.. 00:07:53.640 --> 00:07:54.150 OK. 00:07:54.310 --> 00:07:57.040 So the class is text primary for us. 00:07:57.610 --> 00:07:58.220 OK. 00:07:58.630 --> 00:08:01.220 So let's try something else. 00:08:01.270 --> 00:08:08.560 So let's say when I write some text once a certain message is sent successfully or whatever. 00:08:08.620 --> 00:08:10.820 So we can use text success. 00:08:10.880 --> 00:08:12.960 Going to show a green color. 00:08:13.190 --> 00:08:18.350 And usually it's used for successful events to let the user know that something happened successfully 00:08:18.350 --> 00:08:19.250 . 00:08:19.250 --> 00:08:20.660 All right. 00:08:21.190 --> 00:08:28.910 Another one danger and this will be used for error messages. 00:08:28.900 --> 00:08:37.750 For example you can use text warning or warnings or whatever. 00:08:37.850 --> 00:08:42.440 And another one takes info. 00:08:43.090 --> 00:08:44.070 OK. 00:08:44.100 --> 00:08:47.660 And it's going to be to share information whatever. 00:08:47.650 --> 00:08:48.120 OK. 00:08:48.320 --> 00:08:55.580 So you can see how these Starling's differ and all you need to do is use one of these classes to style 00:08:56.000 --> 00:08:57.090 text. 00:08:57.670 --> 00:08:59.350 OK. 00:08:59.360 --> 00:09:04.520 All right so now let's have a look quickly lists. 00:09:04.880 --> 00:09:18.350 So let's create a simple not a list of some list items there let's say a symbol. 00:09:18.750 --> 00:09:22.600 See this is something I've learned so far. 00:09:22.630 --> 00:09:26.810 Jay equerry OK. 00:09:27.690 --> 00:09:32.700 Nootropic includes also some classes we can use with lists. 00:09:33.070 --> 00:09:41.630 So for example if we want to in-style the adolescent take all the bullet points and padding we can just 00:09:41.870 --> 00:09:45.590 use the class list on the side. 00:09:46.430 --> 00:09:48.300 OK. 00:09:49.480 --> 00:09:55.550 OK so this saves us a lot of effort so we don't have to go to the style section and write styling. 00:09:55.590 --> 00:09:57.520 We can just use these classes. 00:09:57.560 --> 00:10:00.490 This makes it really easier for us. 00:10:00.500 --> 00:10:08.480 There is another class we can use to change or display the the list a line list in line just like this 00:10:08.490 --> 00:10:09.020 . 00:10:09.390 --> 00:10:11.350 OK. 00:10:11.480 --> 00:10:11.910 All right. 00:10:11.950 --> 00:10:20.770 Now let's move to styling the background of text using pre-built classes like we did with the X emphasis 00:10:20.790 --> 00:10:22.090 . 00:10:22.870 --> 00:10:27.430 So let's create a new device. 00:10:27.430 --> 00:10:29.050 OK. 00:10:30.940 --> 00:10:35.140 So one class is going to be background primary. 00:10:35.600 --> 00:10:41.650 So we're going to be doing exactly the same we have done with emphasizing text rather than styling the 00:10:41.950 --> 00:10:43.130 text itself. 00:10:43.180 --> 00:10:45.300 We're going to be styling the background checks. 00:10:45.330 --> 00:10:51.410 OK so all we can do is use the class background primary. 00:10:52.150 --> 00:10:53.170 OK. 00:10:53.260 --> 00:11:00.470 And you can see these styling so text is white and the background is styled using this blue color that 00:11:00.460 --> 00:11:03.660 we used earlier with the tax emphasis. 00:11:03.670 --> 00:11:06.970 OK. 00:11:06.980 --> 00:11:15.660 Another one is going to be background success. 00:11:15.750 --> 00:11:17.400 OK. 00:11:18.770 --> 00:11:20.230 And you can see how this is styled 00:11:25.850 --> 00:11:29.170 background danger. 00:11:32.060 --> 00:11:34.460 Next one. 00:11:35.320 --> 00:11:38.150 Background wanting. 00:11:39.880 --> 00:11:40.420 OK. 00:11:40.590 --> 00:11:45.670 And finally background info. 00:11:48.190 --> 00:11:50.560 OK. 00:11:52.390 --> 00:11:59.330 OK so we discovered very quickly how we can use bootstrap to style text content in the next video. 00:11:59.330 --> 00:12:07.220 We will see how to use bootstrap style tables.