1
00:00:01,210 --> 00:00:10,090
Hello, in this video, I am going to show you how to use images using the image classes and bootstrap

2
00:00:10,240 --> 00:00:18,160
so that a few cool classes and I'll provide a link to this and the descriptions of feel free to check

3
00:00:18,160 --> 00:00:21,640
out all different features, but I'll show you all the main stuff.

4
00:00:22,270 --> 00:00:31,860
And OK, so we're going first to create a class of well called 12.

5
00:00:32,470 --> 00:00:39,160
Also got what to do then and we're going to create an image source and we're not the fourth in a second.

6
00:00:39,580 --> 00:00:44,880
And we can add an all time record for what we need to close it off.

7
00:00:44,890 --> 00:00:47,470
And I've got this image right here.

8
00:00:47,950 --> 00:00:49,180
The copy this.

9
00:00:49,990 --> 00:00:51,370
Feel free to use whatever you want.

10
00:00:51,380 --> 00:01:01,470
Let's see what we get before we add any specific bootstrap classes and codes that we got this bombing

11
00:01:01,480 --> 00:01:01,740
image.

12
00:01:01,850 --> 00:01:07,290
I think it is too big to fit on the screen, even though it is in the column that's 12, it doesn't

13
00:01:07,290 --> 00:01:07,960
really thoi.

14
00:01:07,960 --> 00:01:19,060
So to implement a feature like that, we put a class of image well amg dush fluid and therefore we reload.

15
00:01:19,600 --> 00:01:28,870
It is fit to its parent container, which in this case is a column that's 12 four had called six for

16
00:01:28,870 --> 00:01:29,500
example.

17
00:01:32,650 --> 00:01:35,790
That for the dash.

18
00:01:36,670 --> 00:01:37,410
There we go.

19
00:01:37,420 --> 00:01:41,980
I think he fills half of the up to and have a column of stuff.

20
00:01:42,430 --> 00:01:46,900
OK, so one thing that you can do, let me show you what else you can do.

21
00:01:47,630 --> 00:01:48,280
Well.

22
00:01:50,410 --> 00:01:55,450
Coming up to Code Dash Code EcoStar from the start, that's wrong, it is automatically setting the

23
00:01:55,450 --> 00:01:57,150
Kodesh 12 the main mistake.

24
00:01:57,370 --> 00:01:58,300
But again, that is wrong.

25
00:01:58,650 --> 00:02:00,890
OK, so now let's an innovative

26
00:02:03,650 --> 00:02:07,120
class called Code 12.

27
00:02:09,070 --> 00:02:18,130
And to add the image again this time, well, this source of a different image, I wanted them to square

28
00:02:18,250 --> 00:02:28,260
off with the man who created some sort of thumbnail and on MTV to kind of add a margin at the top of

29
00:02:28,270 --> 00:02:28,660
two.

30
00:02:29,180 --> 00:02:33,310
Otherwise, they're touching and it doesn't look very aesthetically pleasing.

31
00:02:33,790 --> 00:02:35,290
Some also, as we said.

32
00:02:35,980 --> 00:02:37,340
But again, I don't know.

33
00:02:38,410 --> 00:02:40,570
And they we go through the.

34
00:02:41,910 --> 00:02:42,740
Reload.

35
00:02:43,210 --> 00:02:53,850
That's what we get and it's not really much of a thumbnail, so if we was to say what he calls

36
00:02:55,920 --> 00:02:57,780
250 packs.

37
00:03:00,220 --> 00:03:05,180
And they go, OK, so it's getting better, it's getting better.

38
00:03:05,680 --> 00:03:11,770
Do we want to, let's say, centered around the edges and can do that using these classic class equals

39
00:03:12,400 --> 00:03:25,660
rounded and dash auto decals, block orange fluid, reload and then go round?

40
00:03:25,660 --> 00:03:32,740
It is centered and it looks good so that you could have a website with an even bigger image at the top,

41
00:03:32,740 --> 00:03:39,510
something to display some new information and maybe even an ad then have columns of from now potentially

42
00:03:39,540 --> 00:03:44,830
can make a clickable using something like Ayesha's ref recommend that you do that, potentially hook

43
00:03:44,830 --> 00:03:52,600
it up to a backend system on Python and loop over a database, populate the table or column system,

44
00:03:52,810 --> 00:03:58,780
then allow the user to click on different icons to go to different pages on your website or even different

45
00:03:58,780 --> 00:04:00,490
websites entirely.

46
00:04:00,940 --> 00:04:03,340
That's simple stuff, but really useful.

47
00:04:03,640 --> 00:04:06,060
If you have any questions, feel free to send me a message.

48
00:04:06,070 --> 00:04:09,730
And as usual, I look forward to seeing you the next video.