New Bootstrap Feature - CSS Variables

[@bripowered]

Thank you Bobby! This is very useful, especially for those of us that don't like to deal with compiling SASS.

[@CoderFoundry]

You're very welcome!

[@heather.zenplify]

Love this! Thank you! I’d be interested to know if/how you updated your process with the added color features in 5.3.

[@CoderFoundry]

Yeah, we will produce more videos as the new versions come out.

[@Augnos]

This is gold! Thanks for sharing this, Bobby!

[@CoderFoundry]

Your welcome

[@BruceElgort]

Just what I was looking for! Thank you for this info on Bootstrap CSS variables.

[@CoderFoundry]

Glad it was helpful!

[@crymeariv-1]

This helped me so much! I was looking for a best practice without downloading and changing Bootstrap Sass and without having to write !important statements after every style change. Thank you so much! I believe this is best practice overall because you can use the cdn links this way instead of having to install all of Bootstrap into your project.

[@CoderFoundry]

You're welcome!!

[@WondervilleSeries]

If you ever wondered what sitting in on a live coder foundry class is like, this is it(minus the fast forward, of course). Thank you, Bobby!

[@caseyspaulding]

🔥🔥thanks for sharing!

[@CoderFoundry]

You bet!

[@TaniaaatBeam]

Great tutorial and explanation on customising Bootstrap with CSS only! Passing it by to my students!!

[@TaniaaatBeam]

and some techniques on working with colors in CSS! amazing!

[@VampyCrafts]

Hello, thank you for the great tutorial. I did everything exactly as described and it works on my local host but as soon as I upload it on the web host my primary colors return back to default. :/

[@VampyCrafts]

nvm I think I fixed it.. I had bootstrap css file linked to my site and it appears it was overriding the custom css file.

[@CoderFoundry]

Glad it worked out.

[@LegionLeague]

Thanks for the video! I don't see the link to repo though.

[@CoderFoundry]

Added to description: github.com/CoderFoundry/BootstrapCSSVariables

[@lxc3909]

@Coder Foundry, I thought you were going to use CSS hwb() to make your darker orange. ...Great video, thanks!

[@CoderFoundry]

Thanks

[@mikeswheels]

Pro tip at 2:45 saved my bacon troublshooting that Bootstrapm uses `--bg-primary-rgb` for `--bg-primary`

[@enriquesneffels3053]

am I forced to use Bootstrap and blazer, and tailwind if I want to be a C#? can I use VIM as my text editor? could I use MySQL or HarperDB instead of SQL Lite? I want to learn C#, but I don't want to learn stuff I don't need like bootstrap. I know CSS quite well, and I'm not willing to waste time on Bootstrap or Tailwind, and I have other preferences that are not part of microsoft.

[@CoderFoundry]

You can use whatever css Framework you want. Any scaffolding views do use bootstrap but you can easily change it.

[@CoderFoundry]

You can use any db system you want.

[@CoderFoundry]

I reccomend visual studio over vim for coding c#. The experience is gonna be superior.

[@enriquesneffels3053]

@@CoderFoundry thanks for the answers. That's what I needed to hear. I'll take your bootcamp as soon as I finish with Javascript...

[@EricaEchos]

Seems like this amounts to little more than a massive amount of code bloat. Forgetting for a moment that all those border states Bootstrap uses on buttons are basically pointless (they add nothing of value to the UX) I fail to see how adding variables is any different from simply creating a custom button class with the colors defined directly.

[@CoderFoundry]

If you are using bootstrap, this allows you to theme the components from a css file. It's a big deal if you use bootstrap. Bootstrap is opt in you don't have to use every component and every style. So if you don't like the buttons, you can build your own with css for sure.

[@EricaEchos]

@@CoderFoundry Doesn't Bootstrap + Sass already allow you to do this? How much do we trade off code bloat for convenience?

[@justasydefix6251]

​​​​@@EricaEchos web development is the most bloated experience you can ever get. I am still not used to the amount of packages we install to write few dozen lines of code in addition to the sheer amount of boilerplate code. I am glad that we are increasingly focusing on lightweight again. But yes, we will still use wordpress, npm packages, and all the bloated stuff we like in the foreseeable future.

[@EricaEchos]

@@justasydefix6251 True, but once you know HTML and CSS, you can design extremely lean web pages simply by writing code in an ordinary text editor. Bootstrap makes building responsive websites much faster without TOO much of a code-bloat trade-off. That's why it's so popular. I hate WordPress, and avoid it at all costs.

[@liquidcode1704]

Bootstrap is GARBAGE. Tailwind is beautiful.

[@fonziefonzarelli8049]

Whats wrong with Bootstrap? Seems like you're making a statement based on whats trendy and not on whats being widely used.

[@CoderFoundry]

That's an opinion. You can say that you do like tailwind but bootstrap objectively is not garbage. It's the most widely adopted css framework in the industry and actively supported by twitter. As seen by the latest release.

[@liquidcode1704]

I have literally never met one developer who I've gotten to try Tailwind, who didn't agree that bootstrap was total fkn garbage after trying Tailwind. And no I'm not being trendy, and I don't care about other people's opinion, you can think whatever you'd like, it's cool. Stating my experience and the experience of other people I know

[@EricaEchos]

Tailwind is just inline CSS reimagined. Nobody wants to scroll horizontally through 40 utility classes when they want to edit a page element. HTML describes the layout. CSS styles the page. You should avoid combining the two as much as possible. Even Bootstrap utility classes should be used as little as possible.

[@iorbita]

Thanks very much for this tutorial, very useful

[@CoderFoundry]

Glad it helped