BOOTSTRAP!

www.getbootstrap.com

 

Up until now, we've been relying on HTML and CSS! Both of those are amazing, but to make a site look really good with html and css, you need to do a lot of extra work (think HOURS of styling). Luckily for us, there are libraries out there that we can use in a matter of minutes! One of the most popular libraries out there is bootstrap (which is made up of css and javascript). This helps us make a really amazing looking website without an incredible amount of work!

So, to use bootstrap, we need to bring it in to our style sheet. We need to go to getboostrap.com. We can EITHER include bootstrap in your header by including its URL as a css file, OR we download all the bootstrap files (which will be good for all of us to do, since we don't always have access to the internet).

I would 100% recommend downloading bootstrap since it can load when your'e working offline, but for the sake of our learning (since we're on codepen and all on the internet right now), we'll be using the URL version because we're posting our code into codepen and GitHub.io!

To use bootstrap by their web links, all we need to do is grab the link and script (we won't be using the script just yet, but it's good to have) from bootstrap's site (https://getbootstrap.com/docs/3.4/).

 

As a quick reminder, here's what a site with no bootstrap looks like:

^^ Pretty boring, right? Now, once we add our headers into our site, our styling will completely change:

 

You probably noticed that the <h1> and <div> text changed on their own without adding a class, while the button required us to specifically add a class. That's because in bootstrap's css, there are some element level stylings, like

 

So, our site has changed, but you'd think there'd be more, right? You're absolutely right! There is so much more! While bootstrap does have a lot of inherently different things, we'll often have to use classes provided by bootstrap! Let's take a quick look at bootstrap's button class:

(There's no real need to know what's inside of these buttons, but it's good to see that there's a lot of styling in there. Mostly styling we'd rather not do. Why reinvent the wheel?) Let's see what that looks like below:

We'll learn a lot more about bootstrap as we go on, but just know that everything you see here is just a tiny amount of what bootstrap can do! For every lesson we go over, documentation will be posted, but do some exploration for yourself! You might find something really cool.

NOTE: Throughout the class, you've been learning a ton of material. You are not expected to memorize this material. Documentation exists online so that we can easily refer to it. Professional developers forget things all the time! That's why documentation exists

 

Buttons

So natraully, we just saw a button in the two examples before, let's talk about buttons. Bootstrap has a ton of button options. You can find the button documentation here: https://getbootstrap.com/docs/3.4/css/#buttons. Take a look!

 

You can also change the size of buttons by using btn-lg, btn-sm, btn-xs:

 

You can use button classes on things that aren't just buttons:

There are a ton of classes that we can use for buttons. Take a look through the documentation to see if you want to use any of those! (We'll revisit buttons later once we start using javascript).

 

JUMBOTRONS

Jumbotrons are for when you want really showcase some material!

 

That looks great and all, but let's throw that jumbotron in a container for some extra padding:

 

 

FORMS & INPUTS!

We haven't spent any time on forms just yet, but it's good to know that bootstrap has a very sleek form styling! There are an infinite number of form possibilities. To get some kind of idea of what kind of form you'd like, check out the form documentation: https://getbootstrap.com/docs/3.4/css/#forms

See the code in action!

 

You can also make your form take up a significantly smaller area by adding the class='form-inline' (remember how we used inline to make our divs fit inside of other elements?) to your form:

 

 

Navbars!

Navbars help us navigate sites! Many sites you've been to are gargantuan, and it's hard to navigate a site just with scrolling (on inline links). These make it much easier to traverse a site, and they make our sites look really professional.

 

The navbar doesn't really look like anything here, but that's because we don't have any of the corresponding elements inside it!

Let's add some links (though they'll all be empty for a while):

 

SPACING IS EVERYTHING (notice contact is against the far right side):

What do you think would happen if you put the navbar inside the container?

 

Now that we understand what's happening in the nav-bar, let's checkout the bootstrap navbar that we can add to our site:

 

This looks really cool! But, even though we're pulling in the bootstrap css and javascript libraries, we're missing one tiny thing - jQuery. If you google jquery cdn it'll be at the first link (or just take the links I post in the code). Make sure that you place the jQuery file before the src for the javascript file! We'll talk about why this all works later, but fow now, let's make our own navbar do what the above one does!!

 

 

Bootstrap Grid System:

So now we know how to make some really cool things in bootstrap, let's take a second to talk about how bootstrap works on a website with its "grid system"

Up until now, we've only worked with block and inline elements. The only way we really knew how to make things smaller was to use something like float or by using flexbox. A big reason people like to use bootstrap is that bootstrap has a built in 'grid' system, which takes care of a lot tedious hours of styling our website structure and layout for us! (See an example of bootstrap at bdpastl.github.io - when there, try to make the window smaller and see what happens! That's the grid system in action!)

When we say "grid system" what we mean is that bootstrap is set up in such a way that there are 12 columns on the site (this will make a lot more sense in a minute). When we're styling our site, all we need to do is make sure that our containers all add up to 12!

Let's take a look:

Did you notice that the last couple rows were in the same container? You can have as many divs as you'd like in a container, but if you're using the grid system (which you should because it's awesome!), you need to make sure that your column size all adds up to 12! Interestingly enough though, try making your screen smaller and see what happens to the divs in the bottom container. Things get weird!

Speaking of columns adding up to 12, your columns don't all have to be of equal length if they're in a row! They only need to add up to 12! Let's do some mixing and matching!

 

Grids of differing sizes!

Grid elements can have differing sizes! Did you notice the col-xs-1, col-md-5, col-lg-6, etc? Look at the below code (which is just our original grid from the first portion, but all the columns are col-lg-#). When you're on this screen, in codepen, shrink the size of the screen. What happens?

 

Now let's try it with half col-lg-# and half col-md-#:

 

So you're probably wondering "what the heck is going on with this junk?", and initially this makes little to no sense, BUT this level of responsiveness lets us really good looking websites for both desktops, laptops, tablets, and smartphones!

We can do this by having our divs take in not just one class for styling, but multiple!

What's happening above is that initially on a normal large screen, all of the columns take up only 2 in the top container, and all of the 12 in the bottom container take up 1. When our screen gets slightly smaller, (that is when it's no longer 'lg'), we shift all of our columns to being 2 wide (which keeps our top columns in place, but gives us 2 rows of the columns in the below container!

So let's make our site REALLY responsive:

While what we've done may not look immediately pretty, this is exactly how many developers build their sites! One thing to note, see how we have so much written in our classes? It would be super wise to probably clean that up, and create css classes up in the styling section of our site!

Photo Blog V2

So, we've spent a while going over bootstrap, but let's take a moment and go refactor our photo-blog from last time! For reference, here's what it looked like at the end of the last lesson (without using flexbox):

By using float, we had a pretty responsive webiste, but I bet we can do some really cool things with bootstrap!

Let's start with adding a jumbotron inside of a container instead of just a header (also note that we added back in the javascript and jquery elements to our head):

Something's wrong, right? That's because our <style> section is overwriting our bootstrap! Try removing the div { float: left; padding: 20px; }. It'll look a little weird for now, but just bear with the changes!

Now let's add in our navbar from before (not the bootsrap navbar from their site, but the navbar we had built!):

Now our site has a cool navbar up top AND a jumbotron showing off our blog's name!

So, we learned about the grid system before. Let's try to make a site where we have 3 images going across in rows. First we want to wrap our images in a <div class='container'> AND make sure that we add a class='col col-lg-4' to our divs wrapping our images:

At this point, we have our images being somewhat responsive, but it looks like they're being overlapped. What can we do about that? This is where we can wrap our images in a <div class='thumbnail'>. This will give us the entire photo inside the div scaled properly!

Now we've got all of our images looking super good - but try rescaling! Once our screen gets a little smaller, we just get one image per line. That's boring! We want our blog to scale from 3 down to 2 down to 1 image per row! Mostly just to look fancy, but hey! Fancy sites are cool!

So, remember back from grids that we can use col col-md-# to determine the size of what a div will be when we scale our screen to a medium size? Let's try col col-md-6 so that we'll get two images per row:

So, that's great and all, but when our screens get small, it still doesn't look that good. Let's try changing col-md-6 to col-sm-6. Let's see how that works:

 

One final note on our photoblog's grid system, have you noticed that the borders around the image get kind of weird when you're rescaling? That's because we still have our styles up in the header. Try deleting those to see what happens!