Learning Web Development, Day 4 — Bootstrap Fundamentals
Aside from still being a little sick, I am also still wiped out from all my birthday celebrations, which included:
- Getting acrylic nails (which makes me type slower and with more typos)
- Seeing Ghostwatch with the director and writer being interviewed afterwards
- Going to London
- Seeing Animal Crossing: New Horizons at the London Sea-Life Centre
- Seeing Pokémon at the Natural History Museum
And then I had hospital appointments, needed to see Ready or Not 2: Here I Come, and it's been a very busy week, no time for code, Doctor Jones.
But I'm now going to start the Bootstrap part of the Web Development course. Am I still a cantankerous old coot who still thinks frameworks are for the birds?
Yes.
Am I going to figure out some of it anyway?
Also yes.
00 — Intro To Web Development
This was mostly showing me JSBin and going over the basics of HTML and CSS within it.
And, unfortunately, one of the first things the instructor said was about how you can style the HTML by using the Bootstrap classes, instead of styling them using your own CSS file.
Oh no. Is this really what people are using Bootstrap for? Is this what it's for? Whenever someone starts talking about Bootstrap or similar, it all turns into the "wah waa wah" of Charlie Brown's teacher, and I don't pay attention. But now I guess I have to. And it's going to disappoint me, isn't it?
01 — Bootstrap Fundamentals
Okay, okay, yes, I can do this. I will figure out this nonsense. It will behave for me. I will not go "But I could do this better by..."
Nope. Following the tutorial.
01 — How To Get Bootstrap
(Is this a bad time to mention that I hate the name because it just makes me think of "pulling yourself up by your bootstraps" and I hate that?)
Of course, Bootstrap's changed how you set it up compared to how the video tells you. Do I go and put the Popper and other bits in? Do I just use the default?
Well, the instructor is including three scripts and one stylesheet, so I'm going to include three scripts and one stylesheet. Am I repeating myself? Probably, but that's fine.
I will not, however, keep the stylesheet link in the <body> of the page. That just feels so wrong. It's going in the <head> because that is where it belongs, darn it.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/
bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16
cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/
bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YY
wJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/
core@2.11.8/dist/umd/popper.min.js" integrity="
sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/
vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/
bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="
sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjr
xilcCdDz6ZAVfHWe1Y" crossorigin="anonymous">
</script>
</body>
</html>
NO I AM NOT JUDGING IT. STOP JUDGING IT. IT'S FINE. IT'S. ALL. FINE.
02 — Build Bootstrap Grids
Making a row with equal columns? Isn't that just Grid? Or Flexbox?
Okay, I know, I know, Bootstrap was around before both of those were really out there, but I'm still kinda side-eyeing it. Like, do you really need all this extra code just to do this?
I am glad to know what I'm seeing when I keep on seeing col-md-4 in code. Like, now I can be like "I can see what you're using, stop it, why are you doing that."
<body class="p-5">
<div class="row">
<div class="col-md-2 block">col-md-2</div>
<div class="col-md-7 block">col-md-7</div>
<div class="col-md-3 block">col-md-3</div>
</div>
</body>
Also, so that we can see the columns, we had to actually create a new class in our own CSS to style the columns. So I'd be adding another CSS file just to have the columns be orange.
.block {
background-color: darkorange;
outline-style: solid;
outline-color: black;
outline-width: thick;
}
I've never used outline before, sticking with border, and the instructor didn't explain the difference. So I had to look that up.
border is inside the element you're drawing around. outline is outside the element you're drawing around. I did not know that, and now I do, and now I'm double-thinking all the various borders I know I have floating around.
Day 4 — Results
- Bootstrap just doesn't do JavaScript, it also does CSS.
- This is why there's all that dang
p-5orcol-md-3or whatever in code. - You still have to actually style things, though.
- You can download and install Bootstrap on your systems, or you can just link to their CDN-archived version. Which is great for when you're just learning and playing around, but must be painful when you have a live site.
borderdraws a border inside the element you're styling,outlinedraws a border outside the element you're styling.
That was all I could manage today. I still have three more videos in Bootstrap Fundamentals and then there are two larger Bootstrap Projects, so I think I'm going to take this easy so I don't end up unbelievably grumpy about everything.
Today's Sticker
A React versus HTML & CSS meme sticker I picked up at WebDevConf last year. On the back, alistairshepherd.uk is handwritten, so, thanks for the encouragement , Alistair!