1
00:00:00,450 --> 00:00:07,440
Using Bootstrap we can easily style tables a basic bootstrap table has a light padding in horizontal

2
00:00:07,440 --> 00:00:12,620
dividers as shown in this example in the HDMI code.

3
00:00:12,810 --> 00:00:16,650
You can see that all we need to do is set the table class to table

4
00:00:19,550 --> 00:00:25,780
in order to apply this style in order for bootstrap to correctly apply formatting to the header of the

5
00:00:25,780 --> 00:00:26,890
table.

6
00:00:26,890 --> 00:00:34,140
We also need to specify the table head and table body using the T head and T body tags.

7
00:00:36,270 --> 00:00:41,640
You'll notice in this example that the headings are slightly more bold than the rest of the content

8
00:00:46,610 --> 00:00:50,430
when applying the T head tag.

9
00:00:50,430 --> 00:00:59,390
Make sure that each column begins with T H only for the contents within the table head is shown here.

10
00:00:59,570 --> 00:01:09,030
So you'll notice that each heading is enclosed in the t h the open and close to types.

11
00:01:09,050 --> 00:01:16,810
Now we can add the table straight to class to set each other wrote to a slightly darker colored

12
00:01:23,270 --> 00:01:29,150
so I'll just save the file and refresh and we can see that each other rows is now light grey so it adds

13
00:01:29,150 --> 00:01:30,590
that distinction between rows

14
00:01:34,900 --> 00:01:36,490
the table bordered class

15
00:01:40,490 --> 00:01:45,330
this adds a borders on all sides of the table and sells

16
00:01:48,660 --> 00:01:49,860
the table cover class

17
00:01:52,790 --> 00:01:59,010
and this creates a mouse over effect on the table rows so you can see it's slight it changes to a light

18
00:01:59,010 --> 00:02:00,900
grey color when you have your mouse over

19
00:02:07,420 --> 00:02:17,380
the table condensed class that will remove some of the padding around the text and so it's a more condensed.

20
00:02:17,380 --> 00:02:17,830
Table

21
00:02:21,380 --> 00:02:29,780
we can add contextual classes to table rows or table columns and we'll just do a quick example.

22
00:02:31,430 --> 00:02:38,510
I'll add a few classes to each row that you will start in the table body instead

23
00:02:44,540 --> 00:02:47,120
so we've added added some of the contextual classes.

24
00:02:47,120 --> 00:02:54,030
Now I'm going to refresh the page and you can see that the first row has the success class.

25
00:02:54,050 --> 00:02:58,220
Second row has the danger class in the third row has the info.

26
00:02:58,220 --> 00:02:58,670
Class.