Welcome back in this unit I'm going to show you a few other components including jumbotron and bootstrap
forms and inputs.
But before I do that I want to take a moment to address something that's really really important when
we're learning new tools like this like bootstrap.
And in my experience of teaching people to become web developers I've noticed a bootstrap is one of
the first places where some of the students start to feel uneasy uncomfortable and they feel like they
don't know if they're doing and then because we're suddenly including a bunch of code someone else wrote
into our application.
But if you take a look at the docs here they're really long they're comprehensive which is great but
there's a lot here and I want you to frame this not as a manual that you have to read in order to understand
everything.
This is not like a how to guide that you have to finish before we use bootstrap.
It's a reference where if you decide you need a form you look at the form section if you need a table
.
You'll hit the table section if you need a nav bar.
You look at the NFR section but it's important that you treat the docs like that you will be using them
non-stop coming back to here referencing individual bits of code copying their code segments checking
out some demonstrations reading examples I've been using bootstrapped for years at this point.
And I feel pretty good about most of it.
But I leave the docs open when I'm working on anything with bootstrap.
I'm constantly referencing the examples in one of the really early videos in this course I talked about
how to become a web developer.
You're not becoming an expert in memorization and in knowing every bit of information.
Yes you need to know things.
Yes you have to understand and memorize some things but you're not becoming an expert or memorization
.
You're becoming an expert in accessing information.
And some of that information you'll have memorized and a lot of it is going to be online in documentation
or examples videos books all sorts of resources.
All right so to sum up the entire pep talk.
Basically I just want you to keep in mind that yes there's a lot to bootstrap and you're going to see
20 30 percent of it and there's a lot more out there.
But don't be intimidated by that.
You should feel comfortable accessing the docs if you need to do something that I don't show you how
to do.
Open up the docs and look for it.
And there's always great examples and explanations on get bootstrapped dotcom.
OK so without further ado let's move on to talking about some of these important components and I'm
going to start by showing you Jumbotron.
So a Jumbotron according to the official docs is a lightweight flexible component that can optionally
extend the entire viewport to showcase key content on your site.
You can see an example of one right here and if we want to use a Jumbotron it's really really easy.
All we need to do is write div class jumbotron and then whatever we put inside of that will be part
of the Jumbotron.
So let's try that.
Just do it below are buttons will have a div with class Jumbotron jumbo tron and then inside if there
let's do an H1 or H-1 will say this is a jumbotron and then add a button in there just like they have
here and we'll add a paragraph as well in our paragraph will just be jibberish.
Good enough for now.
And a button
and our button will just say hi there.
OK.
And then a button we have a few choices.
We'll do a button success and I'll make it large and save.
Let's take a look at what we get.
And there's a Jumbotron you can see that it takes up the entire width of our browser window and that's
not usually what we want.
And what's happening is that the JumboTron is set up to take up 100 percent of whatever container it's
inside of.
In this case it's not outside of anything.
But shortly I'll be showing you the grid system and bootstrap where we can control exactly how much
you want this to take up of the screen if you want it to be centered and take up a third of the screen
.
Two thirds of the screen a quarter of the screen we have all these different choices we can make by
using bootstraps grid system.
For now I'm going to show you another element we cannot in which is a div with class equal to container
and what container will do.
If we just put stuff inside of div class container it gives it some spacing some padding around it and
it centers things.
So the container find inspect it
takes up all this space here you can see but it has quite a bit of margin on it.
So if we just want a quick improvement without having to use the grid system which we haven't talked
about we can add div class container and now we get this nice looking Jumbotron.
And if we move this code that we already have down into the containers well but we won't put it inside
the Jumbotron.
You'll see that it still is affected by that container.
So outside the Jumbotron but inside the container save and refresh you can see it's also inside that
container and it reflects that visually.
OK let's head back to components and the next thing that I'll show you.
We go to the top.
We have to go over to see assess and I'll show you the forms and how those work.
So click on forms and there's quite a few different types and different examples.
And I'll just scroll through them first before we type anything.
So here's a basic example of a bootstrap form.
You can see the market that creates it.
Then we have what's known as an inline form and we have another type of inline form and yet another
one with different types of inputs and another type of form.
And now this talks about all the different type of form controls the different types of inputs that
are supported.
So all of these color you are.
Email number week time and so on text areas different checkboxes disabled checkboxes disabled radio
buttons inline checkboxes inline radio buttons dropdown menus selects keep going down.
We have other forum States.
We have a focus state.
You can see this highlighting around that blue.
That's the default bootstrap focus styling.
We can also disable inputs by adding in disabled and we've also got a few other things we can do but
I'm going to go back up and really focus on the basic exampled start and I'll start by just copying
this entire form over and then we'll dissect it bit by bit.
So let's go back here and we'll just add this form after everything else.
But I will do it inside the container.
Let me make this full screen for a moment.
We have our form and inside that form we've got quite a bit of content.
Let's go back to the browser and take a look at what it looks like.
And the first thing you'll probably notice is that our form goes all the way across this container.
It takes up 100 percent of that with and that's something we'll be able to control.
Once we talk about the bootstrap grid system and will easily be able to say this should go 50 percent
the way across.
So that's something we'll be able to easily change once we talk about the bootstrap grid system or we're
not there just yet.
So we're just going to go with it.
It takes up 100 percent for now.
It's a gigantic weird looking forum but that's fine.
We love it how it is.
So we'll go back to sublime and let's dissect this one piece at a time.
So we have a forum tag inside of that forum tag.
There is a div class form group and if you want to know more about what that does if you go back to
the bootstrap docs and do a search for form group and you can see the rap labels and controls in form
group for optimum spacing.
So if we get rid of that form group class around this first one and we'll do it around the first and
second one you'll see what we end up with.
I'll save and refresh you see how the spacing changes here between those inputs.
So we can go back and add that form group and this is really how you use it where you have an input
and the label and you want them to be grouped together is formed.
So pay attention right here just a little bit of space is added right there.
It just adds a little bit of space right here which effectively groups these two together visually and
then Grip's these together visually as well as these down here.
So that's form group.
And then the labels are just normal.
We don't have to add anything fancy to label no Boucek class but the input there is a class form control
.
So let's see what happens when I get rid of it.
So I'll just do it on the first and put the email input and go back and refresh.
Notice that this completely changes back to a normal default browser input.
So you don't get the rounded corners.
We don't get the same padding and spacing of things.
And we also don't get the same focus effect when I click we do get a blue outline but it's different
than this one.
The bootstrap outline is a little more subtle and those are just the immediately obvious visual changes
between the two but there's actually some more important differences that you'll see once we get working
with the grid system and the way that they behave and interact with other elements.
Will go back and add form control again.
So really if we wanted to distill this everything here boils down to form group and form control.
Those two classes are really responsible for making things look good.
Now there is this paragraph class help block and we can take a look at what we get from that.
It's this text down here which just gives a little hint a pointer about part of your form and that stuff
with the class help block and then we have our button down here which is just a regular Pucelle button
or we have between a and b tend to fall and we could make it larger or smaller extra small change the
color just like any other button.
So already you can see how this is a little bit like Legos where we have a button Lego that we can add
into a jumbotron.
We can also just added on its own or we can add it instead of a form.
It's just a little plug and play component that we can add in to different parts of our application
.
So let's go back and take a look at one other type of form which is the inline form.
So this looks slightly different.
If we just copy this code over and we take a look with the differences so I'll leave that first form
and let's add a comment down here in line form and let's indent things properly.
Looks good.
Notice that everything is identical.
We still have a form control on the inputs we have form group but there's one big difference.
Everything is inside of a form with class form in line so that one line.
Let's just show you what it looks like to start.
I go back gives us this nice in line form here.
And as soon as I get rid of that and save it now goes back to a regular form like we have here.
So just one class contains all the styles that will control that.
So we'll keep it as Form in line.
And again the spacing is not ideal right now.
That will be fixed when we talk about the grid system.
There's plenty more we could talk about around bootstrap forms.
We could probably do 30 45 minute lecture on just building complex forms bootstrap learning the ins
and outs of all of these different pieces and different things that we can do validations custom sizing
all sorts of different styles we can work with.
But I'm not going to do that.
We've covered the important basics.
There's two types of forms are kind of the bread and butter of Boucek forms where we have the basic
regular form and then an inline form and there will be a few other features in different aspects of
bootstrap that we do use around the forms.
But rather than spend time right now and bog you down on all the ins and outs and the small details
of PRICHEP forms I'll just throw in those little pieces when we need them when we're actually using
bootstrap.
So the two takeaways here about forms would be two classes that are really important form control and
form group form control makes the inputs bootstrap refined form group just add some nice spacing.
So whatever you put in said a form group gets some nice spacing and then single class form dash in line
.
If you wrap a form in that the entire form goes in line.
And then we also talked about Jumbotron.
Very simple class equals Jumbotron.
So you can see a peer.
And then we put everything inside of a container.
And if we get rid of that container to show you what happens.
Refresh all that spacing that nice margin goes away.
So containers nice way just to get a quick bit of spacing on your app make things look relatively nice
.
OK so before I end this video I'll spend 10 seconds showing you a site that we're going to build an
application that has a full back end database connected using node and express and Mongo and mongoose
and a bunch of technologies and we use bootstrap to prototype the interface to make it look relatively
good pretty quickly and you can see we have a Jumbotron right here.
We're using some of the buttons we're using the grid system that I'll explain later.
And then if I go to log in can see we have a form.
So these are form controls that I've styled using the grid system so that it doesn't take up the entire
width of the screen.
Rather it only takes up this little middle section.
So we'll see that once we talk about the grid system.
But I just want to show you that this is a real application and it's something we'll use bootstrap on
to help us prototype and get things looking decent pretty quickly