Bootstrap Lesson 2: Typography and Tables - Michael's Programming Bytes

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 typography

Tables

Share this:

Leave a ReplyCancel reply

Discover more from Michael's Programming Bytes