I have been learning both Material for MkDocs and Bootstrap 5 in unison. One day, I said, "Self, how come you can't take all of the features of Bootstrap 5 and make them available within Materials for Mkdocs?" So reading the documentation of Mkdocs and Material for Mkdocs and a few intelligent people's responses from Stackoverflow, I came up with this . . .
site_name: Discipleship28GO
site_url: https://discipleship28GO
nav:
- Home: index.md
- "Study Toolsets": studytoolsets.md
- About: about.md
theme:
name: material
custom_dir: overrides
palette:
primary: deep purple
scheme: slate
markdown_extensions:
- attr_list
- md_in_html
plugins:
- glightbox
extra_css:
- stylesheets/extra.css
extra_javascript:
- javascripts/extra.js
Notice under theme you see
palette:
primary: deep purple
scheme: slate
Where scheme: slate gives you a nice grayish feel with the purple menu color.
So doing some more searching, I found that you could put a CDN link in the mkdocs.yml file as such:
extra_css:
- stylesheets/extra.css
- https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
extra_javascript:
- javascripts/extra.js
- https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js
Thus here is the PROBLEM! The Bootstrap 5 CDN links OVERRIDE the Mkdocs-Materials theme settings as seen here,
I am sure that I can pick through some post and play around to stablize the Mkdocs-Materials theme to NOT be overrided, but my question is, has anyone figured out how to inject Bootstrap 5 cleanly and easily?
