12_basic_project_setup_using_bootstrap_for_styling

Jul 13, 2026 03:47 · 4:27 · English · Whisper Turbo · 5 ਸਪੀਕਰ

ਇਹ ਟਰਾਂਸਕਰੀਪਟ ਅੱਜ ਮਿਆਦ ਪੁੱਗਦੀ ਹੈ । ਸਥਾਈ ਸਟੋਰੇਜ਼ ਲਈ ਅੱਪਗਰੇਡ →

ਪੜ੍ਹਨ ਇੰਡੈਕਸ

0:02

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

Throughout this course,

0:03

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

I'll often start with an empty project for a given section so

0:07

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

that we can focus on the topic at hand in this section.

0:09

S… Speaker 3 (12_basic_project_setup_using_bootstrap_for_styling)

So therefore,

0:11

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

you can simply create a new project with ng -new as we did it a couple of

0:15

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

lectures ago.

0:15

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

And I'll typically start with an empty app component HTML

0:19

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

file.

0:20

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

If I have a different starting setup,

0:22

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

you'll find it attached to the lecture.

0:24

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

So I'll always ensure that this is the case.

0:26

S… Speaker 3 (12_basic_project_setup_using_bootstrap_for_styling)

But here,

0:27

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

I'll now simply have this empty setup.

0:31

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

We can now remove Forms module from App module here.

0:34

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

in case you added it so that we really have a clean starting project.

0:38

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

And now there's one important thing.

0:40

S… Speaker 3 (12_basic_project_setup_using_bootstrap_for_styling)

In this course,

0:41

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

I'll use the bootstrap CSS framework to have some nice CSS

0:45

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

styles out of the box without us having to write all these CSS styles.

0:49

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

Now to add this,

0:51

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

we need to install it.

0:52

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

We need to download it.

0:53

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

We can do this by quitting this development server with control C and

0:58

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

then installing it with this NPM tool,

1:00

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

this node package manager.

1:02

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

by running npm install dash dash save

1:06

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

bootstrap,

1:08

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

and now that's important,

1:10

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

add free to install version free,

1:12

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

which is the version I use in this course.

1:13

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

Now this will install it locally in this project,

1:17

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

not globally,

1:18

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

locally.

1:19

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

Simply hit enter and it will download bootstrap and store

1:23

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

it in that node modules folder.

1:25

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

Now that's one first step,

1:28

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

but to be able to use it,

1:29

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

we also need to make Angular aware of this styling package

1:33

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

we want to use.

1:34

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

And we do that in one of the config files,

1:37

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

the most important one actually,

1:38

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

the angular .json file.

1:40

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

This configures the CLI project.

1:42

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

We will not work in this project file throughout the course because the default setup

1:46

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

is perfect and we don't need to change anything there.

1:49

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

But one thing we do need to change right now is the styles

1:53

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

we want to use by default.

1:54

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

Here, you got this styles array in this architect build

1:58

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

node.

1:59

S… Speaker 3 (12_basic_project_setup_using_bootstrap_for_styling)

Now,

2:00

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

it already has one entry,

2:01

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

source styles CSS.

2:04

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

This is a file you can use to define some global styles you want to use application

2:08

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

-wide.

2:08

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

So you can enter any CSS code here and it will be used in every Angular component.

2:13

S… Speaker 3 (12_basic_project_setup_using_bootstrap_for_styling)

But in my case,

2:14

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

I will add another import prior to that source style CSS

2:19

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

import so that we could overwrite it within this file.

2:22

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

And now here we need to point to node modules.

2:25

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

So to this node modules folder we got there.

2:28

S… Speaker 5 (12_basic_project_setup_using_bootstrap_for_styling)

And there,

2:30

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

if you scroll down a bit,

2:31

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

There are many dependencies because you also have dependencies of dependencies here.

2:35

S… Speaker 3 (12_basic_project_setup_using_bootstrap_for_styling)

If you scroll down a bit,

2:36

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

you'll see bootstrap.

2:37

S… Speaker 5 (12_basic_project_setup_using_bootstrap_for_styling)

And in there,

2:39

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

you find a dist folder,

2:40

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

a CSS folder,

2:42

S… Speaker 5 (12_basic_project_setup_using_bootstrap_for_styling)

and there,

2:43

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

the bootstrap CSS file,

2:45

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

or to be precise,

2:46

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

there are also the bootstrap .min .css file,

2:48

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

just hidden a bit by my IDE.

2:50

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

So we can enter node modules slash bootstrap

2:55

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

slash

2:57

S… Speaker 2 (12_basic_project_setup_using_bootstrap_for_styling)

dist slash CSS slash bootstrap

3:01

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

dot min dot CSS.

3:03

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

And make sure that you got no typo in here.

3:05

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

It's easy to miss the T or something like that.

3:08

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

So make sure that you have a path like this.

3:10

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

Once you added this path here,

3:14

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

save your package dot JSON file and rerun ng serve to load

3:18

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

this new configuration.

3:19

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

As I said,

3:20

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

you don't really need to change anything else here.

3:22

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

The default configuration should work perfectly.

3:25

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

So once you're done,

3:27

S… Speaker 3 (12_basic_project_setup_using_bootstrap_for_styling)

you can

3:29

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

and you won't see anything because I deleted all the content in

3:33

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

the template.

3:34

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

But if you open the developer tools and you go to

3:38

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

the elements tab there,

3:40

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

here in the head section,

3:42

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

you will see that the styles CSS file is being imported.

3:47

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

And if you go to sources,

3:50

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

you should find that styles .css file here.

3:54

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

And in there,

3:55

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

you will see that it's mentioning bootstrap,

3:58

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

which basically means that everything worked and bootstrap is

4:02

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

included here.

4:03

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

And with that,

4:05

S… Speaker 4 (12_basic_project_setup_using_bootstrap_for_styling)

you know that everything we do in the course will work and we'll have the correct styles.

4:09

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

and one last change in the app component i'll also get rid of whichever property

4:13

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

we have here with that the starting project is prepared you

4:17

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

can always use that at the beginning of a new module and important

4:22

S… Speaker 1 (12_basic_project_setup_using_bootstrap_for_styling)

you also saw how you can add your own styles

ਇਹ ਟਰਾਂਸਕਰੀਪਟ AI (ਆਟੋਮੈਟਿਕ ਬੋਲੀ ਪਛਾਣ) ਵਲੋਂ ਬਣਾਈ ਗਈ ਹੈ । ਇਸ ਵਿੱਚ ਗਲਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ - ਗੰਭੀਰ ਵਰਤੋਂ ਲਈ ਅਸਲੀ ਆਡੀਓ ਨਾਲ ਜਾਂਚ ਕਰੋ । AI ਪਾਲਸੀ

❤️ STT.ai ਪਸੰਦ ਹੈ? ਆਪਣੇ ਦੋਸਤਾਂ ਨੂੰ ਦੱਸੋ!

ਸੰਖੇਪ

ਇਸ ਟਰਾਂਸਕਰੀਪਟ ਦਾ AI ਸੰਖੇਪ ਬਣਾਉਣ ਲਈ ਸੰਖੇਪ ਕਲਿੱਕ ਕਰੋ ।

ਇਹ ਟਰਾਂਸਕਰੀਪਟ ਬਾਰੇ AI ਨੂੰ ਪੁੱਛੋ

ਇਸ ਟਰਾਂਸਕਰੀਪਟ ਬਾਰੇ ਕੁਝ ਪੁੱਛੋ — AI ਸਬੰਧਤ ਭਾਗ ਲੱਭੇਗਾ ਅਤੇ ਜਵਾਬ ਦੇਵੇਗਾ।

ਹੋਰ ਟਰਾਂਸਕਰੀਪਟ