“You see, but do not observe.”
-Sherlock Holmes, “A Scandal in Bohemia”
Today’s focus was on (successfully!) changing the font used in Bootstrap as well as customizing the included navigation bar. On my journey to solve the later, I found a number of interesting resources as per usual.
The first was this Themes.Guide “How to Customize Bootstrap“. Even though it didn’t help me find my solution, it was helpful to find some alternate ways to change CSS and SASS files. My second result, Koding Made Simple’s “How to Easily Add Custom CSS to Bootstrap with Examples” showed me the correct hierachy to include Bootstrap and custom CSS files, but it still didn’t show me how to change the font. My third resource, Mad Dog Tutorials’ “Bootstrap for Beginners 6 – Adding and Custom Web Fonts and Improving the Layout” gave me a hint but it didn’t hit me until I hit my final MVP resource. System 22 I.T. Solutions’ “Bootstrap 4 Using Google Fonts” made me realize I had to move the given Google Font attributes into the specific tags that required the fonts (i.e. <body> as used in the video, <h1>, etc.). I had previously included it in the HTML CSS attribute before including Bootstrap which had worked fine earlier.
My second goal was trying different stylistic approaches to the navbar. I decided to try an example given on Bootstrap’s Navbar article of including an image as the placeholder for the home hyperlink. I need to see if I can move its placement a bit more but this will be looked at when I return to this project.
Photo by StockSnap on Pixabay.