Understanding Bootstrap in Angular

HTML elements tell the browser what kind of content they represent, but they don’t provide any information about how that content should be displayed. The information about how to display elements is provided using Cascading Style Sheets (CSS). CSS consists of a comprehensive set of properties that can be used to configure every aspect of an element’s appearance and a set of selectors that allow those properties to be applied.

One of the main problems with CSS is that some browsers interpret properties slightly differently, which can lead to variations in the way that HTML content is displayed on different devices. It can be difficult to track down and correct these problems, and CSS frameworks have emerged to help web app developers style their HTML content in a simple and consistent way.

The most widely used framework is Bootstrap, which consists of a set of CSS classes that can be applied to elements to style them consistently and the JavaScript code that performs an additional enhancement. I use the Bootstrap CSS styles in this book because they let me style my examples without having to define custom styles in each chapter. I don’t use the Bootstrap JavaScript features at all in this book.

I don’t want to get into too much detail about Bootstrap because it isn’t the topic of this website, but I do want to give you enough information so you can tell which parts of an example are Angular features and which are Bootstrap styling. See http://getbootstrap.com for full details of the features that Bootstrap provides.

Applying Basic Bootstrap Classes

Bootstrap styles are applied via the class attribute, which is used to group together related elements. The class attribute isn’t just used to apply CSS styles, but it is the most common use, and it underpins the way that Bootstrap and similar frameworks operate. Here is an HTML element with a class attribute, taken from the index.html file:

...
<button class="btn btn-primary mt-1">Add</button>
...

The class attribute assigns the button element to three classes, whose names are separated by spaces: btn, btn-primary, and mt-1. These classes correspond to styles defined by Bootstrap, as described in Table.

Name	Description
btn	This class applies the basic styling for a button. It can be applied to a button or elements to provide a consistent appearance.
btn-primary	This class applies a style context to provide a visual cue about the purpose of the button. See the “Using Contextual Classes” section
mt-1	This class adds a gap between the top of the element and the content that surrounds it. See the “Using Margin and Padding” section.

Using Contextual Classes

One of the main advantages of using a CSS framework like Bootstrap is to simplify the process of creating a consistent theme throughout an application. Bootstrap defines a set of style contexts that are used to style-related elements consistently. These contexts, which are described in Table, are used in the names of the classes that apply Bootstrap styles to elements.

Name	Description
primary	This context is used to indicate the main action or area of content
secondary	This context is used to indicate the supporting areas of content.
success	This context is used to indicate a successful outcome.
info	This context is used to present additional information
warning	This context is used to present warnings.
danger	This context is used to present serious warnings.
muted	This context is used to de-emphasize content.
dark	This context is used to increase contrast by using a dark color.
white	This context is used to increase contrast by using white.

Bootstrap provides classes that allow the style contexts to be applied to different types of elements. Here is the primary context applied to the h3 element, taken from the index.html file created at the start of the chapter:

...
<h3 class="bg-primary text-white p-3">Adam's To Do List</h3>
...

One of the classes that the element has been assigned to is bg-primary, which styles the background color of an element using the style context’s color. Here is the same style context applied to a button element:

...
<button class="btn btn-primary mt-1">Add</button>
...

The btn-primary class styles a button or anchor element using the style context’s colors. Using the same context to style different elements will ensure their appearance is consistent and complementary, as shown in Figure 4-3, which highlights the elements to which the style context has been applied.

Using Margin and Padding

Bootstrap includes a set of utility classes that are used to add padding (space between an element’s inner edge and its content) and margin (space between an element’s edge and the surrounding elements). The benefit of using these classes is that they apply a consistent amount of spacing throughout the application.

The names of these classes follow a well-defined pattern. Here is the body element from the index.html file created at the start of the chapter, to which margin has been applied:

...
<body class="m-1">
...

The classes that apply margin and padding to elements follow a well-defined naming schema: first, the letter m (for margin) or p (for padding), then a hyphen, and then a number indicating how much space should be applied (0 for no spacing, or 1, 2, or 3 for increasing amounts). You can also add a letter to apply to space only to specific sides, so t for top, b for the bottom, l for left, r for right, x for left and right, and y for top and bottom).

Changing Element Sizes

You can change the way that some elements are styled by using a size modification class. These are specified by combining a basic class name, a hyphen, and lg or sm. In the following example, I have added button elements to the index.html file, using the size modification classes that Bootstrap provides for buttons.

<!DOCTYPE html>
<html>
<head>
 <title>ToDo</title>
 <meta charset="utf-8" />
 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
 rel="stylesheet" />
</head>
<body class="m-1">
 <h3 class="bg-primary text-white p-3">Adam's To Do List</h3>
 <div class="my-1">
 <input class="form-control" />
 <button class="btn btn-lg btn-primary mt-1">Add</button>
 <button class="btn btn-primary mt-1">Add</button>
 <button class="btn btn-sm btn-primary mt-1">Add</button>
 </div>
 <table class="table table-striped table-bordered">
 <thead>
 <tr>
 <th>Description</th>
 <th>Done</th>
 </tr>
 </thead>
<tbody>
 <tr><td>Buy Flowers</td><td>No</td></tr>
 <tr><td>Get Shoes</td><td>No</td></tr>
 <tr><td>Collect Tickets</td><td>Yes</td></tr>
 <tr><td>Call Joe</td><td>No</td></tr>
 </tbody>
 </table>
</body>
</html>

The btn-lg class creates a large button, and the btn-sm class creates a small button. Omitting a size class uses the default size for the element. Notice that I am able to combine a context class and a size class. Bootstrap class modifications work together to give you complete control over how elements are styled, creating the effect shown in the following picture.

Using Bootstrap to Style Tables

Bootstrap includes support for styling table elements and their contents, which is a feature I use throughout this book. Table lists the key Bootstrap classes for working with tables.

Name	Description
table	Applies general styling to a table element and its rows
table-striped	Applies alternate-row striping to the rows in the table body
table-bordered	Applies borders to all rows and columns
table-hover	Displays a different style when the mouse hovers over a row in the table
table-sm	Reduces the spacing in the table to create a more compact layout

All these classes are applied directly to the table element, as shown in the following example, which highlights the Bootstrap classes applied to the table in the index.html file

...
<table class="table table-striped table-bordered">
 <thead>
 <tr>
 <th>Description</th>
 <th>Done</th>
 </tr>
 </thead>
 <tbody>
 <tr><td>Buy Flowers</td><td>No</td></tr>
 <tr><td>Get Shoes</td><td>No</td></tr>
 <tr><td>Collect Tickets</td><td>Yes</td></tr>
 <tr><td>Call Joe</td><td>No</td></tr>
 </tbody>
</table>
...

Using Bootstrap to Create Forms

Bootstrap includes styling for form elements, allowing them to be styled consistently with other elements in the application. In the following example, I have expanded the form elements in the index.html file and temporarily removed the table.

<!DOCTYPE html>
<html>
<head>
 <title>ToDo</title>
 <meta charset="utf-8" />
 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
 rel="stylesheet" />
</head>
<body class="m-2">
 <h3 class="bg-primary text-white p-3">Adam's To Do List</h3>
 <form>
 <div class="form-group">
<label>Task</label>
 <input class="form-control" />
 </div>
 <div class="form-group">
 <label>Location</label>
 <input class="form-control" />
 </div>
 <div class="form-group">
 <input type="checkbox" />
 <label>Done</label>
 </div>
 <button class="btn btn-primary">Add</button>
 </form>
</body>
</html>

The basic styling for forms is achieved by applying the form-group class to a div element that contains a label and an input element, where the input element is assigned to the form-control class. Bootstrap styles the elements so that the label is shown above the input element and the input element occupies 100 percent of the available horizontal space, as shown in the following picture.

Using Bootstrap to Create Grids

Bootstrap provides style classes that can be used to create different kinds of grid layout, ranging from one to twelve columns and with support for responsive layouts, where the layout of the grid changes based on the width of the screen. The following example replaces the content of the example HTML file to demonstrate the grid feature.

<!DOCTYPE html>
<html>
<head>
 <title>ToDo</title>
 <meta charset="utf-8" />
 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
 rel="stylesheet" />
 <style>
 .row > div {
 border: 1px solid lightgrey; padding: 10px;
 background-color: aliceblue; margin: 5px 0;
 }
 </style>
</head>
<body class="m-2">
 <h3>Grid Layout</h3>
 <div class="container">
 <div class="row">
 <div class="col-1">1</div>
 <div class="col-1">1</div>
 <div class="col-2">2</div>
 <div class="col-2">2</div>
 <div class="col-6">6</div>
 </div>
 <div class="row">
 <div class="col-3">3</div>
 <div class="col-4">4</div>
 <div class="col-5">5</div>
 </div>
 <div class="row">
 <div class="col-6">6</div>
 <div class="col-6">6</div>
 </div>
 <div class="row">
 <div class="col-11">11</div>
 <div class="col-1">1</div>
 </div>
 <div class="row">
 <div class="col-12">12</div>
 </div>
 </div>
</body>
</html>

The Bootstrap grid layout system is simple to use. A top-level div element is assigned to the container class (or the container-fluid class if you want it to span the available space). You specify a column by applying the row class to a div element, which has the effect of setting up the grid layout for the content that the div element contains.

Each row defines 12 columns, and you specify how many columns each child element will occupy by assigning a class whose name is col- followed by the number of columns. For example, the class col-1 specifies that an element occupies one column, col-2 specifies two columns, and so on, right through to col-12, which specifies that an element fills the entire row. In the listing, I have created a series of div elements with the row class, each of which contains further div elements to which I have applied col-* classes. You can see the effect in the browser in the following picture.

Creating Responsive Grids

Responsive grids adapt their layout based on the size of the browser window. The main use for responsive grids is to allow mobile devices and desktops to display the same content, taking advantage of whatever screen space is available. To create a responsive grid, replace the col-* class on individual cells with one of the classes shown in the following table.

Name	Description
col-sm-*	Grid cells are displayed horizontally when the screen width is greater than 576 pixels.
col-md-*	Grid cells are displayed horizontally when the screen width is greater than 768 pixels.
col-lg-*	Grid cells are displayed horizontally when the screen width is greater than 992 pixels.
col-xl-*	Grid cells are displayed horizontally when the screen width is greater than 1200 pixels

When the width of the screen is less than the class supports, the cells in the grid row are stacked vertically rather than horizontally. The following example demonstrates a responsive grid in the index.html file.

<!DOCTYPE html>
<html>
<head>
 <title>ToDo</title>
 <meta charset="utf-8" />
 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
 rel="stylesheet" />
 <style>
 #gridContainer {padding: 20px;}
 .row > div {
 border: 1px solid lightgrey; padding: 10px;
background-color: aliceblue; margin: 5px 0;
 }
 </style>
</head>
<body class="m-1">
 <h3>Grid Layout</h3>
 <div class="container">
 <div class="row">
 <div class="col-sm-3">3</div>
 <div class="col-sm-4">4</div>
 <div class="col-sm-5">5</div>
 </div>
 <div class="row">
 <div class="col-sm-6">6</div>
 <div class="col-sm-6">6</div>
 </div>
<div class="row">
 <div class="col-sm-11">11</div>
 <div class="col-sm-1">1</div>
 </div>
 </div>
</body>
</html>

I removed some grid rows from the previous example and replaced the col-* classes with col-sm-*. The effect is that the cells in the row will be stacked horizontally when the browser window is greater than 576 pixels wide and stacked horizontally when it is smaller, as shown in the picture.

Creating a Simplified Grid Layout

For most of the examples in this book that rely on the Bootstrap grid, I use a simplified approach that displays content in a single row and requires only the number of columns to be specified, as shown in the example.

<!DOCTYPE html>
<html>
<head>
 <title>ToDo</title>
 <meta charset="utf-8" />
 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css"
 rel="stylesheet" />
</head>
<body class="m-1">
 <h3 class="bg-primary text-white p-3">Adam's To Do List</h3>
 <div class="container-fluid">
 <div class="row">
 <div class="col-4">
 <form>
 <div class="form-group">
 <label>Task</label>
<input class="form-control" />
 </div>
 <div class="form-group">
 <label>Location</label>
<input class="form-control" />
 </div>
 <div class="form-group">
 <input type="checkbox" />
<label>Done</label>
 </div>
 <button class="btn btn-primary">Add</button>
 </form>
 </div>
 <div class="col-8">
 <table class="table table-striped table-bordered">
 <thead>
 <tr>
 <th>Description</th>
<th>Done</th>
 </tr>
 </thead>
 <tbody>
 <tr><td>Buy Flowers</td><td>No</td></tr>
<tr><td>Get Shoes</td><td>No</td></tr>
<tr><td>Collect Tickets</td><td>Yes</td></tr>
<tr><td>Call Joe</td><td>No</td></tr>
 </tbody>
 </table>
 </div>
 </div>
 </div>
</body>
</html>

This listing uses the col-4 and col-8 classes to display two div elements side by side, allowing the form and the table that displays the to-do items to be displayed horizontally, as illustrated in the image.