Tag: Bootstrap

Bootstrap Lesson 5: Basic Bootstrap Helper Classes

Hello everybody,

Michael here, and today’s lesson is all about basic helper classes in Bootstrap. Well, in my previous lesson Bootstrap Lesson 4: Jumbotrons and Image Carousels I briefly mentioned Bootstrap helper classes when creating Jumbotrons. In this post, I want to spend some time explaining how the helper classes I mentioned in my previous post work.

What are Bootstrap helper classes exactly? Well, they’re the special classes in Bootstrap that allow you to set features such as color and padding, among other things. To better explain Bootstrap helper classes, I’ll use my examples from my previous post (the post linked above).

Padding and margin classes

Let’s start off by exploring Bootstrap padding classes. But before we do that, let’s take a look at this code from my previous post used to create a basic Bootstrap Jumbotron:

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-black">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll</p>
    </div>
  </body>
</head>

Pay attention to the p-5 line. The p-5 line-or rather, any line that begins with a p, denotes padding for an element (in this example, the Jumbotron)-the p helper class allows you to change the element’s padding.

Bootstrap also has an m helper class, which allows you to change the element’s margins.

  • In case you forgot the difference between padding and margins, padding is the space between an element’s border (whether visible or not) and the element’s content-like this Jumbotron’s border and it’s content. On the other hands, margins are the space around an element’s border-like the space between the Jumbotron’s border(s) and the edge(s) of the webpage.

Now, two important things to know about padding and margin classes are the ability to set the size and locations of the padding and margins.

Bootstrap has seven options to set the location of the padding and margins:

  • t-set the margin or padding to the top side of the element
  • b-set the margin or padding to the bottom side of the element
  • l-set the margin or padding to the left side of the element
  • r-set the margin or padding to the right side of the element
  • x-set the margin or padding to both the left and right sides of the element
  • y-set the margin or padding to both the top and bottom sides of the element
  • blank-set the margin or padding to all four sides of the element

Bootstrap also has seven options to set the size of the padding and margins:

  • 0-include no margins or padding
  • 1-set the margins or padding of the element to 0.25 pixels (by default)
  • 2-set the margins or padding of the element to 0.5 pixels (by default)
  • 3-set the margins or padding of the element to 1 pixel (by default)
  • 4-set the margins or padding of the element to 1.5 pixels (by default)
  • 5-set the margins or padding of the element to 3 pixels (by default)
  • auto-auto-sets the padding of any element (only used if the element’s margins are set to auto)

To set the location and sizing of an element’s margins or padding, follow this syntax: [m/p][location]-[sizing]. The m or p will always come first to indicate whether you want to add margins or padding to the element, then the location of the margins/padding will be listed. If you want to specify a sizing for your margins/padding (other than the default sizing), the sizing of the margins/padding will be listed after the hyphen.

Pay attention to the lines mt-4 and p-5 from the above example. The line mt-4 sets the Jumbotron’s top margins to “4” (1.5 pixels). The line p-5 set’s the Jumbotron’s padding to “5” (3 pixels). Notice how there isn’t another letter in the p-5 line; because of this, the padding is set to 3 pixels across all corners of the element rather than just a single corner.

Background classes

Next, we’ll explore Bootstrap background helper classes, which are denoted with bg (for instance, bg-light in the above example).

The Bootstrap background helper classes serve as contextual classes that help give your background some more meaning. There are ELEVEN possible Bootstrap background helper classes, which include:

  • bg-primary-turns your background dark blue
  • bg-secondary-turns your background grey
  • bg-success-turns your background green
  • bg-danger-turns your background red
  • bg-warning-turns your background yellow
  • bg-info-turns your background light blue
  • bg-light-turns your background light grey
  • bg-dark-turns your background dark
  • bg-body and bg-white-turns your background white
  • bg-transparent-makes your background transparent

In the previous example, I used the bg-light helper class to give my Jumbotron a light background. Now, just for the heck of it, let’s see what the Jumbotron background would look like with a different style (pay attention to the highlighted line of code):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-info text-black">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll</p>
    </div>
  </body>
</head>

In order to give my Jumbotron the light blue color, all I did was change the bg class from bg-light to bg-info. Pretty neat stuff right?

Here’s another example of Bootstrap background helper classes in action, taken from my post Bootstrap Lesson 2: Typography and Tables:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>
<body>

<div class="container">
  <h1>2021 AFC Standings</h1>
  <table class="table">
    <thead>
      <tr>
        <th>Team</th>
        <th>Record</th>
        <th>Seeding</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>Tennessee Titans</td>
        <td>12-5</td>
        <td>1</td>
      </tr>
      <tr class="success">
        <td>Kansas City Chiefs</td>
        <td>12-5</td>
        <td>2</td>
      </tr>
      <tr class="success">
        <td>Buffalo Bills</td>
        <td>11-6</td>
        <td>3</td>
      </tr>
      <tr class="success">
        <td>Cincinnati Bengals</td>
        <td>10-7</td>
        <td>4</td>
      </tr>
      <tr class="warning">
        <td>Las Vegas Raider</td>
        <td>10-7</td>
        <td>5</td>
      </tr>
      <tr class="warning">
        <td>New England Patriots</td>
        <td>10-7</td>
        <td>6</td>
      </tr>
      <tr class="warning">
        <td>Pittsburgh Steelers</td>
        <td>9-7-1</td>
        <td>7</td>
      </tr>
      <tr class="danger">
        <td>Indianapolis Colts</td>
        <td>9-8</td>
        <td>8</td>
      </tr>
      <tr class="danger">
        <td>Miami Dolphins</td>
        <td>9-8</td>
        <td>9</td>
      </tr>
      <tr class="danger">
        <td>Los Angeles Chargers</td>
        <td>9-8</td>
        <td>10</td>
      </tr>
      <tr class="danger">
        <td>Cleveland Browns</td>
        <td>8-9</td>
        <td>11</td>
      </tr>
      <tr class="danger">
        <td>Baltimore Ravens</td>
        <td>8-9</td>
        <td>12</td>
      </tr>
      <tr class="danger">
        <td>Denver Broncos</td>
        <td>7-10</td>
        <td>13</td>
      </tr>
      <tr class="danger">
        <td>New York Jets</td>
        <td>4-13</td>
        <td>14</td>
      </tr>
      <tr class="danger">
        <td>Houston Texans</td>
        <td>4-13</td>
        <td>15</td>
      </tr>
      <tr class="danger">
        <td>Jacksonville Jaguars</td>
        <td>3-14</td>
        <td>16</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

In this example, I used three Bootstrap background helper classes (success, warning, and danger) to color in each row according to each AFC team’s playoff standings in 2021 (division clinched, wildcard, did not qualify for playoffs). Granted, I didn’t explicitly use the bg-success, bg-danger, and bg-warning background classes, but the idea is still the same-to color in the table rows according to a certain context.

Text helper classes

Last but not least, I want to explain text helper classes (such as the one you’ll see in the line text-black).

In the Jumbotron example, I used the line text-black to set the color of the Jumbotron text to black. Seems pretty self-explanatory, right? Well, the text helper classes-unlike the padding, margin, and background helper classes-are quite versatile, as there are several ways to modify Bootstrap text.

  • If you want to change the color of text using Bootstrap helper classes, you can only do so by writing the name of the color (so no HEX/RGB/other colorscale codes here)

Text alignment

The first such way to modify Bootstrap text-aside from changing the color-is by changing the text’s alignment. Let’s see how that would work with the Jumbotron from the previous post (pay attention to the highlighted line of code):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-center text-black">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll</p>
    </div>
  </body>
</head>

First of all, you’ll noticed I changed the Jumbotron’s background class back to bg-light, but that isn’t too important here.

What is important here is how I changed the alignment of the text-in this case, I center-aligned all text in the Jumbotron. All I had to do was add the line text-center to center the text.

  • In case you’re wondering how to center-align the text and keep its black color, you’ll need to add text-center and text-black as separate lines. Trying something like text-center-black or text-black-center won’t work-while these lines won’t give you any errors, the text won’t be centered in your Jumbotron.

There are two other ways to align your text in Bootstrap-text-start and text-end, which will left-align and right-align your text, respectively.

Text wrapping

Next, let’s explore how to utilize text wrapping in Bootstrap. First off, let’s see an example of text wrapping in the Jumbotron (pay attention to the highlighted line of code):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-center text-black text-wrap">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>

To show you how text-wrapping works in Bootstrap, I added a bunch of rambling text to the <p> tag of the Jumbotron to ensure it was long enough to wrap. To wrap the text, I simply added the line text-wrap to the Jumbotron’s <div class-="..."> tag.

If you didn’t want the text-wrapping in the Jumbotron, replace the text-wrap class with the text-nowrap class. Here’s what the Jumbotron would look like with no text-wrapping:

Interestingly, Bootstrap doesn’t try to squeeze all the text into the Jumbotron. Rather, the text spills outside the Jumbtron, so you’ll need to scroll across the window to read the entire document. Pretty user-unfriendly, amirite?

Text transformation

Next up, let’s explore text transformation in Bootstrap. But first, a little demo (pay attention to the highlighted line of code):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-center text-black text-wrap text-capitalize">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>

In this example, I used the line text-capitalize to capitalize the text. However, text-capitalize doesn’t do what you think it might do-capitalize the entire text. Rather, text-capitalize only captializes the first letter of each word in the Jumbotron and leaves all other letters lowercase.

If you’re looking to capitalize the entire text, replace text-capitalize with text-uppercase. Similarly, if you’re looking to lowercase the entire text, replace text-capitalize with text-lowercase.

Font sizes

The next way you can modify your text in Bootstrap is through modifying font sizes. Before we discuss this, here’s a little demo for y’all (pay attention to the highlighted line of code):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-center text-black text-wrap text-capitalize fs-1">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>

Unlike most of the other text modifications we’ve discussed, the text modification for font looks a little different since it uses the fs (font size) helper class-and yet, it still works to change the text’s font size.

In this example, I used the fs-1 helper class to change the Jumbotron text’s font size and as you can see, the fs-1 helper class makes the text quite large! Why might that be?

Well, there are six possible values for the fs helper classes-ranging from 1 to 6. fs-1 creates the largest text, while fs-6 creates the smallest text. Does this concept sound familiar to you? If so, it’s because HTML headers also have six possible values-ranging from 1 to 6, with 1 creating the largest header and 6 creating the smallest header.

Font effects

Now that we’ve dicsussed modifying the font size, let’s turn our attention to font effects in Bootstrap-things like boldening and italicizing the text. Take a look at the example Jumbotron code below (and pay attention to the highlighted text):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-center text-black fw-bold">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>

In this example, I made all of the text on the Jumbotron bold with the line fw-bold (granted, that doesn’t seem to affect the <h1> tag’s appearance all that much). Simple, but pretty neat right?

Some other text effects you could use on your Bootstrap text include:

  • fw-normal-no text effect (this seems quite redunant to include if you ask me)
  • fw-light-light text
  • fst-italic-italicized text
  • fst-normal-normal font style text (also quite redunant, but Bootstrap includes it anyway)
  • fw-bolder-this will make the text bolder than its parent element
  • fw-lighter-this will make the text lighter than its parent element

As you can see, we’ve got several different text effects to use with Bootstrap text. As you can also see, there are TWO different helper classes for text effects-fw (font weight) and fst (font styling). The fact that text effects have two different helper classes is unique, as all of the other text modifications we’ve discussed and will discuss only have one helper class.

Line spacings

Next up, we’ll discuss line spacings in text. But first, a little demo with our Jumbotron (which you should be quite familiar with by now, and as always, pay attention to the highlighted line of code):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-center text-black lh-lg">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>

Just like the font size modification I previously discussed, the line spacing modifications don’t use the text helper class. Rather, the line spacing modifications use the lh (line height) helper class-as you can see from the above example, I use lh-lg to change the line spacing in my Jumbotron.

There are three other options to change the line spacing in Bootstrap text-lh-1 (which gives the smallest line spacing), lh-sm (which gives slightly bigger line spacing), and lh-base (which gives the default line spacing). lh-lg gives you the largest possible line spacing in Bootstrap.

Underline and strokethrough

Last but not least, let’s discuss how to add underlines and strokethrough effects to your Bootstrap text. Here are two demos on how to do just that, first with the underline effect (pay attention to the highlighted line of code):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-center text-black lh-lg text-decoration-underline">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>

Now here’s what the same Jumbotron text would look like with a strokethrough effect:

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-center text-black lh-lg text-decoration-line-through">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>

In both examples, I use the text-decoration helper class to add some text decoration effects to the Jumbotron text. In this case, I added an underline effect with the line text-decoration-underline and added a strokethrough effect with the line text-decoration-line-through.

There’s also a third text decoration effect within the text-decoration helper class-text-decoration-none. However, this will only work with hyperlinks, as the text-decoration-none effect will only remove all text decorations within hyperlinks, so if you tried to use this effect on something like the Jumbotron from the above example, it won’t work.

Thanks for reading,

Michael

Bootstrap Lesson 4: Jumbotrons and Image Carousels

Hello everybody,

Michael here, and it looks like we’ve got quite a lesson today-we’ll be covering Jumbrotrons and carousels in Bootstrap!

Now, let’s begin with some Bootstrap Jumbotrons!

Bootstrap Jumbotrons

What is a Bootstrap Jumbotron? If you answer anything like a Jumbotron you’d see in sporting arenas, you are sort of right. While Bootstrap Jumbotrons aren’t as gigantic as their sporting arena counterparts, the general idea of both Jumbotrons is the same-to emphasize and call attention to specific content (whether it be a cheering crowd or webpage content).

Now, here’s a little quirk about Bootstrap Jumbotrons-there’s no longer a special class to create them in Bootstrap. See, Jumbotrons were introduced in Bootstrap 3-with their own Bootstrap class-as big padded boxes used to call attention to special webpage content. However, the Jumbotron class was phased out by Bootstrap 5 BUT even with that being said, you can still create Jumbotrons in Bootstrap through a clever combination of <div> tags and special Bootstrap classes. Let’s take a look at the code below to see how we can replicate a Jumbotron in Bootstrap 5:

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-black">
      <h1>Michael's photos</h1>
      <p>Photos of me from my phone's camera roll</p>
    </div>
  </body>
</head>
  • The line mt-4 p-5 bg-primary text-white rounded is made up of a combination of several different Bootstrap helper classes, which I’ll cover in future Bootstrap posts.

As you can see, using several Bootstrap helper classes (along with an <h1> and <p> tag), I managed to replicate a Bootstrap Jumbotron. Pretty simple stuff right?

Now that Jumbotrons have been covered, let’s move on to our next topic for today-Bootstrap carousels.

Carousels

No, we’re not going to ride the state fair’s merry-go-round here today (though wouldn’t that be fun). Rather, we’re going to discuss the image carousel, which is a feature used in webpage design that serves as a slideshow (or “carousel”) of images.

How would we implement the carousel in Bootstrap? Pay attention to the highlighted section of code below:

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <div class="mt-4 p-5 bg-light text-black">
      <h1>Michael's park photos</h1>
      <p>My favorite parks</p>
    </div>

<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
  </div>


  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bicentennial.jpg" alt="Bicentennial Capitol Mall State Park" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="stafford.jpg" alt="Stafford Park" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="sevier.jpg" alt="Sevier Park" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="veterans.jpg" alt="Veterans Park" class="d-block w-100">
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>
  </body>
</head>
  • Yes, I did change the Jumbotron message from the previous example, but that’s irrelevant here.

The carousel elements, explained

So, how was I able to create the carousel? First, pay attention to the <div id="demo" class="carousel slide" data-bs-ride="carousel"> line. This line creates the carousel by using the Bootstrap class carousel slide and initializes the carousel with the data-bs-ride="carousel" line; the purpose of including this line is to include the ability to jump from image to image in the carousel.

The four following lines of code create buttons that allow you to jump from image to image on the carousel. Pay attention to this chunk of code-data-bs-slide-to="0", as it’s repeated four times-one for each of the four images I’ve included in this carousel. The only difference in the four instances of this line is that “0” is replaced with “1”, “2”, and “3”, which allow you to naviagate to the second, third, and fourth images in the carousel, respectively. Also, in the line of code to create the first button (the line that contains data-bs-slide-to="0"), you’ll also see a chunk of code that says class="active"-this indicates the carousel’s default image (in other words, the first image you’ll see on the carousel when you open the webpage).

  • Why is the value of the first data-bs-slide-to set to 0 while the value of the last data-bs-slide-to set to 3, even though there are four images in the carousel? This is because, when building a Bootstrap carousel, 0 refers to the first image-thus, 3 would refer to the fourth image. Zero-indexing system at work, much like in Python!

After adding the buttons, you’ll need to add another div class-carousel-inner. This is the fun part of the carousel, as this section of code actually adds your images to the carousel. All images except for the default image must have the class carousel-item, though the default image must have the class carousel-item active; this way, Bootstrap knows which image to display upon a user’s arrival to the webpage.

As for the image source (or src), if you have your images in the same directory as your HTML/CSS code, all you need to do to include the image onto the carousel is write src="[image name].[image extension]". If your images are in a different directory than your HTML/CSS code, you’ll need to include the image’s whole file path in the src parameter.

After including the images, the last thing you’ll need to add to the carousel are the Back and Next buttons, which can be accomplished with the carousel-control-prev and carousel-control-next classes and their corresponding <span> tags. Why do each of these classes need their own <span> tags? All the carousel-control-prev and carousel-control-next classes do is add the functionality to go back and forth in the carousel. However, simply having the functionality to go back and forth isn’t enough on its own-after all, how can you expect the user to navigate back and forth in the carousel if they don’t want to use the tiny rectangular buttons on the bottom of the carousel? That’s where the <span> tags come in, as they link to the aforementioned functionalities to display two icons on the center-left and center-right hand sides of the carousel to allow the user to easily navigate back and forth through the carousel.

  • Honestly, you only need either the small rectangluar buttons or the Back and Next buttons in the carousel-you don’t absolutely need to include both elements. The only reason I did so is to teach you guys the basics of developing a Bootstrap carousel. Also, keep in mind that the differences between the small rectangular buttons and the Back/Next buttons is that the former option will allow you to jump all across the carousel (which can certainly help if you’ve got lots of images) while the latter option will only allow you to naviagate through the carousel one image at a time.

Re-sizing the carousel

Now, as you may have noticed from running the code, the carousel is looking a little big on the display. Let’s fix the sizing and fit the carousel to the screen with a little CSS magic:

html,body{
   height:100%;
}
.carousel,.item,.active{
   height:100%;
 }
.carousel-inner{
    height:100%;
}
  • By the way, this screen shot above is zoomed in at 100%.
  • Remember to save your CSS code in a CSS file and link it to your HTML/Bootstrap code-it would also be ideal to give your CSS file the same name as your corresponding HTML file.

Why would we need to set the height of all carousel elements (along with the larger HTML and body elements) to 100%? Doing so will ensure that all carousel elements fit within the entire screen without cutting off portions of the carousel.

Now, even though I said the carousel can now fit to screen once this CSS code has been added, you’ll notice that the CSS carousel doesn’t quite fit to screen. How do we fix this? Remove the Jumbotron!

Code to remove:

<div class="mt-4 p-5 bg-light text-black">
      <h1>Michael's park photos</h1>
      <p>My favorite parks</p>
</div>

Now the carousel fits within the screen 100% with no need for scrolling!

Carousel captions

Last but not least, let’s discuss how to add captions to the carousel. Honestly, the carousel looks great so far, but what would really improve it (and in turn, improve the user experience) are captions for each image to give the user an idea of what they’re looking at.

How would we add captions to the carousel? Take a look at the highlighted sections of code below:

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="BootstrapSite.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <!-- <div class="mt-4 p-5 bg-light text-black">
      <h1>Michael's park photos</h1>
      <p>My favorite parks</p>
    </div> -->


<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
  </div>


  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bicentennial.jpg" alt="Bicentennial Capitol Mall State Park" class="d-block w-100">
      <div class="carousel-caption">
        <h2>Bicentennial Capitol Mall State Park</h2>
        <p>Nashville, TN</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="stafford.jpg" alt="Stafford Park" class="d-block w-100">
      <div class="carousel-caption">
        <h2>Stafford Park</h2>
        <p>Miami Springs, FL</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="sevier.jpg" alt="Sevier Park" class="d-block w-100">
      <div class="carousel-caption">
        <h2>Sevier Park</h2>
        <p>Nashville, TN</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="veterans.jpg" alt="Veterans Park" class="d-block w-100">
      <div class="carousel-caption">
        <h2>Veterans Park</h2>
        <p>Mentor, OH</p>
      </div>
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>
  </body>
</head>

The carousel sure is looking much nicer, isn’t it? After all, now the users know exactly what they are looking at. Without the captions, the users would’ve assumed that the four pictures above were of random outdoor spaces.

How did I get the captions on each slide of the carousel? Easy-below the line where you insert the image (the line with the <img> tag), insert another <div> tag and set the class as carousel-caption, which indicates that you’d like to add some captions to a particular slide.

  • As you can see in the above example, I added a <div class="carousel-caption"> line four times. If you’ve got multiple images you’d like to add captions to, you’ll need to add the <div class="carousel-caption"> line for each image.

Inside the <div class="carousel-caption"> tag, you can add the caption by using as many standard HTML tags as you wish (I used the <h2> and <p> tags). Keep in mind that the more HTML tags you use, the more lines the image’s caption will have.

  • If you want to code-along with this tutorial, any four JPG images will work. If you wish to use the images I used, you’ll find the links to download each image below.
bicentennial-2Download
sevier-2Download
stafford-1Download
veteransDownload

Thanks for reading,

Michael

Bootstrap Lesson 2: Typography and Tables

Hello everybody,

Michael here, and today’s lesson will cover typography and tables in Bootstrap.

Bootstrap typography

Now, before I show you how to work with tables in Bootstrap, let’s first discuss Bootstrap typography, because it works a little different than your standard HTML/CSS typography.

Take a look at the font used on our first Bootstrap website (from the previous lesson):

Bootstrap uses a default Arial-like size-14 pixel font, as seen in the photo above. However, the size-14 pixel font is just a framework-wide default, as it’s applied to any element inside a <body> or <p> tag. The six main HTML headings <h1>–<h6> utilize the same Arial-like font, however the text sizes for each main HTML heading are as follows:

  • <h1>-size-36
  • <h2>-size-30
  • <h3>-size-24
  • <h4>-size-18
  • <h5>-size-14
  • <h6>-size-12

And if you don’t like the default Bootstrap typography, you can always change it with a little CSS, as shown below:

h1{
  font-family: "Times New Roman";
  font-size: 40px;
  color: "red"
}

And remember to link your CSS file to your HTML file (see line highlighted in red):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="BootstrapSite.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <h1>Here's your first Bootstrap site!!!</h1>
  </body>
</head>
  • To make things easier on yourself, give your CSS file the same name as your corresponding HTML file. For instance, since I named my HTML file BootstrapSite.html, I named my connected CSS file BootstrapSite.css.

And here’s the site with the changed font:

Tables

Now that we’ve discussed Bootstrap typography, let’s move on to Bootstrap tables. How do you create a table in Bootstrap? Take a look at the code below, which shows you an HTML table without any Bootstrap:

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="BootstrapSite.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <table>
      <tr>
        <th>Movie</th>
        <th>Release Date</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Don't Worry Darling</td>
        <td>September 23</td>
        <td>Mystery</td>
      </tr>
      <tr>
        <td>Black Panther Wakanda Forever</td>
        <td>November 11</td>
        <td>Superhero</td>
      </tr>
      <tr>
        <td>Halloween Ends</td>
        <td>October 14</td>
        <td>Horror</td>
      </tr>
    </table>
  </body>
</head>

As you can see, I have created a simple table in HTML, but with no Bootstrap applied. As a result, the table displays just fine, but doesn’t look all that great. How can we fix this? Apply a little Bootstrap, of course (hey, this is a Bootstrap lesson after all)! Pay attention to the highlighted lines of code to see how you can apply a little Bootstrap magic to your HTML table (note-there is no CSS code attached here):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <h1>Fall 2022 Movies</h1>
    <div class="table">
      <table class="table">
        <tr>
          <th>Movie</th>
          <th>Release Date</th>
          <th>Genre</th>
        </tr>
        <tr>
          <td>Don't Worry Darling</td>
          <td>September 23</td>
          <td>Mystery</td>
        </tr>
        <tr>
          <td>Black Panther Wakanda Forever</td>
          <td>November 11</td>
          <td>Superhero</td>
        </tr>
        <tr>
          <td>Halloween Ends</td>
          <td>October 14</td>
          <td>Horror</td>
        </tr>
      </table>
    </div>
  </body>
</head>

In order to apply Bootstrap stylings to my HTML table, I wrapped the code for my HTML table inside a <div> tag and specified which one of Bootstrap’s table stylings I’d like to apply-in this case, I chose the basic table styling table and specified the styling in the line <div class="table">.

Oh, but here’s the fun part about Bootstrap table stylings! Bootstrap has 7 different ways you can style your table, six of which include:

  • table-Just a plain Bootstrap table (like the example above)
  • table-striped-Gives the table “zebra stripes” (alternating grey and white rows)
  • table-bordered-Adds a border around all sides of the table and around all cells
  • table-hover-Any rows that you hover over turn grey
  • table-condensed-Makes a table more compact by reducing cell padding by half
  • table-responsive-Allows you to scroll through the table horizontally on small devices (anything less than 768 pixels wide); for devices wider than 768 pixels, there is no difference in how the table is displayed

To give your HTML table any of these stylings, wrap the HTML table code inside a <div> tag and use this syntax to apply the Bootstrap styling-<div class="Bootstrap table styling">.

Now, notice how I said you can choose seven different Bootstrap table stylings for your HTML table, but I only mentioned six stylings above. That’s because the seventh styling doesn’t involve wrapping your HTML table code in a <div> tag. Rather, the seventh styling comes in the form of contextual classes, which are table stylings that you can apply to individual table rows (<tr> tag) or table cells (<td> tag).

Let’s see how the contextual classes work:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>
<body>

<div class="container">
  <h1>2021 AFC Standings</h1>
  <table class="table">
    <thead>
      <tr>
        <th>Team</th>
        <th>Record</th>
        <th>Seeding</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>Tennessee Titans</td>
        <td>12-5</td>
        <td>1</td>
      </tr>
      <tr class="success">
        <td>Kansas City Chiefs</td>
        <td>12-5</td>
        <td>2</td>
      </tr>
      <tr class="success">
        <td>Buffalo Bills</td>
        <td>11-6</td>
        <td>3</td>
      </tr>
      <tr class="success">
        <td>Cincinnati Bengals</td>
        <td>10-7</td>
        <td>4</td>
      </tr>
      <tr class="warning">
        <td>Las Vegas Raider</td>
        <td>10-7</td>
        <td>5</td>
      </tr>
      <tr class="warning">
        <td>New England Patriots</td>
        <td>10-7</td>
        <td>6</td>
      </tr>
      <tr class="warning">
        <td>Pittsburgh Steelers</td>
        <td>9-7-1</td>
        <td>7</td>
      </tr>
      <tr class="danger">
        <td>Indianapolis Colts</td>
        <td>9-8</td>
        <td>8</td>
      </tr>
      <tr class="danger">
        <td>Miami Dolphins</td>
        <td>9-8</td>
        <td>9</td>
      </tr>
      <tr class="danger">
        <td>Los Angeles Chargers</td>
        <td>9-8</td>
        <td>10</td>
      </tr>
      <tr class="danger">
        <td>Cleveland Browns</td>
        <td>8-9</td>
        <td>11</td>
      </tr>
      <tr class="danger">
        <td>Baltimore Ravens</td>
        <td>8-9</td>
        <td>12</td>
      </tr>
      <tr class="danger">
        <td>Denver Broncos</td>
        <td>7-10</td>
        <td>13</td>
      </tr>
      <tr class="danger">
        <td>New York Jets</td>
        <td>4-13</td>
        <td>14</td>
      </tr>
      <tr class="danger">
        <td>Houston Texans</td>
        <td>4-13</td>
        <td>15</td>
      </tr>
      <tr class="danger">
        <td>Jacksonville Jaguars</td>
        <td>3-14</td>
        <td>16</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

As you can see, we have created a colorful table showing 2021 NFL AFC (American Football Conference for those unaware) standings for all 16 AFC teams using Bootstrap’s contextual table classes. How did we accomplish this?

In this example, I used the success class for the top 4 rows, which indicates the four AFC teams that won their divisions last year. To apply the success class styling to the first four rows of this table, I used the line <tr class="success"> before the table row code for each of these rows. I then applied the same logic to style the rows for the wildcard teams (seeds 5-7) and the teams that didn’t make playoffs last year (seeds 8-16), except I replaced the success class with the warning and danger classes, respectively.

  • Another thing I’d like to note-I’ve used Atom text editor for my HTML, CSS and Bootstrap lessons, however Atom text editor will be retired by GitHub on December 15, 2022. You’ll likely still be able to download it after that date, but it won’t be updated anymore. If you’re looking for a new IDE for your web development, Sublime Text Editor and Microsoft’s Visual Studio Code are great text editors.

Thanks for reading!

Michael

Bootstrap Lesson 1: The Basics of Bootstrap

Hello everybody,

Michael here, and in today’s lesson, I’ll introduce a new programming tool-Bootstrap (the eigth programming tool I’ll cover in this blog).

What is Bootstrap exactly? Well, to put it simply, Bootstrap is an HTML/CSS/JavaScript web development tool that allows you to create mobile-friendly, easily responsive websites.

Now, you may be wondering if this means you’re going to be learning a whole new language with all new syntax. The good thing about Bootstrap is that, while I will introduce some new syntax to you all, it is very easy to understand if you’ve got at least a working knowledge of HTML and CSS (so if you’ve followed my HTML and CSS lessons, you should be good to go here). If it helps, think of Bootstrap as a supplement to HTML and CSS.

Now, how do we get started with Bootstrap? First, we’re going to start by downloading the lastest version of Bootstrap (as of September 2022)-Bootstrap 5-from getbootstrap.com.

Did I say downloading Bootstrap? You could do that, but there’s a much more convinient workaround. In your HTML file, copy these two lines of code into your document:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

These two lines of code will give you all the CSS and JavaScript scripts you’ll need to run Bootstrap (and yes, you’ll need both scripts to get the most out of Bootstrap).

  • About these two lines of code-you’ll need them every time you want to use Bootstrap for your website, as your websites won’t run on Bootstrap if you don’t include these two lines of code on top of your HTML file

Now, let’s create our first Bootstrap website! Take a look at the code below (and remember to include the two lines of code I just mentioned at the top of the file):

<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
  <body>
    <h1>Here's your first Bootstrap site!!!</h1>
  </body>
</head>

As you can see, we have created a simple Bootstrap site. Granted, there’s not much content or CSS stylings on the site but don’t worry-we’ll cover more cool Bootstrap features in the next few lessons!

Thanks for reading,

Michael