1
00:00:00,570 --> 00:00:04,180
Hello and welcome to this lecture in this lecture.

2
00:00:04,180 --> 00:00:16,100
Sure we are going to be creating a very simple basic one big website in a matter of minutes using bootstrap.

3
00:00:16,170 --> 00:00:18,230
This is the web page.

4
00:00:18,240 --> 00:00:26,150
We are going to create is just a simple web page with this green box here to draw attention.

5
00:00:26,140 --> 00:00:37,710
This little green box is known as a jumbotron Jumbotron are large big boxes used for call in extra attention

6
00:00:37,830 --> 00:00:41,310
to some special content or information.

7
00:00:41,340 --> 00:00:45,330
So the purpose of this little green box here is to draw attention.

8
00:00:45,650 --> 00:00:47,660
It's called a jumbotron.

9
00:00:47,670 --> 00:00:49,820
This little green box here.

10
00:00:50,230 --> 00:01:01,170
I've got my template my basic template that contains my links to put straps and also to a query.

11
00:01:01,170 --> 00:01:09,340
So I've got all my libraries defined in the head section so I can reference them when I need to.

12
00:01:09,660 --> 00:01:14,610
So what I'm doing to my content is going to be placed between the body tags here.

13
00:01:14,720 --> 00:01:24,360
I'm going to start by defining a deef and give it a class of container and then I'm going to define

14
00:01:24,450 --> 00:01:25,750
another Deve.

15
00:01:25,870 --> 00:01:35,440
I'm it a class of jumble that JumboTron is where is what call highlight the dreambox.

16
00:01:35,460 --> 00:01:44,880
I showed you in that website I got my code written in between the body tag here.

17
00:01:45,060 --> 00:01:51,330
I started off with a div and gave the class of container to lose quanta.

18
00:01:51,330 --> 00:01:54,320
Now I will wrap my content there.

19
00:01:54,330 --> 00:02:00,140
I went on to define On another day and gave me the class of jumbo tron.

20
00:02:00,270 --> 00:02:09,110
So any text between my Jumbotron Dave is what will be highlighted on the web page.

21
00:02:09,120 --> 00:02:19,230
The purpose of the JumboTron is to draw attention to the content in between so and then I included a

22
00:02:19,260 --> 00:02:28,350
button or still be in between this Jumbotron Dave and the button I was tagged along with an ankle tag

23
00:02:28,920 --> 00:02:34,630
and then hate Trev our tribute and give it a value of hash.

24
00:02:34,650 --> 00:02:39,160
What this meant is that when the button is clicked on it falls.

25
00:02:39,190 --> 00:02:40,880
So it will not go anyway.

26
00:02:40,920 --> 00:02:48,090
Normally in a live environment where you click on a button there should be a link or a page that you

27
00:02:48,090 --> 00:02:50,420
will go to when the button is clicked.

28
00:02:50,440 --> 00:02:56,880
But because this is just a demo of this hash tag here that means when you click on the button it will

29
00:02:56,880 --> 00:02:58,760
appear as if he's going some way.

30
00:02:58,790 --> 00:03:00,090
It actually goes nowhere.

31
00:03:00,120 --> 00:03:08,220
So that's what that means is submits to itself and then I defined another class here and gave it a value

32
00:03:08,280 --> 00:03:16,770
of button and then also give it a button that you form and also give it bottom that large which means

33
00:03:17,220 --> 00:03:18,550
the button would be large.

34
00:03:18,590 --> 00:03:26,950
All these are CNS defined properties available within the books trap framework.

35
00:03:27,090 --> 00:03:36,120
So this is or the button properties or features in the boot strap framework so a means of taking from

36
00:03:36,120 --> 00:03:40,760
bootstrap and then this is what the button we actually display.

37
00:03:40,810 --> 00:03:45,080
Register today so let me click save and we can see what it looks like.

38
00:03:45,100 --> 00:03:48,680
Go run and launch in Chrome.

39
00:03:49,500 --> 00:03:57,750
Okay so by default This is a column on the jumbotron So I change the background a lot to make it look

40
00:03:57,810 --> 00:04:00,570
more prominent allow or swap play.

41
00:04:00,600 --> 00:04:04,350
Background call or to the entire body of the page.

42
00:04:04,620 --> 00:04:14,010
I have had some style here in between this dull tag on the bootstrap link to this CSF.

43
00:04:14,110 --> 00:04:19,450
Have Given the body of depair your background lot of this which is colour like dark grey and I give

44
00:04:19,530 --> 00:04:27,660
the Jumbotron background quoll of this and given it margin from the top to drop down to 50 pixels so

45
00:04:27,660 --> 00:04:32,990
let's have a look at what it looks like they're sunk or run.

46
00:04:33,440 --> 00:04:35,560
Launching Chrome.

47
00:04:36,320 --> 00:04:43,140
Right so this is the finished product so we are done with our simple web page created in less than 5

48
00:04:43,140 --> 00:04:44,490
minutes.

49
00:04:45,060 --> 00:04:49,560
In this chart we create very simple basic web page.

50
00:04:49,800 --> 00:04:54,170
He is in Bootstrap and the Jumbotron feature.

51
00:04:54,450 --> 00:04:56,220
Thank you for watching.

52
00:04:56,220 --> 00:04:56,910
Bye for now.