All language subtitles for 063 What is Bootstrap_.en_US

All right guys. It is a new week and we are on to a new topic.

So for all of you guys who are still sticking with me, a big pat on the back, because we are now going

to do more and more exciting things as we learn more

and as we go along.

So today I'm going to talk about Bootstrap, and this is what's called a front end library.

Now, you'll hear these words quite often: front end, back end, interface... What does it all mean?

So, this cartoon is one of the ways that best represents this concept.

So the front end is basically what the user sees. It’s the beautiful mermaid. It’s the face of your web

site or your mobile app.

Now the back end tends to reside on the server, and is basically behind the scenes sort of business logic

of how your web site or how your app is going to work,

so things that it has to do.

So this is where you code a lot of the functionality of the web site or the app.

So you've got your web sites and your apps that can be designed to have a beautiful user interface,

and, you know, things like animations or buttons.

Basically whatever the user sees is the front end.

Now in the back you've got the server, you've got the databases, you know, less exciting, less pretty,

but nonetheless it's a really really important part of any web site or app, because it's going to determine

how everything is going to work.

These two parts will need to talk to each other in order for data to be delivered.

So for example if you're AirBnB, then in the back end you've got your listings, you can search and

query for them, and then you can deliver them to the front end, say the web site or the app.

Now this division is the front end back end division.

And usually you'll see different languages being used for the front end and the back end.

So on the front we'll be using things like HTML, CSS, Javascript, and this is a lot of the stuff that

you see in web design. Now on the back end you have slightly more powerful languages like C#, Ruby,

PHP, Java, NodeJS,

or SQL

if you're dealing with databases. And this is what will enable your web apps. And it will give your web site

functionality, business logic, data storage, and a whole bunch of really exciting things that we're going

to explore later on in the course.

Now Bootstrap is very firmly on the front end.

It's a bunch of code that was written to be reusable that you can drop into your site and it'll make

designing the web site much much easier for you.

Now Bootstrap was originally developed by Twitter in order to try and get more consistence across web sites

that they design.

But since then they've made it free and open source,

so that means you can see all of the source code on GitHub.

And in fact if you go there you'll notice that it has a whopping 122,000 stars, and

it's in fact the second most starred repository on all of GitHub, so that just shows you how popular

it is.

And this is definitely the most popular front end framework or library that you'll ever come across.

Now what does it allow you to do?

Well, one of the most important things is that, as the number of users are moving away from desktop towards

mobile, a lot of web sites need to be responsive.

Now this is probably not the best term for what this means, because when people think responsive they

think, ‘Oh, it has to be fast’, or, you know, ‘It has to load up immediately’.

But actually that's not what responsive is at all. Responsive just means that it responds to the viewport.

So that means if you're looking at the same web site on mobile or on iPad or on desktop it should have

a different layout to be able to best take advantage of the size of the screen real estate.

So I think a better word would almost be something like adaptable layout.

So your web site changes its design depending on where it's being displayed. And Bootstrap makes this

super super easy as we'll see in the coming lessons. Now

the other really awesome thing about Bootstrap is that you get access to a whole bunch of pre-styled

elements that you can simply just drop into your code with very very minimal effort.

So let me show you how it works.

Now remember how in the last module in order to create a button that was styled and it had a hover state

and it looked generally nice we had to go to CSS Button Generator and put in the requirements that

we needed, and it generated a whole bunch of CSS code that either we had to write or we had to find

somewhere like the CSS Button Generator where it would generate this code for you.

What about things that are not buttons?

What if you wanted a slider or a navigation bar? Then, you know, if there isn't a generator out there then

you would have to write all of this code yourself.

Now if we copy this code and we go over to Code Ply. And the reason why we're using Code Ply rather

than Code Pen is because they are a playground that allows you to include these frameworks, for example

Bootstrap and a number of other ones.

So let's go ahead and create a new playground on here and I'm going to go into the settings and I'm

going to remove the Bootstrap framework so we have no frameworks, and then I'm going to create a button

as we did before, and we're going to give it a class of btn, to match what we had over here as the selector,

and then I'm going to give our button, maybe let's call it Hello World, and let's go ahead and run.

And then you'll see there's our button.

This is plain HTML button.

It looks pretty boring and pretty bland.

And in order to make it look a bit nicer we have to add all of this code in order to make it look

like this and have a hover state.

Now I want to show you what you can do with Bootstrap.

You don't need any of this.

You don't have to write your own CSS code, or you don't have to find it somewhere and paste in snippets.

All you have to do is add in the Bootstrap framework. And we're going to be working with the latest version

of Bootstrap, so Bootstrap 4, throughout this course.

So it's been a long time coming and it was only really released in January 2018.

So this is a fantastic time to start learning Bootstrap, because you'll be working with the latest

version and the gold standard.

So, you know, if you've learnt Bootstrap before, or if you have web sites created using earlier versions,

even Bootstrap 3, or even some of the alphas, there's been a lot of changes, and it's great that we're

starting with the proper official version of Bootstrap 4.0.

So now that we’ve selected our framework, let's go ahead and hit save, and now what we can do is, we can add

some classes that are predefined by Bootstrap to start styling our button.

So for example we can say that this is a btn and it's going to be a btn-primary.

Now if I run that code you'll see that Bootstrap has generated this button for me with no CSS code

on my part.

All I needed to do was add in three words in order to activate those selectors so that I can get this

style.

And you can see that it's beautifully rounded in its corners, and it's got a hover state, and it just

generally looks really really nice with very very minimal effort.

So we can do other things as well.

So for example if I didn't want the blue one then I can say btn btn-dark, and this will give me

a nice black colored button.

Now there's a whole bunch of other types of buttons, for example btn-outline-dark, which gives me a

outline button and when I hover it,

it becomes filled. I can make it bigger by just saying btn-lg,

and that gets me a larger button.

So let me show you how Bootstrap works.

Now, in order to do that we can go over to the Bootstrap web site, which is getbootstrap.com, and

you'll see that we've got version 4.0 selected in the top right corner.

And I want to just go ahead and download the source code for Bootstrap.

And once you've done that you should have a folder called bootstrap-4.0 or or 4.1 or whatever it may

be.

As long as it's got the 4 in front then we are good to go.

Now once you open that file, you should see that there's a folder called dist, and inside here there's

a folder called css.

Now we're going to go into the bootstrap.css, which is the main CSS file, and you're going to open

it up inside Atom.

Now if you scroll through this code you can see that it's got a whole bunch of predefined styles for

our HTML elements,

for example the body, or the horizontal rule, or the h1 through to h6, and this isn't new for us.

We've seen that inside the browser,

we’ve got this thing called user agent stylesheet, which is the CSS that gets applied to our web sites

by the browser.

Now in addition to that if you include Bootstrap on your web site, then it will change the style of your

elements.

So if you use a horizontal rule while using Bootstrap, then it will look like this, and it will override some

of those browser based styles.

But more importantly to how Bootstrap works is that it's got a whole bunch of classes that they have styled

and specified code for.

So that means that if you add a particular class name then it will automatically style it in the way that

has been specified by the Bootstrap code.

So let's see that in action.

I want to show you one of the components that you see a lot on Bootstrap web sites,

and this is the jumbotron.

This is basically just a header for your web site, and you can see that they've already specified styles,

for example the padding, the margin, the background color, the border radius, and all we need to do is just

go into our code and add this class.

So I'm going to delete the button class and I'm going to create a div that has a class called jumbotron.

And inside this div I'm just going to create a h1 that says Hello World,

because remember that divs have no dimension themselves unless they have some content.

So let's hit run, and you can see that we've got this brilliant jumbotron that is going to occupy and

I can pop this out to show you what the web site would look like as it is.

So you've got this header, which is the jumbotron, and you've got your h1, which has been styled by Bootstrap

to have a different font and different size from what you would normally see if you just had HTML,

and all I need to do to get all of this was just to include the class jumbotron.

Now if you have a look on Bootstrap and you go into the documentation and look through its components,

you'll find that there is the jumbotron, and they tell you exactly how you can use this particular class

to get something that looks like this or like this just by including some of their pre-specified classes.

So if you wanted to recreate this design here, then you could just copy their code snippet and paste it

into here.

And because we've already got Bootstrap installed on this playground, then if we just hit run and we

can pop this out, you can see that you've got this enabled on your web site.

And there was literally zero effort.

So if you liked this particular format then you could just go in here and change the text and change

the background color, for example, and you would already have a pretty nicely styled web site.

Now that's not all.

If you go into Bootstrap and you go to Examples, you can see that they've created more extensive

components using Bootstrap.

For example, if you ever wanted the Apple web site designed, then you can simply look at their product

example, and in fact if you go into that download that you had previously for bootstrap-4.0 and you go

into docs and you go into 4.0 or 4.1 or whatever your version may be, then you go into examples, and

you can see it's got all of the examples that they show here.

For example Pricing, Checkout, Product, Album, and if you open up index.html, you can see that this

is what the site looks like and you can view all of the code that was required to create this inside

Atom.

So this is the HTML that they wrote, and this is some custom CSS that modifies the bootstrap and customizes it

it a little bit.

So say if this is the web site that you wanted to make,

so say you wanted to make a company that was an Apple rip off like Grapple, then you could make this web

site by simply copying this product.css and index.html file, and then modifying the text.

So for example this is the h1.

You could just change it to whatever you want to call it for your web site, you know,

Grapple. And now if you refresh, here’s your web site. So you modify a lot of these examples very easily.

Or you can simply add these components by copying the code into your web site. But instead of just modifying

these examples let's take it step by step so that we really understand what we're doing.

And I want to show you exactly how Bootstrap works so that you can not just, you know, rip off these designs,

but you'll be able to design any sort of layout or design that you want by fully understanding this

framework.

So the first thing that we need to do is that we need to know how we can install Bootstrap onto our

web sites when we're not using something that's pre-loaded up like on Code Ply.

So in the next lesson we'll be showing you all the different ways how you can install Bootstrap onto

your own web site.

So for all of that and more I'll see you on the next lesson.