Premade components

The story so far

You know how to put your own HTML inside a Bootstrap template, to improve its look. There's more, though.

Bootstrap comes with a bunch of components, read to copy and paste. Let's look at a few.

Alerts

An alert draws attention to something. Could be an error, could be anything you want. For example:

Alert

The HTML for that is:

<div class="alert alert-success" role="alert">
  Dogs are the best!
</div>

Another example:

Another alert

<div class="alert alert-danger" role="alert">
    Warning! Cat detected!
</div>

The Bootstrap alert page has a complete list.

Buttons

This button…

Button

…was made by this HTML:

<button type="button" class="btn btn-primary">Edit</button>

This button…

Button

…was made by this HTML:

<a class="btn btn-primary" href="#" role="button">Edit</a>

So you can make a button with the <button> tag, or you can make an <a> tag look like a button. We'll use both, when we make apps.

There are other button types, like red buttons for dangerous things such as deleting data. See the Bootstrap buttons documentation.

Navbars

Here's a navbar, or navigation bar, at the top of a page:

Navbar

A navbar has a branding area, with the name of the site, and maybe a logo. Then it has a menu. The menu in this example is pushed to the right, but menus can on the left, as well. Menus can have dropdowns.

Bootstrap navbars automatically adjust to screen size.

Navbar, small screen

Navbars are more complex than other components. We'll look at details later.

More

There are about a dozen other components you can use. We might use more as we go.

Exercise

Exercise: Alerts and buttons
Make a page like this:

Goal

To get started, download the zip file with our final template. Put your code in the index.html file.

Make a directory in your littlebootstrap subdomain for this exercise. Upload your file to the directory. Submit the URL.

(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)

Summary

Boostrap has ready-made components you can copy and paste.