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→