Beyond basic HTML elements

We have already seen that Bootstrap provides a consistent look and feel for basic HTML elements. Another feature that Bootstrap offers is custom components that are not included in the set of basic elements that HTML provides.

The approach that Bootstrap takes to provide these custom components is to use special CSS classes. By attaching these Bootstrap CSS classes to simple HTML elements you can create custom components and special effects. These notes will take you through several examples of this.

The Jumbotron and card components

The Jumbotron component implements a highlighted region in a page that can be used to make distinctive headings for a document. You can see an example of a Jumbotron on the landing page for this lecture series. The Jumbotron on that page is the large gray area containing the text "Welcome to Bootstrap."

To set up a Jumbotron you set up a <div> element and give it a class attribute of "jumbotron".

<div class="jumbotron">
	...Content goes here...
</div>

A card is a component with both header and body elements. Here is an example of the code I used to set up the card components on the landing page.

<div class="card bg-light">
	<div class="card-header">...Card title...</div>
	<div class="card-body">
		...Content goes here...
	</div>
</div>

Navigation Controls

A common feature in web sites is a set of navigation links. Bootstrap makes it easy to construct an attractive list of navigation links.

At the top of each page of this course web site you will see a set of navigation links implemented with the help of Bootstrap. Here is the structure I use to implement those links:

<nav class="nav nav-tabs">
	<a class="nav-link" href="../../../cmsc106.html">Home</a>
	<a class="nav-link" href="../../resources.html">Resources</a>
	<a class="nav-link" href="../../examples.html">Examples</a>
	<a class="nav-link" href="../../calendar.html">Calendar</a>
	<a class="nav-link" href="../../assignments.html">Assignments</a>
</nav>

The navigation links are implemented simply as list of links inside a <nav class="nav nav-tabs"> element with the Bootstrap nav and nav-tabs classes applied to it. The anchor elements have an additional nav-link class applied to give them a distinctive appearance.

Another handy feature you can implement in your navigation bar is to highlight the button for the link that corresponds to the current page. For example, this is the code you would use to implement the navigation bar at the top of the course web site's calendar page:

<nav class="nav nav-tabs">
	<a class="nav-link" href="../cmsc106.html">Home</a>
	<a class="nav-link" href="esources.html">Resources</a>
	<a class="nav-link" href="examples.html">Examples</a>
	<a class="nav-link active" href="calendar.html">Calendar</a>
	<a class="nav-link" href="assignments.html">Assignments</a>
</nav>

The active class causes the button for the current page to be highlighted. This gives the user additional feedback to let them know where they are on the site.