The goal of this project is to apply default variables to Bootstrap based on the guidelines from the Microsoft Fluent Web project. It does not attempt to make Bootstrap look like a clone of the Fluent project. The changes are very lightweight, should allow you to adjust them easily, and not prevent you from upgrading to newer versions of Bootstrap.
Other projects like WinStrap and Fluent Design from MDB have gone much deeper into making a Fluent clone but projects like these tend to get left behind and stuck on a particular version of Bootstrap because of this. WinStrap is set to Bootstrap 3.3.7 with Windows 8 guidelines and MDB is set to 4.0.0 with older Windows 10 based guidelines.
You can read the original blog post, Fluent UI for Bootstrap, here.
Copy the three Bootstrap based SASS files into your project and compile them.
- light.scss - contains base variables.
- dark.scss - builds upon the light.scss file and renders a dark theme. You don't need this one if you are going for a light theme.
- bootstrap.scss - set the above theme to the one you want and update the bootstrap target path.
-
Bootstrap's greys have been mapped to Fluent UI's Neutrals.
-
Bootstrap's base colors have been mapped to Fluent UI's Shared.
-
Bootstrap's primary colors have been mapped to Fluent UI's Messaging.
-
Bootstrap's shadows and radius have been mapped to Fluent UI's Elevation.
-
Bootstrap's grid breakpoints have been mapped to Fluent UI's Layout.
-
Bootstrap's typography has been mapped to Fluent UI's Typography.
-
The Dark theme colors are based on Darkly settings from Bootswatch.
The FluentBootstrap project is a sample project based on ASP.NET Core that uses these SASS files. It contains a default page like the ones from the Bootswatch project for testing changes.
A special thanks to all the Bootstrap, Fluent UI and Bootswatch contributors for making this possible.