Lacing Up My Bootstrap

Background

As some of you may know, I started a new job late 2019. Part of that new job meant learning technologies that was far different than what I was used to.

This was a opportunity that I was looking forward to as it would expand my skill set and also give me something to share here with you. Some of the languages or frameworks that I have had to learn include ASP.Net Core MVC, Telerik, and Bootstrap.

I was already familiar with Bootstrap as some of the websites that I maintain use it. However, I did not have a deep knowledge of it because the websites I maintain used Bootstrap themes that were already built.

To become more familiar with the framework, I decided to redesign my website to use Bootstrap. Think of it as a personal coding boot camp.

I have outlined the steps I followed to get Bootstrap integrated on my website and working.

1) Find A Template

My first step was to go to the Bootstrap website to find an example template and to get documentation. From there, I was able to download the source code for the templates that are provided.

The templates are very basic and they work right out of the box.

2) Integrating MkDocs Variables

Integrating the variable names was rather easy. The MkDocs variable names and creating your own template steps are available on the MkDocs website.

There are some variables that are not listed on the website, but are used in themes that have been created by other users. What I did was to view those themes and take snippets of the code from those themes to use in my theme.

From there, I was able to adapt the snippets to my theme.

When putting in the MkDocs variables, I recommend that you run the MkDocs server. When running the server, every time that you save a file, the page will refresh.

When you code the variables, if you were to mistype a variable or enter in the wrong syntax, you will immediately see it as the page will refresh and show a white screen.

If you check the log or terminal output, you will see what line that the error exists on in the stack trace. It may even mention the exact character that has caused the problem, as it did in some of my cases.

3) Source The Documentation

Use CDN for Files

The templates come with links to the CSS (Cascading Style Sheets) and JS (JavaScript) files to reference a file that is on your website. However, I did not want to add more files than necessary to my code base.

Using a CDN (Content Delivery Network) means that the files will load faster on the users' device because they are coming from a server that is closest to the user instead of the the server that your website is hosted at.

Bootstrap provides the HTML to include in your page to link to CDN networks for CSS and JS files. This means that you do not have to maintain these additional files unless you choose to.

There are two different versions of the files that are available. The provided HTML includes links to the minified files. Minified files have the white space and new line characters removed from the file so that the file size will be smaller.

Class Names

The documentation on the Bootstrap and W3Schools websites were helpful in finding out the class names to use. Some of the items, I was not finding what I was looking for so I did a internet search that would direct me to a blog post or Stack Overflow with the answer.

Since I did not know the class names immediately off the top of my head, for some of the items, I would do inline styles with the style attribute. Then once I got the element to look the way that I wanted to, I would then find the classes that would give the same appearance.

After understanding what the classes did, I began to remember some of them and would have to refer to the documentation less.

Some of the class names have changed from Bootstrap 3 to Bootstrap 4. That means some of the posts that I would find on Stack Overflow and other websites were outdated because they were based on the Bootstrap 3 version.

Thus when doing searches for recommendations on how to get an element to do something, I had to make sure that I included "Bootstrap 4" in my search query.

So if you search and find the answer to your problem, and you use the class names that are provided and they do not change the output, then check to see if those class names apply for the Bootstrap version that you are using in your project.

4) Boostrap Icons

Using Bootstrap Icons is not a requirement but I wanted some additional flair on my blog.

Bootstrap has many icons that you can use on your website to enhance it. Some are available for free, but others require that you pay for a subscription to gain access. I opted for the free version.

Boostrap Icons also has a CDN. The code to include on your website or project is available on the Bootstrap Icons website.

By adding some code like

<i class="bi bi-search"></i>

will place the search icon next to the element that you place it to. An example of this would be the search icon next to the search link in the footer of the page.

5) Additional Style Sheets

There were some attributes that I wanted to override the Bootstrap defaults for. So I created my own stylesheet with custom classes to make these adjustments.

There's nothing wrong with creating additional stylesheets. If you choose to have a local copy of the Bootstrap CSS instead of using one from a CDN, I would not recommend editing it.

The reason being is that if you upgrade to a later Bootstrap version, you will have to copy out your customizations to the new version. It is far easier to have those customizations in a different file as it will be less maintenance later on.

Minified File

The custom stylesheet that I created does not have much styling in it. However, I did choose to minify the file.

Will this have much improvement in page load speed? Probably not right now. If the file were to grow, then it may have an impact.

6) Images

Some of the images that I have on my blog were in high resolution.

The higher resolution images would extend beyond the div that they were located in. That made the page looked improper due to the oversized images.

The fixes that I ran across was to add a class to each image to make it responsive. I did not want to do that as the image tag is generated by MkDocs.

When looking through another MkDocs theme, I found the following and added it to my custom CSS file.

img {
    max-width: 100%;
    height: auto;
}

The above code will make sure that all images do not exceed the maximum width of the div that they are contained in. Also, the height of the image will resize based upon the width so that the image is not stretched or skewed.

7) Google Custom Search Engine

This is not related to getting Bootstrap setup on your website. However, as part the conversion, I implemented this functionality to my website.

I decided to use the Google Custom Search Engine for my site instead of the built in search engine with MkDocs.

One of the main reasons is how the search results are presented in MkDocs and that depending on what words you put in, you may or may not get what you expect in the result set.

In addition, Google crawls my site just about weekly, so it would have the latest and best results to present to the user.

Conclusion

I have learned a lot about Bootstrap by converting my website to it. This approach of doing a custom theme and redesign of my website, did help me learn more of Bootstrap.

I will admit that I do not know how to do everything with Bootstrap, but I do know where to look for the answers to the things that I do not know and that I am better prepared for my project at work.

Issue #71 on my website repository was opened for this conversion. You can take a look at my repository and the commits that were made for this conversion.