1
00:00:00,000 --> 00:00:04,642
[MUSIC]

2
00:00:04,642 --> 00:00:09,310
Let's briefly discuss
about bootstrap tables.

3
00:00:09,310 --> 00:00:15,537
What does bootstrap bring to styling
tables that we include in our web pages?

4
00:00:15,537 --> 00:00:20,636
We'll also look at another bootstrap
component called as bootstrap card,

5
00:00:20,636 --> 00:00:24,790
which is a very versatile component for
displaying content.

6
00:00:26,520 --> 00:00:31,438
There may be many occasions where
you want to present tabular content

7
00:00:31,438 --> 00:00:32,717
on your web page.

8
00:00:32,717 --> 00:00:37,021
Tables were essentially designed for

9
00:00:37,021 --> 00:00:41,998
that purpose, but
soon there after web page

10
00:00:41,998 --> 00:00:46,706
designers hijacked tables into using for

11
00:00:46,706 --> 00:00:52,170
designing and
laying out content in the pages.

12
00:00:52,170 --> 00:00:56,992
Because inherently,
the original HTML did not have

13
00:00:56,992 --> 00:01:01,931
the ability to properly lay
out content in a web page.

14
00:01:01,931 --> 00:01:07,175
Of course, with the arrival of grid-based
layouts like the bootstrap grid,

15
00:01:07,175 --> 00:01:09,804
the tables have been turned on tables.

16
00:01:09,804 --> 00:01:14,379
And increasingly,
people are preferring not to use tables

17
00:01:14,379 --> 00:01:19,465
as a main sort of building
content layout in web pages.

18
00:01:19,465 --> 00:01:24,440
Grid-based layouts are better designed for
this purpose.

19
00:01:24,440 --> 00:01:29,896
Here is an example of what we
can do to a standard HTML table

20
00:01:29,896 --> 00:01:36,736
by using several classes that
bootstrap provides for styling tables.

21
00:01:36,736 --> 00:01:41,951
So here, you can see that
the set apart by displaying

22
00:01:41,951 --> 00:01:47,371
it in darker color and
then the rows themselves are highlighted

23
00:01:47,371 --> 00:01:53,020
by displaying alternate rows
with different backups.

24
00:01:53,020 --> 00:01:58,168
The table used in
bootstrap based that page

25
00:01:58,168 --> 00:02:04,898
is similar to how you use
tables in standard HTML pages.

26
00:02:04,898 --> 00:02:09,220
But of course,
you apply the class table which is

27
00:02:09,220 --> 00:02:14,610
supported in bootstrap to
a standard table tech.

28
00:02:14,610 --> 00:02:21,490
In addition, bootstrap provides many
different classes for styling tables like,

29
00:02:21,490 --> 00:02:27,410
table striped for zebra striped tables
as we saw in the example earlier.

30
00:02:27,410 --> 00:02:30,433
Similarly, we have table bordered for
borders.

31
00:02:30,433 --> 00:02:38,136
Tables, table-hover, table-sm for
tables with cell padding cut in half.

32
00:02:38,136 --> 00:02:43,289
And similarly, table-responsive can
be applied to a div around tables, so

33
00:02:43,289 --> 00:02:48,696
that the tables can be made responsive
where it is shown on smaller screen sizes.

34
00:02:48,696 --> 00:02:54,723
The tables will then be able to
scroll horizontally and vertically.

35
00:02:54,723 --> 00:03:00,039
Also, you could apply backgrounds
to individual row of tables or

36
00:03:00,039 --> 00:03:02,480
entire tables themselves.

37
00:03:02,480 --> 00:03:08,454
Here are a couple of examples of
how you could apply a background

38
00:03:08,454 --> 00:03:13,766
color to a particular row or
a particular cell in table.

39
00:03:13,766 --> 00:03:18,478
Another versatile component
that is available in bootstrap

40
00:03:18,478 --> 00:03:20,695
is a bootstrap card.

41
00:03:20,695 --> 00:03:24,708
Sometimes, you may want to highlight
some content on your web page.

42
00:03:24,708 --> 00:03:28,695
So this is where bootstrap
comes come to your aid.

43
00:03:28,695 --> 00:03:33,172
In Bootstrap card is a versatile
component that allows you to

44
00:03:33,172 --> 00:03:35,904
display content in myriads of ways.

45
00:03:35,904 --> 00:03:40,360
You would notice that it allows
you to have headers for cards.

46
00:03:40,360 --> 00:03:42,625
You can also include images in cards.

47
00:03:42,625 --> 00:03:45,615
You can include images in
the background of cards.

48
00:03:45,615 --> 00:03:49,470
You can even change
the background colors of cards.

49
00:03:49,470 --> 00:03:52,450
Many features are supported by cards.

50
00:03:53,530 --> 00:03:59,218
Here are a couple of examples of cards
that we will see in the exercises later.

51
00:03:59,218 --> 00:04:04,974
We will also see more versatile us
of cards in later exercises and

52
00:04:04,974 --> 00:04:09,090
other courses in this specialization.

53
00:04:09,090 --> 00:04:14,090
Card is a very important company
that can be effectively used for

54
00:04:14,090 --> 00:04:15,900
displaying content.

55
00:04:15,900 --> 00:04:21,203
It's time to move on to the next
exercise where we will use tables and

56
00:04:21,203 --> 00:04:24,844
cards to display some
content in our web page.

57
00:04:24,844 --> 00:04:30,629
[MUSIC]