Hello guys welcome to Angular tutorial series from Intellipaat.
In this video I'm going to talk about the bootstrap of front end framework. So agenda of
this video is going to be, we'll be talking about what is bootstrap, why do we need it
What are the features and benefits are there
If I use bootstrap and then obviously how to use bootstrap in your Angular applications. So without
wasting much time
Let us start with what is bootstrap.
So what is bootstrap
It's simple free front end framework developed by Twitter for faster and easier web development.
So using Bootstrap you can design your web applications and you can design them in a
faster and easier way.
The reason is bootstrap comes with many Css classes, bootstrap comes with many
You know JavaScript functions which you can call directly to beautify your pages.
Second point is bootstrap includes html and css based design templates for typography
forms, buttons, tables and so using Bootstrap you can design your forms in a beautiful way.
Similarly buttons can come in a beautiful way like we have the classes as btn and
btn hyphen primary, btn hyphen danger.
So the moment I say btn hyphen danger it is going to create a button with that red
background color with a round shaped corner of a button.
So obviously it is going to beautify our pages.
If I'm using Bootstrap. It also gives you the ability to easily create responsive
design pages.
So this point is very important because bootstrap you can create the responsive the pages.
So before I jump to you know the main features of bootstrap.
Let me talk about what is responsible design pages.
This is something which is about creating websites which automatically adjust themselves
to look good on all devices from small phones to large desktops so we know an application
can be accessed by any of the machine.
It can be large desktop
It can be small phone.
It can be from any place we can.
access the any of the website.
Now if I'm accessing the website from any of the device.
So we have to make sure the application should be responsive means it should be easily supported
in large desktop
Similarly it should be easily supported in the mobile phones also.
So that is what the responsive web design that is what you know it is not going to crop
up your pages, suppose that you know you have created a website for the last desktop so the
moment.
When I open in the small phones so it should not be cropped.
The data should not be cropped, the data should be shifted here and there.
to see the entire data, entire data of the website
So that is what responsive based upon which that device you are using it is going to adjust
itself.
So this is what you know that you can open though those pages either in large desktop or
small smartphones anything.
This is what get will disturb dot com is the official website of bootstrap and just check
out here
This is how it looks right and how to find out the size or the width of your device and
all you can when you you know just take here and there just go to here it is 1030 pixel
currently.
And see this is what automatically the design got changed
So initially it was like this, the moment when I'm taking a little
bit more.
automatically the things are going to be changed. Check out here, the images coming over here and
below we are getting the content so it is shifting accordingly as and when I'm going to you know
decrease or increase the size of the page
So the reason is why because it is a responsive web application it is going to response give
the you know the response for the different kind of devices it is going to adjust automatically
as and when that device is going to be changed.
So how can we change device here just by changing the width of the application makes sense.
So this is what you know how bootstrap does using Bootstrap you can create that responsive
web pages and check what the website will be responsive.
The very important point here.
mobile first Project. Why mobile just because as it is responsive you can open the
websites in the mobile without dropping your data on the web with the words most popular
front end component library.
So bootstrap is nothing but it is a front end framework.
Free front end framework it is an open source you can simply download it to started with
your bootstrap coding.
Anybody with just basic knowledge of html and css can start using Bootstrap.
So obviously prerequisite for bootstrap should be basic knowledge of html and css obviously
there is no, you should not be good in angular to learn this from bootstrap
but yeah If you want to learn and if you want to create the forms using angular you should be good
in bootstrap. Bootstrap responsive CSS adjust to phones, tablets and desktops
That is what the responsive feature talks about. Mobile first approach in bootstrap
three, mobile first styles are part of the core framework so you can open the web search
in the mobiles, bootstrap is compatible with all modern browsers: chrome, Firefox Internet explorer
all of those things it is going to be completely compatible with the different kind of different
versions of the browser.
Let's talk about the prerequisite of bootstrap.
So from where to get bootstrap, there are many ways to get the scene.
Either you can download the bootstrap files from the get bootstrap.com website
Second could be you can say download using NPM so there you can simply say npm install
bootstrap
download the bootstrap latest version package and you can see all
bootstrap.cc, bootstrap.jss or all files related with the bootstrap
third we could be you can include bootstrap from a cdn.
So any one of these three ways you can do to implement bootstrap in your angular applications
and this is what get bootstrap.com we know
just click on this.
Get this started and as they said there are multiple ways.
This is what you can do.
This is what using cdn, link rel= stylesheet and hrefs
This is what your bootstrap.
min.css file location in the website.
Okay so either you can just copy this code and paste it in your html page, you are all set to
use bootstrap in your application.
So this is for the bootstrap.css, another one would be js
As I said bootstrap gives you.
Not only the css files, it gives you the Js files also.
The plugins you know the different kind of plugins we have it like dropdown plug in we
have it.
We have model plugin, many things are there
So but will be concentrating here more onto this bootstrap.css
So as I said either you can download it in your system or you can use this CDN.
So I'll be using this CDN link.
Let us see what your first page should have. It should have a very important thing as meta tag
the reason why we need this meta tag this thing, the reason is bootstrap creates mobile first
The meaning is very simple.
We can when we are creating the websites using Bootstrap.
They are going to be responsive.
So how to make them responsive.
This is what the important step over here.
meta name=viewport content=width equal to device height and weight
initial hyphen scale equal to 1.
The meaning is very simple.
The content of the page is telling the width of the page should be equal to your device
hyphen width.
So that is the reason we are making that responsive page.
The meaning is the the width of the content contained off your page is going to be just
inside the device hyphen so device can be any kind of device it can be large text from
large dicks topped with small mobile it can be anything.
So the content has to be fitted inside that particular word and this immediately scale
equal to one indicates that the initial zooming in later on you can zoom in so want what they
want.
So this line has to be that in your in your applications where you want to use this from
there.
Another very important this would disrupt also requires the containing element to wrap
site countries.
So you have to whatever bootstrap you know glass is all those things you are using on
which all the elements you are using they all should be dropped the insider element
guard which is having the closest guard as containing it or contain a hyphen so meaning
is very very simple.
They're all you want to implement the bootstrap classes or bootstrap plugins and I'll make
sure that particular piece of code should be enclosed inside a development.
Who's that.
Whose last name can be either contain it or it can be contained in hyphen.
The moment I see that last name is Dana the meaning is we are providing a responsive fixed
width container.
So obviously it is going to be responsive.
The vetoed but with the right of the candidate is going to be fixed so fixed so all the content
should be inside your fixed width container.
The moment when I say container hyphen flowed as a class name for a div element.
The meaning is we are expanding that and that breadth of the viewport so that contained
can be inserted in the bandwidth of the viewport viewport is nothing but that device vitae
that that device viewport is nothing but a device with it.
Okay so now let us see our very first page our handiwork page.
Oh here we are using the smart anemic will do all those things and link Audie illiquid
to stand too.
So here I am using seeds and concept to implement this bootstrap drops use this file in my estimate
page.
And here we have it and do glossy quality content as they say that they can use container
content that contain a hyphen fuel and these attacks you know.
Oh they are going to define you know some kind of definition will be dead inside the
is this also.
So let us just.
I'll be showing you the example.
Jacob doll you know the difference.
Also when you create a statement page over here.
Header.
And and see what he'll make down.
Madonna and Leopold it is going to be contained equal to.
That equal to the why as happened with.
Grandma.
Initial hopefulness Gaelic will do it.
This quote I've only copied from this YouTube link of your own would disturb God seizes
if needed.
The body of the page and I just see Dave glass equally glad they said there are two classes
of container one this can be an and no one is counting hyper fluid.
And I'll just see I'm just going to write the actual element over here.
The same example I'll show you later on with or without to describe.
Okay so just execute this speech.
This is how it is coming.
This shit goes though you know the phone is dying but we get this on the phone this.
If I'm not using this I'll get me to move these two lines of 4 and obviously I have
to remove the glass or so otherwise it would say the plane.
See here this is how I'm getting it right.
If I'm not using this track but if I use the bootstrap from getting in this way.
Okay so let me just open this link to check.
Do we have actually defined a well-heeled so ubiquitous cause you see here to a nice
to all those elements are defined.
And this is what the definition top is zero margin bottom 5 0.
That is the reason we are getting in the you know the center ring and obviously the font
the style is also going to be different for the same font family sorry so that so you
know all your dough.
So you can see the difference between them.
Oh a page using Bootstrap and BS without using Bootstrap.
You could just see heal and as I said like I just gave the example we have the buttons
glasses.
So let me clear it up but don't know what he'll do if I'm just letting the button.
OK.
And I see my button.
On the page.
This is how it comes right now the moment I'm going to use the bootstrap glasses to
define the buttons we have many glasses for you know specifically for buttons and known
BD and beaten hyphen frames.
They both are two separate glasses and I'm going to use the same view and check out the
beautification of the button.
So again this entire definition is defined inside this that particular link made.
Inside this particular link so you can just open this one again.
I would like to show you this beauty in hyphens primary definition this check out over here.
OK just see B didn't happen primary the phone call it is white background is blue and the
border is again blue.
Okay.
And this check for the Beacon because you want to see that on that corner so it's right.
So with that we can define it here not we and display line block phone we did something
fun to that something extra length and don't want to call a line did that get all of those
things and then we have a border is there fighting is there a form size line height
and border radius.
So only because of this border areas we are getting their rounded corners of a button.
Make sense of that so you know you can implement.
You can use the bootstrap features you can write the header word application using the
brute disrupt the lady plus it would disrupt page we have written in the next video I'm
going to show you the bootstrap features like oh nothing but.
How to Create the defendant not buttons then you talking what the forms would be talking
how to create that tables many more features and very important feature is that it systems
so that does that also will be talking about you.
So that's it guys and thank you everyone I see in the next days.