Welcome to the Bootstrap Workshop

Ryan Cosentino

jQuery and Bootstrap

Goal

The goal of this workshop is to use Bootstrap and jQuery to create a form that can add or remove courses from a table:

What is Bootstrap?

Bootstrap is a widely used CSS framework that can be used to easily and consistently style HTML elements using CSS and (optionally) JavaScript. Bootstrap contains styled components for buttons, cards, dropdowns, input groups, navigation bars, tooltips, and many others, along with utility classes for common CSS properties.

Bootstrap was originally developed at Twitter for their internal web applications but was eventually released to the public as an open source project in 2011.

Bootstrap’s documentation can be found here and their source code (GitHub) here.

“Installing” Bootstrap

Similar to jQuery, while Bootstrap can be downloaded and used locally, it is commonly accessed via a CDN (content delivery network).

Visit the following link and replace the default HTML in the editor with the following:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>Add Courses to Table</title>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>

<body class="container-fluid">

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

	<script>
		// Your Code
	</script>
</body>
</html>

“Installing” Bootstrap

Clicking the “Run” button will load your HTML.

The <link> tag downloads the Bootstrap CSS styles. Note that some components need JavaScript and require an additional script tag, however we won’t we using those components here.

Spacing Classes

One of the most helpful Bootstrap utility CSS classes are those made for setting padding and margins. They are named using the format:

{property}{sides}-{size}

Where property can be:

  • m - to set margin
  • p - to set padding

Spacing Classes

{property}{sides}-{size}

Where sides can be:

  • t - top
  • b - bottom
  • l - left
  • r - right
  • x - left and right
  • y - top and bottom
  • blank - sets all 4 sides

Spacing Classes

{property}{sides}-{size}

Where size can be:

  • 0 - set value to 0
  • 1 - set value to spacer * .25
  • 2 - set value to $spacer * .5
  • 3 - set value to $spacer
  • 4 - set value to $spacer * 1.5
  • 5 - set value to $spacer * 3
  • auto - set value to auto

Spacing Classes

Examples include

  • m-0 sets all margins to 0
  • mb-2 sets a medium bottom margin
  • pl-5 sets a large left padding
  • px-1 sets a small left and right padding

These can be used to easily add padding and margins to elements without inline CSS or having to define rules in an additional style sheet.

Bootstrap Colors

There are a set of main colors that can be applied to many Bootstrap components:

primary

secondary

success

danger

warning

info

white

light

dark

Bootstrap Colors

For example, the background utility classes are:

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-white
.bg-light
.bg-dark

Bootstrap Colors

Lets give our page a light gray background:

<body class="container-fluid bg-light">

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

	<script>
		// Your Code
	</script>
</body>

Cards

Now let’s move on to Bootstrap components which are physical elements displayed on the page.

A card is a flexible and extensible container with rounded borders. Add the following to the top of your body, where we’re creating a card with a medium margin and padding:

<body class="container-fluid bg-light">

	<div class="card m-3 p-3">
		hello
	</div>

	...
</body>

Cards

After pressing Run, you should see something like this:

Form Text Fields

In this card we’ll make a form that creates courses. Replace the text hello with the following:

<div class="card m-3 p-3">
	<legend class="border-bottom mb-4">Add Course</legend>
	<div class="form-group">
		<label>Subject</label>
		<input type="text" class="form-control" id="subject">
		<small class="form-text text-muted">Course's Subject</small>
	</div>
</div>

Here, the legend tag acts like a title and we’re giving it a bottom border and large bottom margin. The input element will be stylized since it has the form-control Bootstrap class.

Form Text Fields

After pressing Run, you should see something like this:

Form Text Fields

Now lets add an input for the course number and title:

<div class="card m-3 p-3">
	<legend class="border-bottom mb-4">Add Course</legend>
	<div class="form-group">
		<label>Subject</label>
		<input type="text" class="form-control" id="subject">
		<small class="form-text text-muted">Course's Subject</small>
	</div>
	<div class="form-group">
		<label>Number</label>
		<input type="text" class="form-control" id="number">
		<small class="form-text text-muted">Course's Number</small>
	</div>
	<div class="form-group">
		<label>Title</label>
		<input type="text" class="form-control" id="title">
		<small class="form-text text-muted">Course's Title</small>
	</div>
</div>

Form Text Fields

After pressing Run, you should see something like this:

Form Buttons

Now lets add two buttons for creating and deleting courses:

<div class="card m-3 p-3">
	...
	<div class="form-group">
		<label>Title</label>
		<input type="text" class="form-control" id="title">
		<small class="form-text text-muted">Course's Title</small>
	</div>
	<div>
		<button id="add-course" type="submit" class="btn btn-primary">Add Course</button>
		<button id="delete-course" type="button" class="btn btn-danger">Delete Last Course</button>
	</div>
</div>

Here, the btn class activates the Bootstrap styles and the btn-color class colors the button, where color can be any of the previously mentioned colors.

Form Buttons

After pressing Run, you should see something like this:

Tables

Now lets create a table under the form which will list our courses:

<div class="card m-3 p-3">
	...
</div>

<div class="card m-3">
	<table id="courses" class="table table-striped mb-0">
		<thead><tr><th>Subject</th><th>Number</th><th>Title</th></tr></thead>
		<tbody></tbody>
	</table>
</div>

Here, the table class activates the Bootstrap styles and the table-striped class makes the rows alternate between a white and gray background.

JavaScript

The only thing left is to program our “Add Course” and “Delete Last Course” buttons. To do this we’ll use jQuery.

In the last script tag (the one with a comment), add the following:

<script>
	table = $("table#courses > tbody")
</script>

JavaScript - Add

For the first button, we need to read all three input fields and use their values to construct a table row, then add the row to the end of the table:

<script>
	table = $("table#courses > tbody")
	$("button#add-course").click(function() {
		table.append(`<tr>
			<td>${$("#subject").val()}</td>
			<td>${$("#number").val()}</td>
			<td>${$("#title").val()}</td>
		</tr>`);
	});
</script>

JavaScript - Delete

For the second button, we need to delete the last row in the table:

<script>
	table = $("table#courses > tbody")
	$("button#add-course").click(function() {
		table.append(`<tr>
			<td>${$("#subject").val()}</td>
			<td>${$("#number").val()}</td>
			<td>${$("#title").val()}</td>
		</tr>`);
	});
	$("button#delete-course").click(function() {
		table.children().last().remove();
	});
</script>

Result

Prev - jQuery Workshop, Next - Git

Home