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

यह व्याख्या एआई (अंग्रेजी भाषा की पहचान के द्वारा तैयार की गयी थी ।) एआई नीति

❤️ क्या आपको STT.ai पसंद है? अपने दोस्तों को बताइए!

सारांश

इस बुक का एआई सारांश बनाने के लिए सार बनाने के लिए सार को क्लिक करें.

एआई के बारे में पूछें इस ट्रांसमिशन के बारे में

इस हस्तलिपि के बारे में कुछ सवाल पूछिए — एआई को ज़रूरी भागों और जवाब मिलेगा ।

एक और अनुवाद