Bootstrap

tutorial javascript basic

At this point you should have created a few webpages, changed how they look using CSS, and even made them interactive using JavaScript. You should also have a basic understanding of JQuery. (If this stuff isn’t true, then you should probably come back to this tutorial after you’ve done a few more projects and/or homeworks.)

If you’re anything like me, one thing you’ve probably struggled with is trying to make your websites look like a “real” or “modern” website. It’s hard to explain exactly what I mean by that, but if you’ve made a few webapges (even simple ones), I bet you know what I’m talking about.

If you’re particularly artistically inclined, you could create CSS that makes your website look good (on every device and every browser) and write JavaScript that makes it interactive. But if you’re like me, you’ll spend hours days trying to get that one box to line up perfectly with that other box, and it’ll never quite look right, and everything will seem terrible and I’m not crying you’re crying. :crying_cat_face:

Instead of doing it myself, I use Bootstrap. Note: I’m not saying you have to use Bootstrap, or even that you should use it. In fact, if you’re just starting out learning, it might be a good idea to stick to writing your CSS without it. You can always come back here when you’re ready to start using Bootstrap!

Bootstrap

Bootstrap is really two things:

Bootstrap is written using JQuery, which just means that the people who wrote Bootstrap used objects and functions from JQuery. So to use Bootstrap, you have to load JQuery first:

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

Then you have to load both the Bootstrap JavaScript and the Bootstrap CSS:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Now that you’ve loaded the CSS and the JavaScript, you can use both in your page. Let’s talk about them one at a time:

Bootstrap CSS

By now you know that you can style your webpage using CSS. You create a .css file that contains style rules, and then you use those style rules by setting the id and class attributes of your html elements.

Bootstrap provides a .css file with a bunch of style rules that you can use to style your webpage.

For example, look at this page that contains unstyled content:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

I’ve set the class attribute of some of these elements, but I haven’t written any styles for those classes so everything just has the default appearance. At this point I could write a .css file that styles the content. Or I could use the .css file that Bootstrap provides!

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The only thing that changed is I’ve added the Bootstrap CSS file (and I’ve added JQuery and the Bootstrap JavaScript, which technically doesn’t do anything yet). In that CSS, Bootstrap contains styles for the classes I used (that’s why I used them).

This isn’t meant to be very mind-blowing, but it provides a reasonable starting point for a more “modern” looking website.

Bootstrap JavaScript

The other half of Bootstrap is its JavaScript library, which contains objects and functions that allow you to easily create interactive elements. This is usually done automatically based on the class attributes in your page, so you usually don’t have to write any JavaScript yourself.

Here’s an example that creates an interactive dropdown menu:

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Dropdown Example</title>
	
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<!--script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
	<div class="dropdown">
		<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Oh My</button>
		<ul class="dropdown-menu">
			<li><a href=".">Lions</a></li>
			<li><a href=".">Tigers</a></li>
			<li><a href=".">Bears</a></li>
		</ul>
	</div>
</body>
</html>

This HTML contains a <div> element, which contains a <button> and a <ul> list. Without Bootstrap, those elements would look like this:



But because we’re using Bootstrap, it looks like this:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Bootstrap’s JavaScript adds a click listener to the <button> that toggles the visibility of the list. Bootstrap’s CSS contains rules that hide the <ul> by default, and make it look like a dropdown when it’s visible.

Notice that we didn’t have to write any JavaScript or CSS ourselves. We get the functionality and a reasonable look-and-feel just by including the Bootstrap CSS and JavaScript and using the correct classes on our HTML elements.

Bootstrap Components

The next logical question is: how do we know what classes to use? And you can probably guess by now that the answer is: consult the documentation!

The Bootstrap documentation contains a bunch of example components (like the dropdown) that you can use. If you’re interested in using Bootstrap, this page should be your first stop. I recommend reading through that whole thing at least once, and then going back to it later when you need a specific component.

W3Schools also has a good section of Bootstrap examples. And of course Google is always your best friend.

Here are a couple examples of the most common Bootstrap components:

Container

The container class allows the content in your website to “snap” to certain widths depending on the device you’re using and the width of the window. To see what I’m talking about, try changing the width of your browser right now. Notice that the content “snaps” to different widths depending on the width of the window.

Here’s an example:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Try opening this code up in its own window (click Run Pen and then click the Edit on CodePen link in the upper-right corner) and changing the width of the window.

To create a navigation bar (like the one at the top of this page), you can use a <nav> tag with the navbar class, then a <ul> tag with the nav and navbar-nav classes.

<nav class="navbar navbar-default">
	<ul class="nav navbar-nav">
		<li class="active"><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Cat Pictures</a></li>
	</ul>
</nav>
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

(The navigation bar is automatically turned into a menu if it doesn’t have enough width, so try opening this in a new window.)

Note that you can put the <nav> inside the container <div> to give the navigation bar the same width as the content, or you can put it before the container to make the navigation span the whole page. Try both and see which you like better!

From here you can do fancier things like putting different types of components inside your nav, or changing how your navigation works on mobile devices. But these basics should get you started!

Grid

Bootstrap organizes a page’s content into a grid. You can customize the layout of your content by specifying how much room each section of your page should take up in that grid. You do this using the row and col classes.

Think about it this way: you can have an unlimited number of rows, but inside each row you can only have 12 total columns.

Here’s an example that has 2 rows that both use all 12 columns:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Obviously, you won’t always use 12 columns, especially if your content is wider than the window (like the above example). You can use fewer columns by changing the number in the col-xs-# class name to change how many columns your content should take up. For example, you could use col-xs-3 to make your content take up 3 columns. This column would take up 25% of its row’s width (3 is 25% of 12). You could then add another section that took up 75% of the row’s width using the col-xs-9 class. Notice that the total (3+9) adds up to 12!

It’s probably easier to explain using an example, so here’s an example that creates 2 rows. The first row contains 2 columns: one that takes up 9 column widths and another that takes up 3 column widths. The second row contains 3 columns, and each takes up 6 column widths.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Notice how the first row contains a column that takes up 75% (9/12) of the row, and another column that takes up the remaining 25% (3/12).

Then the second row contains 3 columns, but notice that the last column (the red one) wraps around into a new row. That’s because each row can only have a total of 12 column widths! Each of the 3 rows has a width of 6, so only the first 2 fit on the row, which causes the last column to wrap to a new row.

The cool thing about this is that you can specify different layouts for different sized devices and screens. This is super useful, since you don’t need a separate version of your website for phones, you just use a different layout.

Notice the xs part of the col-xs-# classes we’ve used so far. That stands for extra small and means that phone sized screens (and larger) will use that layout. So far that hasn’t been important because we haven’t specified any other screen size layouts. But we could add classes for other screen sizes.

Here’s an example:

<div class="row">
	<div class="col-xs-12 col-md-4">This section will take up 12 columns on extra small screens, but only 4 columns on medium (and larger) screens.</div>

	<div class="col-xs-12 col-md-8"><p>This section will take up 12 columns on extra small screens, but only 8 columns on medium (and larger) screens.</p></div>
</div>

This html defines a row with two columns. On extra small screens, each column takes up all 12 column widths, which causes them to be shown on their own rows. But on medium (and larger) screens, the first column only takes up 4 column widths, and the second column takes up the remaining 8.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

(Open this in its own window and change the window width!)

This is a really powerful feature, so it might seem confusing at first. I recommend putting together a few examples and seeing how they behave when you change the width of your browser. When you get the hang of it, this will allow you to create layouts that work on mobile devices, desktops, and everything in between.

Themes

As we’ve seen, one of the great things about Bootstrap is that it provides CSS styles to make a reasonably modern-looking website. But you aren’t stuck with the default styles that Bootstrap provides.

Instead of using Bootstrap’s default .css file, you can use other .css files that define styles for Bootstrap’s classes. These files are called Bootstrap themes, but really they’re just regular .css files.

Here’s an example page that uses Bootstrap’s default styles, aka the default theme:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

And here is that same page using the Cyborg Theme from Bootswatch:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Notice that the only thing that changed is the .css file we’re loading in the <head> section. This .css file defines all of the classes that Bootstrap uses, but with different styles than the default .css file. You can download the .css file or view it in your browser here: https://bootswatch.com/cyborg/bootstrap.css

Try doing a search in that file for the panel class to see the styles on it.

You can also add your own CSS rules for any of the Bootstrap classes to create your own custom style. You can do this on top of the default styles or on top of a theme. Keep in mind the cascading part of CSS, which means that your styles will be combined with the styles from the main Bootstrap CSS.

For example, we could add some custom styles for a few of the classes in our webpage:

<style>
	.navbar{
		border: thick solid blue;
	}
	
	.panel .panel-heading{
		background-color:red;
	}
	
	.panel .panel-footer{
		font-size: 8pt;	
	}
	
	.panel{
		width: 200px;
		margin-left:auto;
		margin-right:auto;
	}
</style>

This adds our own custom styles to a few Bootstrap classes. First the main styles from Bootstrap (or whatever theme we’re using) are applied, and then our styles cascade on top to add a border to the navbar, change the background color of the panel, change the font size of the panel footer, and set the width of the panel.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

This gives us the best of both worlds: we get to use all of the styles from Bootstrap, but we still get to customize our site with whatever styles we want.

Homework

Next: AJAX and JSON

Go back up