1
00:00:05,350 --> 00:00:13,630
Let's introduce this new lesson on text and colors, starting from the official bootstrap documentation

2
00:00:13,900 --> 00:00:16,720
within colors, under utilities.

3
00:00:16,720 --> 00:00:24,970
As you can see, we have all the basic colors inserted automatically in bootstrap, where primary corresponds

4
00:00:24,970 --> 00:00:31,920
to light blue, secondary to great success to green, danger to red and so on.

5
00:00:32,200 --> 00:00:39,220
Obviously, these types of applications are classes which get inserted in addition to the main classes,

6
00:00:39,340 --> 00:00:47,860
as we have seen before, that are containers or rows or columns, etc, etc. But they can also be simply

7
00:00:47,860 --> 00:00:56,830
added to spans to identify then the color of the text like in this case or to the A's to identify the

8
00:00:56,830 --> 00:01:01,210
color of the links to background as we have already seen.

9
00:01:01,210 --> 00:01:07,120
And last, that can be inserted as gradients of the background themselves.

10
00:01:08,830 --> 00:01:16,750
Getting back to our Visual Studio code screen, let's modify all the contents we created so far.

11
00:01:18,060 --> 00:01:21,360
Let's start modifying the structure of our columns.

12
00:01:22,350 --> 00:01:31,200
Deleting the dash two and 10 with the aim for the columns created to be dynamic and adaptable to the

13
00:01:31,200 --> 00:01:39,540
container and to the browser where the display lets now insert the third column and let's choose some

14
00:01:39,540 --> 00:01:41,820
different types of columns for them.

15
00:01:42,360 --> 00:01:44,210
Let's start from a red one.

16
00:01:48,150 --> 00:01:55,440
Then a yellow one, which we are going to delete from road, given that anyway, our columns will occupy

17
00:01:55,440 --> 00:02:02,010
the whole row and then with the green type of color that's inserted, then some MS.

18
00:02:03,120 --> 00:02:05,130
Into our three deaths.

19
00:02:12,770 --> 00:02:14,780
Let's say and refresh.

20
00:02:18,090 --> 00:02:25,560
As you see, we have a setting which gets updated according to the containers, weeds as seen in the

21
00:02:25,560 --> 00:02:33,540
previous lessons, and we have now some background colors which perfectly suit the contain text as well.

22
00:02:34,210 --> 00:02:40,440
Obviously, we want to see how to exploit also the other peculiarities our callers offer.

23
00:02:41,040 --> 00:02:49,250
Therefore, let's start giving a different color also to the text we inserted in the classes, for example,

24
00:02:50,040 --> 00:02:59,310
text light within the first day of, let's say, refresh and see that the content will switch from black

25
00:02:59,310 --> 00:03:00,180
to white.

26
00:03:00,570 --> 00:03:02,640
We may then decide to insert.

27
00:03:03,570 --> 00:03:04,950
A great text.

28
00:03:05,960 --> 00:03:11,900
Therefore, tax secondary into the latest column we created.

29
00:03:13,320 --> 00:03:16,680
As you can see, we have a great text.

30
00:03:17,650 --> 00:03:25,480
Now that we have a rough idea on how the colors get inserted with bootstrap, we may get on with other

31
00:03:25,480 --> 00:03:31,750
modifications to the text, which can be seen within text in the documentation.

32
00:03:32,770 --> 00:03:40,570
You can select a justified alignment, left position, center or right position, in addition to also

33
00:03:40,570 --> 00:03:43,660
assess a dimension based on viewport.

34
00:03:44,880 --> 00:03:51,390
And therefore, as we have seen for the container on the browser resolution, after that, we might

35
00:03:51,390 --> 00:03:58,680
perform quite a number of operations, such as straight to the text from lowercase to uppercase, or,

36
00:03:58,740 --> 00:04:05,370
for example, set only the initial letters as uppercase that is capitalized or else assess whether a

37
00:04:05,370 --> 00:04:10,160
text should be inserted with the bold, normal or even light weight.

38
00:04:10,860 --> 00:04:14,100
Sure, you'll remember the definitions of the various fonts.

39
00:04:15,670 --> 00:04:19,570
And last weekend's attacks in italics.

40
00:04:21,380 --> 00:04:25,100
You can insert also a text declaration in the links.

41
00:04:26,490 --> 00:04:28,320
As none underlined.

42
00:04:31,080 --> 00:04:35,760
Getting back to our screen, then you can define our text.

43
00:04:37,230 --> 00:04:44,740
As, for instance, font weight older are for saving and refreshing.

44
00:04:44,940 --> 00:04:55,800
We see that the text contained in our first column will be bold less than insert a center text.

45
00:04:57,940 --> 00:05:01,360
And perhaps a possible.

46
00:05:02,310 --> 00:05:03,150
Approx.

47
00:05:05,060 --> 00:05:13,340
For the whole continent after that, let's refresh and see that we have the tech as centered in our

48
00:05:13,340 --> 00:05:18,090
central column and all uppercase in our right hand side column.

49
00:05:18,860 --> 00:05:26,840
So also in this case, thanks to the bootstrap documentation, you can see all the peculiarities this

50
00:05:26,840 --> 00:05:36,530
framework offers and then insert all the classes you fancy to embellish and improve every single detail

51
00:05:36,590 --> 00:05:43,090
or a paragraph or else any other tag inserted into the page itself.