Learning Web Development, Day 5 — More Bootstrap Fundamentals
In my brain right now, Paul Atreides is smiling and saying he's not in the mood, and Gurney Halleck is angrily comparing everything to cattle and loveplay again.
But NO. I WILL finish this Bootstrap course.
01 — Bootstrap Fundamentals
Still in the Fundamentals. Three more videos to go.
03 — Set Display Property With Bootstrap
I still don't believe that Bootstrap is faster than CSS. Nope.
Like, okay, sure, you're showing me that there's d-none and bg-primary and text-white as classes I can add to things and Bootstrap will apply the right CSS to those classes, but that means that for every text-white I put in, there's gotta be a text-dark or text-light or text-cyan or whatever, right? Like, all those CSS changes have to be in there, right?
And, like, just to get an inline black block with white text and a bit of padding, you're having me write class="d-inline bg-dark text-white p-2" instead of, like class="cta" or something similar. That's a hell of a lot of additional code, isn't it?
And there's flex and inline-flex? Why wouldn't you just have that in your CSS?
And TABLE CLASSES. WHAT THE HELL ARE TABLE CLASSES DOING THERE. WHAT EVEN IS THIS. WHY AM I USING <span class="d-table"> AND <span class="d-table-cell"> WHAT IS THIS.
"...it's much more efficient for you as a developer, because you don't have to apply CSS, you can do it with Bootstrap CSS."
I'm still just staring at this and going "...why. Why would you do this. So much extra code. What."
04 — Build A Layout With Bootstrap Flex
Okay, you know what doesn't help in the slightest?
Saying that flex-column puts the <div>s into rows and flex-row puts the <div>s into columns.
What the helllllllllllll...why would you say it like that. Why is it doing it like that. What is even happening here.
justify-content and align-items is nice, but I also know there are ways to do it in CSS that don't take up so much space. Plus, the instructor has to keep on adding style="height: 100px" to the d-flex <div> in order to actually show off the changes.
05 — Grow Shrink Fill With Bootstrap Flex
Dang, there is nothing quite like using bg-primary, bg-secondary, bg-light, and bg-dark for you to feel like you're suddenly on every single 2019 website. Like, I have seen those colours, yo. I know those too well.
flex-grow and flex-fill are nice in that they easily move around, but, again, yes, CSS. It's just CSS. I thought this would teach me new things. But. It's. All. Just. CSS.
Day 5 — Results
- You can add different display options by using
d-DISPLAYin your Bootstrap CSS. - This includes
flexandinline-flex. - This also include
table,table-row, andtable-cellif you want all the organisation of a table without actually using a table. - I don't know why.
d-flexhasflex-rowandflex-columnoptions. You can then apply classes likejustify-content-end(moves your content to the end of the element on the X-axis) oralign-items-end(moves your content to the bottom of the element on the Y-axis).- There are also centering and spacing out options.
flex-grow-1makes an element grow with the dimensions of the screen.flex-shrink-1makes an element shrink with the dimensions of the screen.flex-fillmakes an element fill up the area within the dimensions of the screen.- All of this is CSS. With just extra steps involved to annoy you.
Next week, I'm learning how to make a site with Bootstrap. I feel like I'm going to be hit with a lot of déjà vu. "Wait, wasn't this that site that showed me my SEO stats? Or was the one that had stock photos? Or was it the one with the weather?"
I just need someone to tell me why you would use this. Why would you fill up your code with all of this. Why you wouldn't just name elements on your page according to what they do, and then style them up. Why you would just fill up your random-ass <div> with a billion visual style classes.
WHY IS THIS A THING. HELP ME UNDERSTAND.
Today's Sticker
I honestly can't remember where I got forklift-certified Kirby from, but, dang, I think getting forklift certification would help me get a job a hell of a lot faster than knowing Bootstrap.