1
00:00:00,480 --> 00:00:06,030
Now that we have an understanding of the different bootstrap components and basic layouts we can take

2
00:00:06,030 --> 00:00:10,190
a look at popular bootstrap themes and how they were developed.

3
00:00:10,230 --> 00:00:13,960
One of the best things about bootstrap is that it's open source.

4
00:00:13,980 --> 00:00:19,260
This means you have access to thousands of templates and themes so it saves you time from having to

5
00:00:19,260 --> 00:00:21,350
code them from scratch.

6
00:00:21,390 --> 00:00:28,230
Remember you can always build on and customize the themes that are available a great resource for themes

7
00:00:28,320 --> 00:00:30,180
is start bootstrap dot dot.com

8
00:00:33,530 --> 00:00:39,790
if we click the Browse themes in templates button you'll see that they have several different themes

9
00:00:39,790 --> 00:00:41,510
to choose from.

10
00:00:41,680 --> 00:00:49,590
These are most of them are free to use for commercial and personal use in this lesson we'll take a look

11
00:00:49,590 --> 00:00:51,870
at the freelancer theme.

12
00:00:51,870 --> 00:00:59,770
We'll see how it was developed to download it click the preview and download button and then click the

13
00:00:59,770 --> 00:01:08,790
download button save the file onto your desktop the file will download is a zip file you'll need to

14
00:01:08,790 --> 00:01:15,630
extract the folder onto your desktop using any extraction utility such as when zip or when Ras

15
00:01:18,710 --> 00:01:27,090
will do a quick overview of the theme as you can see here the layout is fluid it expands and contracts

16
00:01:27,120 --> 00:01:28,050
with the browser

17
00:01:31,080 --> 00:01:34,440
it also takes up the full width of the browser's content area

18
00:01:37,520 --> 00:01:44,720
the navigation menu at the top is designed to collapse on small devices such as hand-held phones and

19
00:01:44,930 --> 00:01:45,560
tablets

20
00:01:52,760 --> 00:01:56,300
each navigation button will pull up a different section of the page

21
00:02:01,700 --> 00:02:09,770
and we cover this type of effect in the last lesson where we developed the scroll spy layout the rest

22
00:02:09,770 --> 00:02:16,340
of the sections are fairly simple below the navigation we have a header with some content just some

23
00:02:16,340 --> 00:02:17,420
text and an image

24
00:02:20,630 --> 00:02:27,920
below that we have the portfolio section which consists of three images when each image is clicked it

25
00:02:27,920 --> 00:02:34,820
launches a model with some more information corresponding to the item that was clicked we can exit the

26
00:02:34,820 --> 00:02:37,490
modal to get back to the main page

27
00:02:42,430 --> 00:02:46,660
the about section contains a row with some content and a button

28
00:02:50,330 --> 00:02:56,480
in the contact section has some text content as well as a form using Bootstrap form components

29
00:03:01,580 --> 00:03:07,900
there's also some validation as you can see.

30
00:03:08,040 --> 00:03:15,900
Lastly we have a folder that contains the location of the business some social media buttons and a snippet

31
00:03:15,900 --> 00:03:17,390
of text.

32
00:03:17,530 --> 00:03:22,510
We also have a role that contains some copyright text as well.

33
00:03:23,740 --> 00:03:26,920
And that's the entire theme in a nutshell.

34
00:03:26,920 --> 00:03:30,790
So in the next lesson we'll take a look at the code that went into building this.