Extending Bootstrap 4.0 Beta 3

I have been experimenting with Bootstrap 4.0 Beta 2 and there seems to have been a lot of questions on how to extend this new version.  While this may not be final or the only way to do it – this is what I have come up with so far.  Here we will set up _custom_variables.scss and _custom_mixns.scss files that modify or extend the default Bootstrap and then use these variables and functionality within our own styles.scss file.  I will show you how to modify default Bootstrap variables such as $blue, and add a new custom color which will not only be reflected in our custom Bootstrap, but then can also be accessed from our own styles.scss file.  In addition we will create a mixin to create a gradient for the background.  Finally we will add a new size variable that we will then be able to access in our styles.scss file.  What we will ultimately end up with is something that looks like the graphic above.Continue reading

Customizing Bootstrap 4.0 Beta 2 – Overriding Default Theme Colors

I’m currently working to get up to speed on the latest version of Bootstrap which is currently Bootstrap 4.0.0 Beta-2 and I don’t want to use their predefined colors – such as “blue” for primary, “gray” for secondary, etc. I wanted to be able to customize the color scheme.   Finding out how to exactly do this wasn’t the easiest thing.  It seems there are a lot of pieces out there, but nothing that defines exactly how to do it.  What also made it difficult was the fact that this is just Beta and so there have been changes. The way to customize the theme in Bootstrap 4.0 Alpha is completely different in Beta. After trial and error it seems I got it to work properly.Continue reading