What is Bootstrap | Bootstrap for Beginners | Bootstrap Website from Scratch | Bootstrap Tutorial


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.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *