Michael here, and for today’s post, I’ll discuss something a little different-neural networks; this is the first post of my new AI (artificial intelligence) series. Granted, I’ll be using Python, which I’ve used quite a bit in this blog (this is my 37th Python lesson after all).
More specifically, in today’s post, I will be discussing the basics of neural networks and how to set up a simple neural network in Python. And in case you’re wondering (and/or really enjoy AI content), the remainder of my 2022 blog posts AND my first few 2023 posts will cover neural networks.
But first, a little bit about machine learning…
For those of you who’ve been following my blog for quite a while, you may recall that a lot of my earlier entries covered machine learning.
But what is machine learning exactly? It’s essentially a process where you are training a program to do something (like identifying a certain plant from a photo)-or in better terms, training a machine to learn something (hence the term machine learning). One of my early posts from February 2019-R Lesson 10: Intro to Machine Learning-Supervised and Unsupervised-does a good job of explaining some of the basics of machine learning. Granted, I wrote this post as part of a series of R lessons, but the gist of the post can be applied to any programming/automation tool.
Now onto neural networks
What is a neural network (in the context of programming)? To help explain this concept, think of the way all of the neurons in your brain process information. Neural networks operate in a similar manner, as they are meant to process information via a computer program that’s meant to mimic the way our brains process information.
Neural networks are a form of machine learning, and just like machine learning, you can utilize supervised and unsupervised machine learning with neural networks. Unsupervised machine learning with neural networks actually has a name of its own-deep learning, which is a process you use to allow the neural network to train itself rather than coding in any guidance for the neural network’s operation.
A neural network you’ve likely come across
A neural network you’ve most likely seen or heard of before is deepfakes. If you’ve ever seen a video where it appears someone’s face looks stitched onto someone else’s body-that’s deepfake AI at work.
A great example of deepfake AI at work was seen on season 17 (2022) of America’s Got Talent–https://www.youtube.com/watch?v=Jr8yEgu7sHU&t=116s. The act in the linked video-Metaphysic-utilized deepfake AI to make it appear as if the king of rock’n’roll Elvis and judges Sofia Vergara and Heidi Klum were singing Elvis’s greatest hits. Take a closer look at the video, and you realize that “Elvis”, “Sofia”, and “Heidi” are being animated by three singers in real-time standing in front of projectors. Pretty neat stuff, right? Plus, Metaphysic finished the season in 4th place-not too shabby for AGT’s first deepfake/metaverse AI act.
Another brilliant, albeit controversial, example of deepfake AI at work can be found in Kendrick Lamar’s 2022 music video for The Heart Part 5–https://www.youtube.com/watch?v=uAPUkgeiFVY (highly recommend listening to Mr. Morale & the Big Steppers). In this video, Kendrick Lamar uses deepfake AI to transform himself into six notable celebrities-OJ Simpson, Kanye West, Jussie Smollett, Will Smith, Kobe Bryant, and Nipsey Hussle-while rapping six different verses from the perspectives of these individuals.
Did I cover neural networks before?
Did I ever explicitly cover neural networks before? No.
However, several past posts did cover machine learning-both supervised and unsupervised. Here are a few of those posts:
R Lesson 13: Naive Bayes Classification-(from April 2019) in this post, we use R to perform spam detection on a dataset of YouTube comments from Eminem’s Love The Way You Lie music video using the Naive Bayes classification algorithm
R Analysis 9: ANOVA, K-Means Clustering & COVID-19-(from April 2020) in this post, we use R to perform ANOVA analysis and k-means clustering on data regarding the COVID-19 pandemic (case counts, lockdowns, etc.)
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?
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.
