P. MatsinopoulosPractical Bootstraphttps://doi.org/10.1007/978-1-4842-6071-5_1

1. Getting Started

Panos Matsinopoulos¹

(1)

KERATEA, Greece

Creating responsive websites and applications is becoming a hard requirement now that many people have started using mobile phones and tablets. Twitter Bootstrap is here to give you all the necessary tools, so that the work you create is equally well viewed on various display sizes.

This chapter starts with the basics of Twitter Bootstrap, mainly its grid system.

You will learn about the 12-column grid system, so that you can divide your page in multiple rows and columns. Figure 1-1 shows an example of the Twitter Bootstrap grid system.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig1_HTML.jpg — Figure 1-1
A Demo Page That Shows the Twitter Bootstrap Grid System

You will make sure that you have a page as shown in Figure 1-2.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig2_HTML.jpg — Figure 1-2
Page as Viewed on Large Displays

It can automatically be transformed to look like Figure 1-3 on smaller devices.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig3_HTML.jpg — Figure 1-3
Page Adapts Its Layout on Smaller Devices

Learning Goals

1.
Learn what Twitter Bootstrap is.
2.
Learn how to include Twitter Bootstrap CSS and JavaScript libraries in your project.
3.
Learn about the two main containers available and their differences.
4.
Learn about how the grid system of Twitter Bootstrap can help you organize the content of your page and generate a responsive layout.

Bootstrap Defined

Twitter Bootstrap is a set of CSS and JavaScript code that you can base your own HTML, CSS, and JavaScript code on, in order to quickly have a website or web application that is responsive, with a mobile-first design approach.

In other words, it provides you with some CSS classes and JavaScript code that you can just go and use. You apply the classes, and you use the JavaScript modules and quickly have your website and your web application have features that would have taken you a lot of effort to develop from scratch.

The Bare-Bones Twitter Bootstrap Page

Let’s start by creating the first Twitter Bootstrap page. Create a new file index.html and put the following content inside (Listing 1-1).

<!DOCTYPE html>

<head>

<title>Bare Bones Twitter Bootstrap Page</title>

</head>

<body>

</body>

</html>

Listing 1-1

Bare-Bones Twitter Bootstrap Page

This is a page that does not have any valuable content. Its body element is empty. However

1.
It references the Bootstrap CSS library.
2.
It references the jQuery library, which is a JavaScript library necessary for Twitter Bootstrap JavaScript modules.
3.
It references the popper library. This is a JavaScript library that Bootstrap is using to position tooltips and popovers.
4.
Finally, it references the Bootstrap JavaScript library too.

If you load the preceding page on your browser, you will see nothing. But all the Twitter Bootstrap features would be loaded.

Containers

When you start your page layout, you need to decide on the container style that would include your page content. There are three types of containers:

1.
container, which sets a max-width at each responsive breakpoint.
2.
container-fluid, which is width: 100% at all breakpoints.
3.
container-{breakpoint}, which is width: 100% until the specified breakpoint. After the specified breakpoint (including), it uses the max-width as if it were a container.

Note

max-width defines the maximum width an element can have. This means that the element tries to occupy as much width as possible up to the max-width after which it expands its height in order to fit the content. This of course means that the actual width of the element cannot be more than max-width, even if the width property may have a larger value.

Tip

Twitter Bootstrap defines five breakpoints, that is, pixel widths, after which the grid layout changes. For example, a small breakpoint has the value 576px and is referring to displays with width between 576px and 767px. I will talk about breakpoints later on in this chapter.

You apply one of them by setting the corresponding div element (or equivalent block element) to have a class equal to the name of the container.

Enhance the content of your page so that it is like the following (in bold, you see the code that has been added - Listing 1-2).

<!DOCTYPE html>

<head>

<link rel="stylesheet" href="stylesheets/index.css" type="text/css">

<title>Bare Bones Twitter Bootstrap Page</title>

</head>

<body>

<div class="container">

This is a container

</div>

<div class="container-fluid">

This is a container fluid

</div>

</body>

</html>

Listing 1-2

Add Two Containers

1.
I have added a reference to a local CSS file named stylesheets/index.css. I have put that exactly after the Twitter Bootstrap CSS reference. I will put inside this file the web page–specific CSS rules. This file needs to be after the Twitter Bootstrap CSS reference, because it will be relying on it.
2.
I have created two divs that would function as the page containers. The first div is a container, whereas the second div is a container-fluid.

Create the file index.css inside the folder stylesheets and add the following content (Listing 1-3).

.container {

background-color: #8DC5CC;

}

.container-fluid {

background-color: #aaad21;

}

Listing 1-3

CSS for the index.css File

Caution

Now that you are using Twitter Bootstrap, you will not need to write CSS reset rules like * {box-sizing: border-box}. This is because Twitter Bootstrap itself has a series of defaults that make very good sense, and they are aligned with the rest of the Twitter Bootstrap classes.

As you can imagine, this is used to apply specific, different colors to the two containers so that I can see how they are put on the page.

Save all files and load the index.html page on your browser. What you will see should be something like Figure 1-4.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig4_HTML.jpg — Figure 1-4
container vs. container-fluid

As you can see in Figure 1-4, the container has left and right margins, whereas the container-fluid does not have margins and covers the whole width of the page. container margins are not of fixed width. Their width changes depending on the viewport width.

On the other hand, both containers have left and right paddings, equal to 15px. You can see that the text “This is a container …” does not start at the edge of the left border, but it has some free blank space.

Note that even if you use a container, when you shrink the width of your browser window, so that it becomes less than 576px wide, the container loses its left and right margins and, essentially, behaves like the container-fluid . In other words, this page on an Apple iPhone X device would be displayed like what you see in Figure 1-5.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig5_HTML.jpg — Figure 1-5
container Behaves like container-fluid on iPhone X

Hence, container and container-fluid in that case would be the same.

Grid System

The grid system, that is, dividing your layout into rows and columns, is a good practice to design the layout of your page. Twitter Bootstrap comes with handy classes that will allow you to scale your layout up to 12 columns, as the device or viewport size increases.

Hence, whenever you want to divide your page into a series of columns, you have to

1.
Decide on the container type.
2.
Inside the container, add a row class div.
3.
Inside the row class div, add one or more col-* class div elements.

I will explain what a col-* class is using some examples.

Example: One Row with 12 Columns

Let’s create a page with a one-row and 12-column layout as in Figure 1-6.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig6_HTML.jpg — Figure 1-6
One-Row 12-Column Grid

One way you can create this page is shown in the following (Listing 1-4).

<!DOCTYPE html>

<head>

<title>1 row 12 columns</title>

</head>

<body>

<div class="container">

<div class="row">

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

</body>

</html>

Listing 1-4

One-Row 12-Column Page

The CSS file (named index.css) is given in Listing 1-5.

.container {

background-color: #8DC5CC;

}

.container .row div {

background-color: #4e9013;

padding: 10px 0;

border: 1px solid green;

color: white;

text-align: center;

}

Listing 1-5

CSS for the One-Row 12-Column Layout

As you can see in the HTML file, index.html, I have used a container and inside it I have introduced a row class div. Then for each one of the 12 columns, I have used a col class div.

Again, I wanted 12 columns, and I added 12 divs with class col. All 12 divs have been added inside a single row div. The row div is used to lay out columns, and only columns can be immediate children of rows.

Example: Two-Row Grid, the Second with Six Columns

Let’s add one more row to our grid page. But this time, let’s assume that we want six columns on the second row, as in Figure 1-7.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig7_HTML.jpg — Figure 1-7
Two Rows, the Second Row with Six Columns

As you can see in Figure 1-7, each one of the columns of the second row occupies double the column width of the columns of the first row.

The full HTML code is in Listing 1-6.

<!DOCTYPE html>

<head>

<title>2 rows 2nd 6 columns</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

</div>

</body>

</html>

Listing 1-6

Two Rows, the Second Row Having Six Columns, HTML Code

Listing 1-7 is the full CSS code (which is not critical to the creation of the grid, but it is only there to help me visualize the columns of the rows of the grid on my page).

.container {

background-color: #8DC5CC;

}

.container .row:nth-of-type(1) div {

background-color: #4e9013;

padding: 10px 0;

border: 1px solid green;

color: white;

text-align: center;

}

.container .row:nth-of-type(2) div {

background-color: #902e07;

padding: 10px 0;

border: 1px solid #441180;

color: white;

text-align: center;

}

Listing 1-7

CSS for the Page Having Two Rows, the Second Row Having Six Columns

As you can see, it is very easy to have six columns by only having six divs with class col as children of the div with class row.

Example: Two-Row Grid, the Second with Five Columns

Let’s say that you want one row to have five columns, instead of six, with the first column being double the size of the others. For example, see Figure 1-8.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig8_HTML.jpg — Figure 1-8
Second Row Having Five Columns, First Column Being Wider

How would you do that? If you just changed your code to have five divs, inside the second row div, what would you get? You would get the page on Figure 1-9.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig9_HTML.jpg — Figure 1-9
Second Row Having Five Columns of Equal Size

This is not exactly what you want. If you just put five divs, the columns generated have equal width. But what you want is the first column to be double the width of the others. Also, if you look more carefully, you will see that the first column occupies four out of the 12 available standard columns, whereas the other columns occupy two. Again, this is what you want to achieve (Figure 1-10).

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig10_HTML.jpg — Figure 1-10
What You Want to Achieve

In order to do that, you have to be more precise on the class of each column div. You have to tell exactly how many standard columns each column should occupy.

Hence, for the first column, you have to use the class col-4, whereas for the other columns, you have to use the class col-2. The correct HTML code is in Listing 1-8.

<!DOCTYPE html>

<head>

<title>2 rows 2nd 5 columns</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Listing 1-8

Using col-4 for the First Column and col-2 for the Others

Another way you could divide your second row into five columns is shown in Listing 1-9.

<!DOCTYPE html>

<head>

<title>2 rows 2nd 5 columns</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Listing 1-9

Another Way to Divide into Five Columns

If you save and load this page on your browser, you will see what is depicted in Figure 1-11.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig11_HTML.jpg — Figure 1-11
Another Way to Divide into Five Columns

As you can see in Figure 1-11, the second row is, again, with five columns, but with a different size for the first and third columns. These two are of size 3, whereas all the other columns are of size 2. However, even in this case, the total column sizes add up to 12: 3 + 2 + 3 + 2 + 2.

Example: Two-Row Grid, the Second Having Three Columns, with the Middle Wider

But you don’t always have to be precise about the width of all the columns. Sometimes, you want to be specific only about the width of one column, and you want the others to have a width automatically calculated. See, for example, Figure 1-12.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig12_HTML.jpg — Figure 1-12
Middle Column to Be Half of Available Width

You want the middle column to be occupying half of the available width and leave the rest of the space shared between the first and third columns.

You could do that by giving col-3 to the first and third divs and col-6 to the second div, but it appears that you can do that by giving col to the first and third divs and col-6 to the second div, as in Listing 1-10.

<!DOCTYPE html>

<head>

<title>Specifying the width of the middle column only</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Listing 1-10

Specifying the Width of the Middle Column Only

Different Display Widths

Twitter Bootstrap allows you to use different classes for your grid layout (and for other properties of your web page style), according to the different display widths that your web page will be displayed on. In particular, there are five key width breakpoints as listed in Table 1-1.

Table 1-1

Twitter Bootstrap Responsive Breakpoints

Name	Symbol	Display Width
Extrasmall	xs	<576px
Small	sm	>=576px
Medium	md	>=768px
Large	lg	>=992px
Extralarge	xl	>=1200px

You are referring to them by their corresponding symbol, as part of the class name that you are using.

So, if you are using, for example, the class col-lg-5, this means that this class refers to the breakpoint lg, for devices with width >=992px. However, further interpretation of each particular class depends on the class case itself. We will learn the most important classes in this section.

The Twitter Bootstrap grid classes that work based on the preceding five key breakpoints are

col-1, col-2, and so on, up to col-12, for the extrasmall devices
col-sm-1, col-sm-2, and so on, up to col-sm-12, for small devices
col-md-1, col-md-2, and so on, up to col-md-12, for medium devices
col-lg-1, col-lg-2, and so on, up to col-lg-12, for large devices
col-xl-1, col-xl-2, and so on, up to col-xl-12, for extralarge devices

But what is the difference between col-sm-2 and col-md-2, for example?

They both occupy two columns. col-sm-2 will occupy two columns for any display area width that is >=576px, but col-md-2 will occupy two columns only for display widths that are >= 768px. col-md-2, for display areas that are <768px, will not occupy two columns, but will stack one column above the other, as if they were two rows, essentially each column occupying the whole 12-column available width.

Let’s see an example here. You are going to create a page with a row that has six columns, each one occupying two-column width. Write the following code into an HTML document (Listing 1-11).

<!DOCTYPE html>

<head>

<title>Listing 1-11</title>

</head>

<body>

<div class="col-sm-2">

</div>

<div class="col-sm-2">

</div>

<div class="col-sm-2">

</div>

<div class="col-sm-2">

</div>

<div class="col-sm-2">

</div>

<div class="col-sm-2">

</div>

</div>

</body>

</html>

Listing 1-11

Six Columns with the sm Breakpoint

Write the following (Listing 1-12) CSS in the corresponding index.css file inside the stylesheets folder.

.container {

background-color: #8DC5CC;

}

.container .row:nth-of-type(1) div {

background-color: #4e9013;

padding: 10px 0;

border: 1px solid green;

color: white;

text-align: center;

}

Listing 1-12

CSS for Listing 1-11

If you save the preceding code and then load the HTML page on your browser, you will see the following (Figure 1-13).

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig13_HTML.jpg — Figure 1-13
One-Row Six-Column Layout—Each One Occupying Two Columns

As you can see in the HTML code, I am using the breakpoint sm, and I instruct that each column occupies two of the available 12 columns. This will result in the row being divided into six columns, but only for display areas with width >=576px.

Enable the developer tools and shrink the browser window so that it has width exactly 576px. You will not see any significant difference on how your page is displayed. All six columns will be there, horizontally arranged (Figure 1-14).

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig14_HTML.jpg — Figure 1-14
Exactly 576px Width—Still Six Columns in Width

Things will change when you shrink 1 pixel more, to 575px. You will see the following (Figure 1-15).

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig15_HTML.jpg — Figure 1-15
Six Columns Stacked When Below the sm Breakpoint

This happened because I have used the class col-sm-2. Again, this class stacks the columns one on top of the other for each display width less than 576px and keeps the columns horizontal for any width greater than or equal to 576px.

As you can see from the preceding picture, the initially two-column-wide columns are now 12-column-wide, occupying the whole row.

The nice thing with Bootstrap is that you can apply multiple classes of different breakpoints on the same div, in order to adapt the grid layout for different devices.

See the following example in order to understand what I mean. Let’s suppose that I want, for small devices and above, to have six columns, but for smaller devices (less than 576px), I do not want one column per row, but two columns per row.

Hence

1.
For small devices or larger, I want six columns. This means that I need to use the col-sm-2 class for the divs (sm for small and 2 for six columns, since 12/6 gives 2).
2.
For extrasmall devices, I want two columns per row. Hence, I need to use the col-6 class for the divs (for extrasmall, I don’t interpolate the symbol of the device width into the class name, since the default value is xs and 6 for two columns, since 12/2 gives 6).

Let’s try that. Change the content of the preceding HTML page, in order to be like that in Listing 1-13.

<!DOCTYPE html>

<head>

<title>Listing 1-12</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Listing 1-13

Two Columns on Extrasmall Displays, but Six on Small Displays and Wider

If you save the preceding code and reload your page, while it is on 575px width (or smaller), you will see that, now, your page has two columns per row (Figure 1-16).

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig16_HTML.jpg — Figure 1-16
Two Columns on Extrasmall Devices

However, if you enlarge your display area to have a width greater than or equal to 576px, you will see that your page has six columns per row.

This is how the responsiveness of your grid is achieved.

Note

One might say, “Hold on! When on extrasmall devices, the columns inside the div have a number suffix (-6) that adds up to 36, not to 12.” You need to know here that Twitter Bootstrap will automatically wrap the columns above the 12th to a new row.

The previous web page had one grid layout breakpoint actually—the 576px, whichever display width below 576px vs. whichever display width equal to or greater than 576px. You can apply the same concept to a second breakpoint in the same grid. For example, you may want the number of columns to be three for display areas greater than 576px (small) and six for display areas greater than or equal to 768px (medium or wider).

So what I want is the following:

a.
For extrasmall devices (<576px), two columns per row (hence, col-6)
b.
For small devices (>=576px, <768px), three columns per row (hence, col-sm-4)
c.
For medium or wider devices (>=768px), six columns per row (hence, col-md-2)

Now that I know what I want to achieve, it is pretty simple. I will apply the preceding classes to my column divs, and I am done (Listing 1-14).

<!DOCTYPE html>

<head>

<title>Listing 1-14</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Listing 1-14

Two for xs , Three for sm , and Six for Wider Displays

Now, if you scale your browser width to be, for example, 760px, then you will see three columns on each row. See Figure 1-17.

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig17_HTML.jpg — Figure 1-17
Three Columns on Small-Size Displays

But if you scale it even more, to be wider than 768px, it will display six columns per row (Figure 1-18).

../images/497763_1_En_1_Chapter/497763_1_En_1_Fig18_HTML.jpg — Figure 1-18
Six Columns on Medium-Size Displays

Tasks and Quizzes

Task Details

1.
You need to implement a multicolumn layout like the ones presented in the chapter. Here are the requirements of the grid depending on the display width:
1.
For extrasmall displays, it should display one column per row.
2.
For small displays, it should display two columns per row.
3.
For medium displays, it should display three columns per row.
4.
For large displays, it should display four columns per row.
5.
For extralarge displays, it should display six columns per row.

Good luck!

Key Takeaways

Congratulations! You have just finished the first chapter, and you already know so many things about how you make your web pages responsive. Here is a list of the key things you learned:

The bare-minimum Twitter Bootstrap page and what it needs to include
The containers
The row divs
The col divs as children of the row divs
How to break the row into several columns of equal width or different widths
The different Bootstrap breakpoints
How to use different classes to define the layout of your page of different display widths

In the following chapter, you will use some more advanced techniques around the Twitter Bootstrap grid system.

P. MatsinopoulosPractical Bootstraphttps://doi.org/10.1007/978-1-4842-6071-5_2

2. Advanced Grid Techniques

Panos Matsinopoulos¹

(1)

KERATEA, Greece

In the previous chapter, you started learning about the Twitter Bootstrap grid system. In this chapter, you will continue your work on the grid system, but you will use some different, more advanced techniques to do similar and other things.

Learning Goals

You will learn

1.
How to use row columns
2.
How to vertically align content
3.
How to horizontally align
4.
How to use less than the 12 available columns
5.
How to nest content and a grid inside another
6.
What the Twitter Bootstrap defaults are

Shortcuts on Rows: Row Columns

You are now going to explore one more set of alternatives in order to do all the things that you did in Chapter 1, “Getting Started.” This is called row columns, and it is a set of classes that help you define the columns of a row but using them at the row div, not at the col div.

Example: Six-Column Layout for All Devices

Let’s suppose that I want to achieve a six-column layout that will be for all device widths. Listing 2-1 is my code.

<!DOCTYPE html>

<head>

<title>Listing 2-1</title>

</head>

<body>

<div class="row row-cols-6">

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="col">

</div>

</div>

</body>

</html>

Listing 2-1

Six-Column Layout Using Row Columns

If you save the preceding code into your index.html page and load on your browser, you will see something like that in Figure 2-1.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig1_HTML.jpg — Figure 2-1
Six Columns Using the row-cols-* Class

This is exactly what I wanted. How was it created?

1.
The row div was attributed with the class row-cols-6. The number 6 was exactly the number of the columns I wanted.
2.
Then each column div only had the col class, since I wanted all the columns to have equal width.

Of course, I am now hearing you saying, “Hold on. The same would have been accomplished if I had used only the row class without the row-cols-6 class.” And you would have been right. The use of row-cols-* in the previous example didn’t add too much value. But let’s do another example in which the row column classes are much more valuable.

Example: Three Columns for Medium, Six Columns for Large

Now I want to create a responsive grid that would give me

Three columns for all devices up to and including medium ones
Six columns for all devices with large or wider displays

You already know how to do that with the col-* class at the column div level. Here, we are going to do it with row-cols-* classes at the row level. See Listing 2-2.

<!DOCTYPE html>

<head>

<title>Listing 2-2</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Listing 2-2

Responsive Breakpoints Using Row Columns

Do you see how easy it is?

I keep the column divs having only the col class.
I use the two row column classes row-cols-3 and row-cols-lg-6 to tell how many columns I want according to the device width, in particular
- row-cols-3 for all devices except the ones defined with the following class. Note the number 3 is the number of columns we want to occupy.
- row-cols-lg-6 for all devices with large or wider displays, that is, >=992px.

If you save your page and reload on your browser, you will see the following for a page that has width 991px, for example (Figure 2-2).

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig2_HTML.jpg — Figure 2-2
Three Columns When Below 992px

When you enlarge the width by 1 pixel more, to 992px, then you will immediately get six columns (Figure 2-3).

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig3_HTML.jpg — Figure 2-3
Six Columns for 992px and Wider

In Table 2-1, I compare the first solution with the col-* classes at the column level with the latest solution you just learned with the row-cols-* classes at the row level.

Table 2-1

Compare Code Between col-* and row-cols-*

col-* at Column Level	row-cols-* at Row Level
<div class="row"> <div class="col-4 col-lg-2"> 1 </div> <div class="col-4 col-lg-2"> 2 </div> <div class="col-4 col-lg-2"> 3 </div> <div class="col-4 col-lg-2"> 4 </div> <div class="col-4 col-lg-2"> 5 </div> <div class="col-4 col-lg-2"> 6 </div> </div>	<div class="row row-cols-3 row-cols-lg-6"> <div class="col"> 1 </div> <div class="col"> 2 </div> <div class="col"> 3 </div> <div class="col"> 4 </div> <div class="col"> 5 </div> <div class="col"> 6 </div> </div>

col-* at Column Level

row-cols-* at Row Level

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

I repeat so that it’s crystal clear:

1.
When I use classes to specify the column width at the column div level, I specify the number of columns (out of the 12) my column will occupy. For example, if I want my column to be three columns wide, I use col-3.
2.
When I use classes at the row div level, I just specify the number of columns I want in the row. Then Bootstrap will automatically calculate the width of each column.
3.
Obviously, when I use row classes, I set the width for all the columns of the row to an equal size. If I want to have columns with different widths within the same row, I have to use the column classes at the column-level div.

Vertical Alignment

You have learned how to lay out things using a 12-column-wide grid, but Bootstrap allows you to align things inside the row itself, in the vertical axis.

Middle Alignment

How would you put your content in the middle of a tall row like it is depicted in Figure 2-4?

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig4_HTML.jpg — Figure 2-4
Content in the Middle of a Tall Row

In the preceding picture, you can see the content of the row, which, in fact, is composed of three columns, to be placed in the center of the vertical axis. In Listing 2-3, you can see how you can create this page.

<!DOCTYPE html>

<head>

<title>Listing 2-3</title>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

Listing 2-3

Content in the Middle of a Tall Row

The difference is done by the class align-items-center at the row div. It instructs the browser to draw the columns that are children of this div at the center position of the row on the vertical axis.

Before you save and load this page on your browser though, you will have to give your row some minimum height; otherwise, you will not see any difference. Use Listing 2-4 for your index.css file.

.row {

background-color: #4e9013;

color: white;

min-height: 200px;

}

.col {

background-color: #31907c;

}

Listing 2-4

CSS File That Gives the Row a Minimum Height

The preceding CSS has the rule to apply min-height on the row divs. This will allow you to see the contents of the children divs in the center of the row on the vertical axis direction.

Top and Bottom Alignment

There are also two other classes that you can apply at the row div level and that have to do with vertical alignment: align-items-start and align-items-end . Let’s use these to create the page depicted in Figure 2-5.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig5_HTML.jpg — Figure 2-5
Use Various Vertical Alignments

As you can see, the middle and bottom rows have alignments center and end, respectively. I am pretty sure that you write the HTML without my help, but let’s include here the code for completeness (Listing 2-5).

<!DOCTYPE html>

<head>

<title>Listing 2-5</title>

</head>

<body>

1-start

</div>

2-start

</div>

3-start

</div>

1-center

</div>

2-center

</div>

3-center

</div>

1-end

</div>

2-end

</div>

3-end

</div>

</body>

</html>

Listing 2-5

Align Top, Middle, and Bottom

Don’t forget to make your index.css have rules that will make your rows have minimum height so that you can see the vertical alignment. Listing 2-6 contains such rules.

.row {

min-height: 200px;

margin-bottom: 30px;

color: white;

}

.align-items-start {

background-color: #4e9013;

}

.align-items-center {

background-color: #902e07;

}

.align-items-end {

background-color: #8DC5CC;

}

.col {

background-color: #367390;

}

Listing 2-6

index.css File That Gives Rows Minimum Height

Different Vertical Alignments Within the Same Row

Finally, sometimes you want the columns within the same row to have different vertical alignments. Figure 2-6 is an example of such a page.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig6_HTML.jpg — Figure 2-6
Use Different Vertical Alignments Within the Same Row

In order to achieve this, I use some special classes at the col level. Here is the HTML code for the preceding page (Listing 2-7).

<!DOCTYPE html>

<head>

<title>Listing 2-7</title>

</head>

<body>

1-self-start

</div>

2-self-center

</div>

3-self-end

</div>

</body>

</html>

Listing 2-7

Different Vertical Alignments Within the Same Row

Use the following index.css (Listing 2-8) in order to style the preceding HTML content so that you can get the result presented in Figure 2-6.

.row {

background-color: #4e9013;

min-height: 200px;

margin-bottom: 30px;

color: white;

}

.align-self-start {

background-color: #441180;

}

.align-self-center {

background-color: #8DC5CC;

}

.align-self-end {

background-color: #902e07;

}

Listing 2-8

CSS for Listing 2-7

Less Than 12 and Horizontal Alignment

I continue by explaining to you how you can align columns in the horizontal direction, which is more useful when you have content that does not occupy the whole width of the page.

Left Alignment

Until now, your rows had content left to right. They occupied the whole container width. There are cases in which you want to have part of the width occupied. For example, you want to have content on the first two columns and the rest of the horizontal space to be empty. Look at the following example in Figure 2-7.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig7_HTML.jpg — Figure 2-7
Left-Aligned Columns

As you can see in Figure 2-7, the second and third rows have columns that occupy the left side of the grid. The second row occupies the first two columns, and the third row occupies the first three columns. How can you achieve this? The HTML code is given in Listing 2-9.

<!DOCTYPE html>

<head>

<title>Listing 2-9</title>

</head>

<body>

</div>

2-columns-width

</div>

3-columns-width

</div>

</body>

</html>

Listing 2-9

Left-Aligned Columns

Before loading the preceding HTML into your browser, make sure that you have correct CSS rules inside your index.css file, something like that in Listing 2-10.

* {

color: white;

}

.row {

background-color: black;

}

.row-1 .col {

background-color: #902e07;

}

.row-2 .col {

background-color: #31907c;

}

Listing 2-10

CSS for Listing 2-9

In Listing 2-9, the class justify-content-start is attached on the second and third row divs.

Center and Right Alignment

But this, in fact , was not very useful. The same would have been accomplished even if you didn’t have this class attached to the row divs. Things are getting more interesting when you use the corresponding *-center and *-end classes like in Listing 2-11.

<!DOCTYPE html>

<head>

<title>Listing 2-11</title>

</head>

<body>

</div>

2-columns-width

</div>

3-columns-width

</div>

</body>

</html>

Listing 2-11

Use *-center and *-end Classes

Save the preceding page and load it on your browser. You will see something like what is depicted in Figure 2-8.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig8_HTML.jpg — Figure 2-8
Center and Right Alignment

Hence, these justify-content-* classes at the row divs are useful, because they allow you to align without having to use empty divs.

Space Between

What if you had three content columns that you wanted horizontally aligned in such a way that they had equal space between them? Figure 2-9 has an example of such a case.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig9_HTML.jpg — Figure 2-9
Columns with Space Between

The class that you have to use in order to achieve is the justify-content-between. The HTML code is given in Listing 2-12.

<!DOCTYPE html>

<head>

<title>Listing 2-12</title>

</head>

<body>

</div>

2-columns, left

</div>

2-columns, middle

</div>

2-columns, right

</div>

</body>

</html>

Listing 2-12

Using justify-content-between

Space Around

Finally, sometimes you want the space to be around your content. See an example in Figure 2-10.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig10_HTML.jpg — Figure 2-10
Content with Space Around

In order to achieve this, you need to use the class justify-content-around . Attach it at the row div level, as in Listing 2-13.

<!DOCTYPE html>

<head>

<title>Listing 2-13</title>

</head>

<body>

</div>

2-columns, left

</div>

2-columns, middle

</div>

2-columns, right

</div>

</body>

</html>

Listing 2-13

Content with Space Around

Load the preceding code using an index.css file like the one given in Listing 2-14.

* {

color: white;

}

.row {

background-color: darkblue;

}

.col-2:nth-child(1) {

background-color: #902e07;

}

.col-2:nth-child(2) {

background-color: #31907c;

}

.col-2:nth-child(3) {

background-color: #89906b;

}

Listing 2-14

CSS Content for Listing 2-13

Nesting

I will close this first encounter with Twitter Bootstrap by giving some advice on how you should nest a grid within another.

Nesting a grid within another is allowed and follows the same rules that apply to the root grid. How would you do it? You have to use a row div and child col divs inside the parent col div.

Figure 2-11 shows an example of a grid inside another.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig11_HTML.jpg — Figure 2-11
Nested Grid Inside Another

And let’s see the HTML code for this page (Listing 2-15).

<!DOCTYPE html>

<head>

<title>Listing 2-15</title>

</head>

<body>

</div>

1-nested

</div>

2-nested

</div>

3-nested

</div>

4-nested

</div>

5-nested

</div>

6-nested

</div>

4-columns

</div>

2-columns

</div>

</body>

</html>

Listing 2-15

Nested Grid Inside Another

As you can see from the preceding code, inside the row div with class parent, I have a col div (with class col-6). This latter div has another row inside it (with class nested) that starts the nested grid.

The classes parent and nested are not Twitter Bootstrap classes. They are my custom CSS classes that help style the page with rules that exist inside index.css (Listing 2-16).

* {

color: white;

}

.row {

background-color: darkblue;

}

.row.parent {

background-color: #367390;

}

.row.nested {

background-color: #31907c;

}

Listing 2-16

index.css for Listing 2-15

Look how the nested row div uses the row-cols-* classes to specify the number of columns on different breakpoints. For example, if you shrink your browser window to 780px, which is a medium-size device, you will see the nested grid having a three-column layout, due to the class row-cols-3. See Figure 2-12.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig12_HTML.jpg — Figure 2-12
Nested Grid Has Three Columns on Medium Devices

Twitter Bootstrap Defaults

Before I close this chapter, I would like to quickly walk you through the most important defaults (Table 2-2) that one takes by including Twitter Bootstrap and compare them to the defaults without it.

Table 2-2

Twitter Bootstrap Default vs. Browser Defaults

	Twitter Bootstrap	Without Twitter Bootstrap
html element box-sizing	border-box	content-box
html element font-family	sans-serif	Times
html element font-size	16px	16px
body element font-family	-apple-system,BlinkMacSystemFont,“Segoe UI”,Roboto,“Helvetica Neue”,Arial,“Noto Sans”,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol”,“Noto Color Emoji”	Times
body element font-size	16px	16px
body element line-height	24px	normal
body element color	#212529	#000
body element background-color	#fff	rgba(0,0,0,0); hence transparent
body element box-sizing	border-box	content-box
body element margin	0	8px

You can read more about the Twitter Bootstrap defaults if you download Twitter Bootstrap, locally on your computer. You can do that by visiting https://getbootstrap.com/docs/4.4/getting-started/download/ and then clicking the button Download. This will download, among the others, ready CSS non-minified code (look for file css/bootstrap.css).

Tasks and Quizzes

Task Details

1.
You need to implement a page that contains an image roster.
2.
You need to use Twitter Bootstrap tools to make it responsive.
3.
Here is how the page should look (Figure 2-13) on extralarge displays (>=1200px).

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig13_HTML.jpg — Figure 2-13
Task: Responsive Image Roster Page

As you can see, it has six images evenly positioned on the page.

4.
The page should look like Figure 2-14 on medium (>=768px) and large (<1200px) devices.

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig14_HTML.jpg — Figure 2-14
How the Page Should Look on Medium and Large Devices

As you can see in Figure 2-14, now, the images are arranged so that each row has three images. Hence, all the images are displayed in two rows.

5.
The page should look like Figure 2-15 on small and extrasmall devices (<768px).

../images/497763_1_En_2_Chapter/497763_1_En_2_Fig15_HTML.png — Figure 2-15
Page on Small and Extrasmall Devices

As you can see in Figure 2-15, now each image is displayed on its own row.

6.
The header is an h1 element.
7.
The img tags should be styled with width and height 100% so that they occupy all the space they are given.

Good luck!

Key Takeaways

Here is a list of the key things you learned:

How to achieve vertical alignment
How to achieve horizontal alignment
How to nest a grid inside another

In the following chapter, you will learn Bootstrap by implementing a real project. It will have a responsive navigation bar that will change its appearance according to the width of the display.

P. MatsinopoulosPractical Bootstraphttps://doi.org/10.1007/978-1-4842-6071-5_3

3. Target Project 1

Panos Matsinopoulos¹

(1)

KERATEA, Greece

In the previous chapter, you have learned about the Twitter Bootstrap grid system. In this chapter, you will develop a web page that has a navigation bar fixed at the top as seen in Figure 3-1.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig1_HTML.jpg — Figure 3-1
Basic Template with a Top Nav Bar

This navigation bar is responsive, which means it can be equally displayed on small-display devices. In those cases, the menu is hidden behind a hamburger icon (Figure 3-2).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig2_HTML.jpg — Figure 3-2
This Is How a Site Looks on Mobile Devices

When the user clicks the hamburger icon, the menu is unfolded, like the following (Figure 3-3).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig3_HTML.jpg — Figure 3-3
Menu Options Appear on Hamburger Icon Click

You will develop this web page, but at the same time, you will understand how the Twitter Bootstrap classes work.

Learning Goals

1.
Learn to build a navigation bar for your site, step by step.
2.
Make the navigation bar responsive.
3.
Learn how to create a button with the shape of a hamburger and how to make it unfold the menu options.
4.
Learn how to make the content of a paragraph stand out.
5.
Learn about how to make your main content area not be hidden by the navigation bar.

Introduction

This and the following chapters will be teaching you the framework concepts while trying to create a project at the same time. Let’s start, then, with our first project.

Assume that we want to build the following website in Figure 3-4.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig4_HTML.jpg — Figure 3-4
Target Project 1—Basic Template with a Top Nav Bar

This project has the following characteristics:

1.
It has a navigation bar. This navigation bar is responsive. This means that when you resize your browser to mimic the size of a mobile phone, you will see something like Figure 3-5.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig5_HTML.jpg — Figure 3-5
This Is How a Site Looks Like on Mobile Devices

As you can see, the menu options have been collapsed and turned to a hamburger icon. If the user wants to get the list of menu options, they need to click this icon (Figure 3-6).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig6_HTML.jpg — Figure 3-6
Menu Options Appear on Hamburger Icon Click

There are other features on this website that you take for free from Twitter Bootstrap. For example, when you mouse over the options, you will see that the options change color and intensity.

Let’s try to build this website from scratch, using Twitter Bootstrap.

Start with HTML

Let’s start with the basic HTML that includes a nav bar and a list of items that will be the menu options, like the following (Listing 3-1).

<!DOCTYPE html>

<head>

<title>Listing 3-1</title>

</head>

<body>

<nav>

<ul>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</body>

</html>

Listing 3-1

Starting with a nav Element and List of Menu Items

Save the preceding code into the file index.html and load the page on your browser. Note that the referenced stylesheets/main.css does not contain anything, for the time being. But create this file so that your page can find it.

You will see the following (Figure 3-7).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig7_HTML.jpg — Figure 3-7
Page with a Nav Bar and Menu Items but Not Styled

I guess that this was expected. The body element contained nothing but a block element nav and a ul with the menu options. Note that we are using the semantic HTML5 element nav, instead of just a div.

The Class nav

You will first add the class nav on the ul element that holds the menu options. This will remove the bullets from the list. Do the following change. Instead of <ul>, write <ul class="nav">. Save the file and reload the page. You will see the following (Figure 3-8).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig8_HTML.jpg — Figure 3-8
Added the Class nav on the ul Element

The Navigation Items and Navigation Links

Let’s now make the menu items have some space around them, because, now, they are one exactly next to the other.

In order to achieve this, you will add the class nav-item on the li elements and the class nav-link on the anchor a elements. Read Listing 3-2 to see how the current state of your HTML page should be.

<!DOCTYPE html>

<head>

<title>Listing 3-2</title>

</head>

<body>

<nav>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</nav>

</body>

</html>

Listing 3-2

Menu Items on the Same Line, One Separate from the Other

If you load the preceding page on your browser, you will see the following (Figure 3-9).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig9_HTML.jpg — Figure 3-9
Menu Items Separated

Collapse and Expand

In order for the list of menu items to be collapsible, that is, to be replaced with a hamburger icon on small devices, which, when clicked, would enlist the menu options, you need to add a special class on the nav element, and you need to wrap the collapsible/expandable content into a div with special classes, like in Listing 3-3.

<!DOCTYPE html>

<head>

<title>Listing 3-3</title>

</head>

<body>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-3

Make Menu Options Collapse and Expand

What you have done in order to make the menu options collapse and expand is the following:

1.
You have added the class navbar-expand-lg on the nav element. This instructs the browser to expand the content at the lg breakpoint, that is, for displays greater than or equal to 992px. Apparently, you could have used another breakpoint, for example, the md breakpoint, if you wanted the menu to expand for displays with width >=768px.
2.
You have wrapped the ul element into a div element with classes collapse and navbar-collapse. This makes the browser know which content it needs to collapse and expand.

If you load the new HTML content into your browser and set the pixel width to 991px, then you will see a blank page like the following (Figure 3-10).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig10_HTML.jpg — Figure 3-10
A Blank Page on Width Less Than 992px

But, if you expand to 992px, then you will see the menu options appearing back again (Figure 3-11).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig11_HTML.jpg — Figure 3-11
Menu Options Appear on 992px

The Brand link

If you go back and look again at the final result, you will see that there is the link with text John Woo, which is not hidden when the page shrinks to mobile size. It is always visible, and it is supposed to be a link that would take the user to the home page of the site. It is not part of the list of menu items.

Let’s put that above the collapsible div, but still inside the nav element (Listing 3-4).

<!DOCTYPE html>

<head>

<title>Listing 3-4</title>

</head>

<body>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-4

Add the Link That Would Take the User to the Home Page

If you save the preceding code and reload your page, you will see the John Woo link on the left, which, if you shrink the page, remains visible and does not disappear like the menu options do (Figure 3-12).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig12_HTML.jpg — Figure 3-12
Brand Link Is Separate from Menu Options

Make the Brand Link Stand Out

The brand link, on the top left , needs to be on the same level as the menu; and it needs to stand out a little bit. Let’s do that by

1.
Adding the class navbar to the nav wrapping element
2.
Adding the class navbar-brand to the anchor element

Caution

The navbar class on the nav wrapping element is crucial for the whole styling of the navigation bar, not only for the brand link.

Listing 3-5 is what you need to have in your HTML page in order to make this work.

<!DOCTYPE html>

<head>

<title>Listing 3-5</title>

</head>

<body>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-5

Brand Link on the Same Line and Standing Out

If you load the preceding HTML page on your browser, you will see what is depicted in Figure 3-13.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig13_HTML.jpg — Figure 3-13
Brand Link Standing Out on the Left

Add Some Color to Your Nav Bar

Let’s add some color to your nav bar. In order to do that, you have to

1.
Use one of the navbar-dark or navbar-light classes at the nav element.
2.
Combine it with a background color utility class.

The former is basically dealing with the font colors, whereas the latter is dealing with the background colors. Usually you would like to combine the *-dark class with the dark background colors and the *-light class with the light background colors.

The background color utilities are listed in Figure 3-14.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig14_HTML.jpg — Figure 3-14
Background Color Utility Classes

Caution

The color classes, navbar-dark and navbar-light, have been designed to expect the ul element to have the class navbar-nav. So we are going to add that too.

In Listing 3-6, we are applying the bg-dark background color utility class, combined with the navbar-dark color scheme for the navigation bar. We also add the class navbar-nav to the ul element.

<!DOCTYPE html>

<head>

<title>Listing 3-6</title>

</head>

<body>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-6

Coloring the Navigation Bar

If you load the preceding HTML page on your browser, you will see what is depicted in Figure 3-15.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig15_HTML.jpg — Figure 3-15
Coloring the Navigation Bar

Also, hover your mouse pointer over the menu options. You will see how the links are getting lighter.

Adding the Button to Unfold Menu Options on Small Devices

Let’s add a button. This will be clicked to unfold the menu options on small devices. See Listing 3-7.

<!DOCTYPE html>

<head>

<title>Listing 3-7</title>

</head>

<body>

</button>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-7

Add a Button That Will Toggle the Menu On and Off on Small Devices

You have added the button as a sibling of the brand anchor, but after it. If you load this HTML page on your browser, you will see the following (Figure 3-16).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig16_HTML.jpg — Figure 3-16
Unstyled Button to Toggle the Menu On and Off

This is pretty bad. Indeed. But it’s a start.

Making the Button Appear Only on Small Devices

The problem you have with the button, at the moment, is that it always appears. What you want is that it appears only on devices with width below the expanded breakpoint that you have set on the nav element. The breakpoint that you have set is lg, which means that you want the button to appear for displays with width <992px.

In order to do that, you can add the class navbar-toggler. Let’s do that. See Listing 3-8.

<!DOCTYPE html>

<head>

<title>Listing 3-8</title>

</head>

<body>

</button>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-8

Make the Button Appear Only on Widths Below the Expanded Breakpoint

Now, when you have a display >=992px, the button does not appear (Figure 3-17).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig17_HTML.jpg — Figure 3-17
Menu Is Visible; Button to Toggle Is Not Visible (>=992px)

When you shrink by 1 pixel, to 991px, then you will see the menu disappearing and the button appearing (Figure 3-18).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig18_HTML.jpg — Figure 3-18
Menu Hidden, but Button Present (<992px)

The button appears in a way that is very hard to see. This is fixed next.

Creating the Hamburger Icon

The button does not look good on small devices, and this is because it does not have actual content inside. In order to create the visual icon of the hamburger, Twitter Bootstrap gives you the class navbar-toggler-icon. You need to apply that on a span element inside the button element. See Listing 3-9.

<!DOCTYPE html>

<head>

<title>Listing 3-9</title>

</head>

<body>

</button>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-9

Creating the Hamburger Icon

If you load the preceding HTML page on a display with 991px width, you will see the following (Figure 3-19).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig19_HTML.jpg — Figure 3-19
Hamburger Icon Now Present

Adding Behavior to the Button

If you try to click the hamburger button, nothing happens. You now need to add behavior to the button. When the button is clicked, the menu options unfold. You will do that by adding two data-* attributes to the button element:

data-toggle="collapse", which tells Twitter Bootstrap that this button is used to collapse/unfold a specific area of the HTML document
data-target="#navbar", which tells Twitter Bootstrap that the specific area that needs to be collapsed/unfolded is the one that is selected with the CSS selector #navbar. Of course, since there is no such element (with id navbar) in your HTML document, but the element that you want to fold/unfold is the container that holds the menu items list, you will add the id attribute with value navbar to this particular div. Let’s do that (Listing 3-10).

<!DOCTYPE html>

<head>

<title>Listing 3-10</title>

</head>

<body>

</button>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-10

Make the Button Toggle the Menu

If you save the preceding content and load the page on your browser, you will now see that the button toggles the menu on and off. In Figure 3-20, I display how it looks like with the menu expanded.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig20_HTML.jpg — Figure 3-20
Menu Expanded After Clicking the Button

Final Touches to Our Navigation Bar

fixed-top on nav element will fix the position of the navigation bar at the top of the page.
You will also add some elements and attributes to make the whole navigation bar ready to be used with assistive technologies, for example, with screen readers.
You will also add the class active to the first menu item, to indicate that you are on the page that this link corresponds to.

Here is the final version of your page with the navigation bar ready (Listing 3-11).

<!DOCTYPE html>

<head>

<title>Listing 3-11</title>

</head>

<body>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 3-11

Final HTML Page

If you save the preceding content and load the page on a display of 992px width, you will see Figure 3-21.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig21_HTML.jpg — Figure 3-21
Final Page with a Navigation Bar on 992px

Your navigation bar works perfectly, and you have not written a single line of CSS or JavaScript code. Isn’t it amazing? All thanks to Twitter Bootstrap.

Adding the Main Content

You have added/created the navigation bar. Let’s now add the main content of your page (Listing 3-12).

<!DOCTYPE html>

<head>

<title>Listing 3-12</title>

</head>

<body>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

<h1>John Woo Portfolio</h1>

<p>Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications</p>

</div>

</body>

</html>

Listing 3-12

We Add the Main Content

You have added a div with the class container below the nav element. Inside this new div, you have added an h1 and a p element with some content inside them.

Let’s save the content and load the page on the browser. You will see the following (Figure 3-22).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig22_HTML.jpg — Figure 3-22
Main Content Hidden Behind the Top Nav Bar

You can see the problem, I guess. The h1 header is hidden behind the top navigation bar.

In order to resolve this, we will have to add some custom CSS. You will have to ask the body to position its actual content so many pixels below the top, as the height of the navigation bar. Figure 3-23 is depicting how you can find out the height of the top navigation bar, with the help of the developer tools.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig23_HTML.jpg — Figure 3-23
Calculate the Height of the Top Navigation Bar

As you can see from the developer tools, the height of the top navigation bar is 56px, calculated by adding the top and bottom paddings and content height.

With 56px at hand, let’s add some content inside the stylesheets/main.css file (Listing 3-13).

body {

padding-top: 56px;

}

Listing 3-13

Content of the main.css File

Now, if you load your page again (make sure that it references the stylesheets/main.css), it will look like the following (Figure 3-24).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig24_HTML.jpg — Figure 3-24
h1 Is Now Visible

Making the Paragraph Content Stand Out

There are some small differences to the original site. One is that the paragraph content is plain, normal-size text. You want to make it stand out . You will use the class lead for that (again provided to us by Twitter Bootstrap).

Make the p element have that class (Listing 3-14).

<!DOCTYPE html>

<head>

<title>Listing 3-14</title>

</head>

<body>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

<h1>John Woo Portfolio</h1>

<p class="lead">Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications</p>

</div>

</body>

</html>

Listing 3-14

Make the Paragraph Stand Out

If you save and load your page again, you will see Figure 3-25.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig25_HTML.jpg — Figure 3-25
Paragraph Stands Out

Aligning Nav Bar Content with Page Main Content

So far, so good, but there is one more thing to fix. The content of the nav bar is not aligned with the main content of the page. See the problem in Figure 3-26.

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig26_HTML.jpg — Figure 3-26
Nav Bar Content Misaligned with Page Main Content

You can fix this by wrapping the nav bar content into a div with class container, like you have done with the main content of the page (Listing 3-15).

<!DOCTYPE html>

<head>

<title>Listing 3-15</title>

</head>

<body>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

<h1>John Woo Portfolio</h1>

<p class="lead">Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications</p>

</div>

</body>

</html>

Listing 3-15

Wrap Nav Bar Content into a Container

If you save and load this page on your browser, you will see the following (Figure 3-27).

../images/497763_1_En_3_Chapter/497763_1_En_3_Fig27_HTML.jpg — Figure 3-27
Nav Bar Content Aligned with Page Main Content

Well done! This matches the original page that you wanted to build.

Closing Notes

You have created a website with a responsive navigation bar, without writing any single piece of CSS code. Twitter Bootstrap has provided everything to you. You only had to use the correct classes (and in one case, two data-* attributes).

Tasks and Quizzes

TASK DETAILS

1.
You need to implement a web page with a responsive navigation bar, like the following (Figure 3-28).
Figure 3-28
Task Project with a Navigation Bar

2.
Watch out for the following:
1. 1.
  The main content should be centered.
2. 2.
  There is a lot of blank space above the main content and below the navigation bar. Make sure that you have the same on your page.
3. 3.
  The navigation bar should be responsive, and when you load your page on small displays, the menu items should be hidden. In their place, a hamburger icon should be displayed. The icon, when clicked, will unfold the list with the menu options.

Good luck!

Key Takeaways

Congratulations! You now know how to implement a responsive navigation bar. Here is a list of the key things you learned:

How to implement a navigation bar with menu options that are hidden on small devices and visible on large devices.
For small devices, you have implemented a button that when clicked toggles on/off the menu with the options.
You have also learned how to color the navigation bar and how to position it.
You have learned how to put content on the main page without it being hidden by the top navigation bar.
You have learned how to make a paragraph stand out.

In the following chapter, you are going to get acquainted with the most popular Twitter Bootstrap components, like buttons, badges, tabs, and so on.

P. MatsinopoulosPractical Bootstraphttps://doi.org/10.1007/978-1-4842-6071-5_4

4. Theme Reference: Part 1

Panos Matsinopoulos¹

(1)

KERATEA, Greece

In the previous chapter, you have created a small Twitter Bootstrap project. Now, you are going to create a page that would reference some of the most commonly used Twitter Bootstrap components.

In the first part of this Theme Reference project, you will learn how to create dropdown menus in the navigation bar (Figure 4-1).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig1_HTML.jpg — Figure 4-1
Dropdown Menu in the Navigation Bar

You will learn how to create standout text areas, called jumbotrons (Figure 4-2).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig2_HTML.jpg — Figure 4-2
Jumbotron Example

You will learn how to quickly create nice-looking buttons, like the following (Figure 4-3)

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig3_HTML.jpg — Figure 4-3
Button Example

and tables as in Figure 4-4.

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig4_HTML.jpg — Figure 4-4
Table Example

You will also learn how to create nice-looking labels and tags (Figure 4-5)

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig5_HTML.jpg — Figure 4-5
Label Example

and badges (Figure 4-6).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig6_HTML.jpg — Figure 4-6
Badge Example

In the second part of the Theme Reference project, you will learn how to group information under tabs (Figure 4-7).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig7_HTML.jpg — Figure 4-7
Tabs Example

You will learn how to create alerts (Figure 4-8)

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig8_HTML.jpg — Figure 4-8
Alert Example

and nice-looking progress bars (Figure 4-9).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig9_HTML.jpg — Figure 4-9
Progress Bar Example

You will learn how to create cards, with standout heading and separate body (Figure 4-10).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig10_HTML.jpg — Figure 4-10
Card Example

And finally, you will learn how to create the impressive image carousels.

At the end of the second part, you will be asked to create a page that will require you to use most of the preceding components (Figure 4-11).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig11_HTML.jpg — Figure 4-11
Twitter Bootstrap Example Page with Various Elements

Learning Goals

This is the list of things you will learn in the first part:

1.
Learn how to add a dropdown menu in the navigation bar.
2.
Learn about the various dropdown menu components and classes.
3.
Learn about jumbotrons.
4.
Learn about page headers.
5.
Learn about styling buttons.
6.
Learn about how to style tables.
7.
Learn how you can create labels and tags.

Introduction

You continue working on Twitter Bootstrap projects, and you will now build a project that will work as your reference to various Twitter Bootstrap components.

Let’s start.

Basic Bootstrap Page with a Navigation Bar

You start with the basic Bootstrap page with a navigation bar, like the one we built in the previous chapter. See Listing 4-1.

<!DOCTYPE html>

<head>

<title>Twitter Bootstrap Reference Page</title>

</head>

<body>

<a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 4-1

Start with a Navigation Bar

Make sure that you have your stylesheets/main.css file containing the necessary body padding that will allow the main content of the page to be displayed below the navigation bar (Listing 4-2).

body {

padding-top: 56px;

}

Listing 4-2

stylesheets/main.css for Listing 4-1

If you save the preceding content and load the page on your browser, you will see the following (Figure 4-12).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig12_HTML.jpg — Figure 4-12
Starting Page

Adding a Dropdown Menu

You will now learn how you can add a dropdown menu, like the following (Figure 4-13).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig13_HTML.jpg — Figure 4-13
Page with a Dropdown Menu

This is very easy. One has to add an extra li item to the list of menu items. This new li item needs to have another list included that will be the list of options inside the dropdown menu, like the following (Listing 4-3).

<!DOCTYPE html>

<head>

<title>Twitter Bootstrap Reference Page</title>

</head>

<body>

<a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

<li class="nav-item dropdown">

<a href="#"

class="nav-link dropdown-toggle"

data-toggle="dropdown">

Dropdown <span class="caret"></span>

</a>

<div class="dropdown-menu">

<a href="#" class="dropdown-item">Action</a>

<a href="#" class="dropdown-item">Another action</a>

<a href="#" class="dropdown-item">Something else here</a>

<div class="dropdown-divider"></div>

<div class="dropdown-header">Nav header</div>

<a href="#" class="dropdown-item">Separated link</a>

<a href="#" class="dropdown-item">One more separated link</a>

</div>

</li>

</ul>

</div>

</nav>

</body>

</html>

Listing 4-3

Dropdown Menu in the Navigation Bar

If you save the preceding code and load the page on your browser, you will see the new dropdown menu on the far right.

Let’s give some notes about the code that has been used to build that dropdown menu (Listing 4-4).

<a href="#"

class="nav-link dropdown-toggle"

data-toggle="dropdown">

Dropdown

</a>

<a href="#" class="dropdown-item">Action</a>

<a href="#" class="dropdown-item">Another action</a>

<a href="#" class="dropdown-item">Something else here</a>

<div class="dropdown-divider"></div>

<div class="dropdown-header">Nav header</div>

<a href="#" class="dropdown-item">Separated link</a>

<a href="#" class="dropdown-item">One more separated link</a>

</div>

</li>

Listing 4-4

Looking into the Details of the Dropdown Menu

1.
The list item (li) that will work as a dropdown menu needs to have the class dropdown.
2.
The dropdown list item text, in our case Dropdown, needs to be wrapped into an anchor <a> HTML element. This will make the pointer change, when the user hovers over it. Note that the anchor needs to have the class dropdown-toggle and the data-toggle attribute equal to dropdown.
3.
The list of options of the dropdown menu can be given inside a div.
4.
The div needs to have the class dropdown-menu .
5.
Each menu option is given with an anchor a that has the class dropdown-item.
6.
You can use a special, empty div with the class divider if you want to create a line in between menu items that would function as a divider.
7.
You can also use another special div that would function as a submenu header and will not actually be part of the user options, that is, wouldn’t be possible to click and select. This can be done if the div has the class dropdown-header.

Jumbotron

Twitter Bootstrap allows you to create jumbotrons, big areas that display a message, a header, or both with a very big font size. Let’s do that:

1.
After the nav, you are creating a .container div to include the content of your page.
2.
The first thing that you create is a div with class .jumbotron.

Let’s see Listing 4-5 that has your page with the jumbotron in.

<!DOCTYPE html>

<head>

<title>Twitter Bootstrap Reference Page</title>

</head>

<body>

<a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

<a href="#"

class="nav-link dropdown-toggle"

data-toggle="dropdown">

Dropdown

</a>

<a href="#" class="dropdown-item">Action</a>

<a href="#" class="dropdown-item">Another action</a>

<a href="#" class="dropdown-item">Something else here</a>

<div class="dropdown-header">Nav header</div>

<a href="#" class="dropdown-item">Separated link</a>

<a href="#" class="dropdown-item">One more separated link</a>

</div>

</li>

</ul>

</div>

</nav>

<h1>Jumbotron</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

</body>

</html>

Listing 4-5

Page with Jumbotron

Before you save and load this page on your browser, make sure that your stylesheets/main.css file has the following content (Listing 4-6).

body {

padding-top: 70px;

padding-bottom: 70px;

}

Listing 4-6

CSS File for Listing 4-5

If you do that and save your page, you will see the following on your browser (Figure 4-14).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig14_HTML.jpg — Figure 4-14
Jumbotron with Header and Lead Paragraph

Note that the space between the bottom side of the navigation bar and the top side of the jumbotron is created by the padding-top rule inside the main.css file.

The approach here is very simple. We use the class jumbotron for the div. We also use the header h1 for the header text inside the jumbotron.

Finally, we have already seen, in the previous chapter, the class lead that is applied on the p element to make the text stand out.

Headers with Horizontal Lines: Page Headers

There are times that you want to create a header, that is, a piece of text that stands out like a header, for example, h1 or h2, and below that a horizontal line.

You can quickly do that with the help of an hr element below your h1 element. Add the following as the last element inside the main content container (Listing 4-7).

<h1>Page Header</h1>

Listing 4-7

How to Have a Header with a Horizontal Line Below It

If you save this and reload your page, you should have something like the following (Figure 4-15).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig15_HTML.jpg — Figure 4-15
Page Header with Horizontal Line

You have used the hr element with the class my-4. What’s the deal with this class? This is one of the classes that Bootstrap calls utility classes. This particular one belongs to the spacing category, which has to do with margins and paddings for the element it is attached to. In particular

The prefix m stands for margin. Hence, in your example, you are applying some margin to the hr element.
The y refers to the vertical y-axis. Essentially, it is about the top and bottom sides of the element. Hence, in your example, you are applying some top and bottom margins to the hr element.
The number 4 is the size. The sizes can be one
- 0: Which sets the size of the margin or padding to 0
- 1: Which sets the size to 0.25 times the $spacer size ($spacer * 0.25)
- 2: Which sets the size to 0.5 times the $spacer size ($spacer * 0.5)
- 3: Which sets the size equal to the $spacer size
- 4: Which sets the size to 1.5 times the $spacer size ($spacer * 1.5)
- 5: Which sets the size to 3 times the $spacer size ($spacer * 3)
- Auto: Which automatically sets the size (applies to margins only)

OK! Hold on! What is the $spacer? The $spacer is a Sass (Syntactically Awesome Style Sheets) variable. Note Bootstrap is written in Sass and then it is compiled to actual CSS. The default value of the $spacer variable is 1rem.

If this is too complicated, there is no other way to clarify it but to play and try things out. Also, your best friend is the developer tools of your browser.

For example, open the developer tools while you are on your jumbotron page and locate the element hr. See how the top and bottom margins have been set, thanks to the my-4 class attached to it (Figure 4-16).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig16_HTML.jpg — Figure 4-16
24px Margin Top and Bottom, Thanks to my-4

Why 24px? This is because the 4 on my-4 is interpreted as $spacer * 1.5, and because $spacer is 1rem, we finally get 1.5rem. You can also see that if you switch your developer tools’ selected tab to Styles, instead of Computed (Figure 4-17).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig17_HTML.jpg — Figure 4-17
my-4 Gives 1.5rem Top and Bottom Margins

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig18_HTML.jpg — Figure 4-18
The font-size of the Root Element Is 16px

And why is 1.5rem computed to be 24px? rem is a CSS unit that calculates the size of an element relative to the font-size of the root element of the page, that is, of the html element. If you inspect the font-size property of the html element using the developer tools, you will see that it has size equal to 16px (Figure 4-18).

Hence, 16px * 1.5 calculates to 24px.

Note

I did a small deviation to discuss CSS units and how they are used in an HTML document. This is not part of Twitter Bootstrap. You can learn more about HTML and CSS in my book Master HTML & CSS.

Buttons

You will now learn how you can create buttons:

1.
All buttons should have the class btn.
2.
Then, you can apply one class that deals with the color of the button:
1. 1.
  btn-default
2. 2.
  btn-primary
3. 3.
  btn-secondary
4. 4.
  btn-success
5. 5.
  btn-danger
6. 6.
  btn-warning
7. 7.
  btn-info
8. 8.
  btn-light
9. 9.
  btn-dark
3.
Instead of a color, you can also apply a class to turn a button into a link: btn-link.
4.
Or you can interpolate the *-outline-* word in the class name in order to style a transparent background color button with a border, for example, btn-outline-primary.
5.
Then you can specify the size of the button using a corresponding class:
1.
btn-lg for large buttons.
2.
Specify no class for normal-size buttons.
3.
btn-sm for small buttons.
4.
btn-block for blocks that span the whole available width.

Let’s see that in action. Listing 4-8 is the code that your page should now have.

<!DOCTYPE html>

<head>

<title>Twitter Bootstrap Reference Page</title>

</head>

<body>

<a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

<a href="#"

class="nav-link dropdown-toggle"

data-toggle="dropdown">

Dropdown

</a>

<a href="#" class="dropdown-item">Action</a>

<a href="#" class="dropdown-item">Another action</a>

<a href="#" class="dropdown-item">Something else here</a>

<div class="dropdown-header">Nav header</div>

<a href="#" class="dropdown-item">Separated link</a>

<a href="#" class="dropdown-item">One more separated link</a>

</div>

</li>

</ul>

</div>

</nav>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

<h1>Buttons</h1>

<h2>Small Sizes</h2>

<p>

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

<button type="button" class="btn btn-sm btn-secondary">btn btn-sm btn-secondary</button>

<button type="button" class="btn btn-sm btn-success">btn btn-sm btn-success</button>

<button type="button" class="btn btn-sm btn-danger">btn btn-sm btn-danger</button>

<button type="button" class="btn btn-sm btn-warning">btn btn-sm btn-warning</button>

<button type="button" class="btn btn-sm btn-light">btn btn-sm btn-light</button>

</p>

<h2>Normal Sizes</h2>

<p>

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

<button type="button" class="btn btn-secondary">btn btn-secondary</button>

<button type="button" class="btn btn-success">btn btn-success</button>

<button type="button" class="btn btn-danger">btn btn-danger</button>

<button type="button" class="btn btn-warning">btn btn-warning</button>

<button type="button" class="btn btn-light">btn btn-light</button>

</p>

<h2>Large Sizes</h2>

<p>

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

<button type="button" class="btn btn-lg btn-secondary">btn btn-lg btn-secondary</button>

<button type="button" class="btn btn-lg btn-success">btn btn-lg btn-success</button>

<button type="button" class="btn btn-lg btn-danger">btn btn-lg btn-danger</button>

<button type="button" class="btn btn-lg btn-warning">btn btn-lg btn-warning</button>

<button type="button" class="btn btn-lg btn-light">btn btn-lg btn-light</button>

</p>

<h2>Block Sizes</h2>

<p>

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

<button type="button" class="btn btn-block btn-secondary">btn btn-block btn-secondary</button>

<button type="button" class="btn btn-block btn-success">btn btn-block btn-success</button>

<button type="button" class="btn btn-block btn-danger">btn btn-block btn-danger</button>

<button type="button" class="btn btn-block btn-warning">btn btn-block btn-warning</button>

<button type="button" class="btn btn-block btn-info">btn btn-block btn-info</button>

<button type="button" class="btn btn-block btn-light">btn btn-block btn-light</button>

<button type="button" class="btn btn-block btn-dark">btn btn-block btn-dark</button>

<button type="button" class="btn btn-block btn-link">btn btn-block btn-link</button>

</p>

<h2>Outline buttons (Normal Sizes)</h2>

<p>

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

<button type="button" class="btn btn-outline-secondary">btn btn-outline-secondary</button>

<button type="button" class="btn btn-outline-success">btn btn-outline-success</button>

<button type="button" class="btn btn-outline-danger">btn btn-outline-danger</button>

<button type="button" class="btn btn-outline-warning">btn btn-outline-warning</button>

<button type="button" class="btn btn-outline-info">btn btn-outline-info</button>

<button type="button" class="btn btn-outline-light">btn btn-outline-light</button>

<button type="button" class="btn btn-outline-dark">btn btn-outline-dark</button>

<button type="button" class="btn btn-outline-link">btn btn-outline-link</button>

</p>

</div>

</body>

</html>

Listing 4-8

Page Demonstrating Buttons

As you can see in the preceding code, this is a series of header h2 and p elements that apply to all the combinations of classes I talked about earlier.

Save your file and reload the page on your browser. You will see something like the following (Figure 4-19).

../images/497763_1_En_4_Chapter/497763_1_En_4_Fig19_HTML.jpg — Figure 4-19
Page Demonstrating Buttons

On this page, you can see how each button is displayed, according to the Twitter Bootstrap button classes that you have applied. It is really impressive, because without a single line of CSS code, you have so much functionality for free. You only have to learn the various Twitter Bootstrap classes.

Tables

You have already learned about the tables and how they should be used to display tabular data (from my Master HTML & CSS book). Twitter Bootstrap comes with some useful classes on how to style tables. Let’s see how.

Basic Bootstrap Tables

Let’s start with a table that does not have any Twitter Bootstrap class applied. So it is only with its default style.

You continue appending content at the end of the main container. However, Listing 4-9 has the full HTML code.

<!DOCTYPE html>

<head>

<title>Twitter Bootstrap Reference Page</title>

</head>

<body>

<a class="navbar-brand" href="#">Bootstrap Ref. Page</a>

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar"

aria-controls="navbar"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

<a href="#"

class="nav-link dropdown-toggle"

data-toggle="dropdown">

Dropdown

</a>

<a href="#" class="dropdown-item">Action</a>

<a href="#" class="dropdown-item">Another action</a>

<a href="#" class="dropdown-item">Something else here</a>

<div class="dropdown-header">Nav header</div>

<a href="#" class="dropdown-item">Separated link</a>

<a href="#" class="dropdown-item">One more separated link</a>

</div>

</li>

</ul>

</div>

</nav>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

<h1>Buttons</h1>