Here's A Cheatsheet To Better Coding

23 Feb 2023

Screenshot 2023-02-23 at 11 14 51 PM

Let’s Talk About Bootstrap 5

What even is Bootstrap 5? Bootstrap 5 is arguably the most popular free and open-source CSS framework for developing websites and apps. It includes HTML, JavaScript, and CSS. Typically, you can strictly use HTML and CSS to create a website, however, to make your life easier, it is highly advised to use Bootstrap 5. The difference between using Bootstrap 5 and only using HTML + CSS is that one will look much, much more appealing. With Bootstrap 5, you can add frames, create dropdown menus, menu buttons, icons, and much more. It is what makes a website so easy to use and it will attract more customers as well, due to the simplicity and looks. In my personal opinion, this is what a corporate or any big-name brands should already have implemented in their websites.

To also note, if you take a look at the image above, it was created using Bootstrap 5. By using Bootstrap 5, we were able to include social media icons, create a menu of the navigation bar when the page is minimized, and much more. The code provided below shows how the social media icons were implemented and how the menu (or nav) bar was created, so that when the page is minimized and the menu button is clicked, it gives a list of the menu bar. If left unclicked, the menu bar would be minimized and left empty with only the logo on the left and a menu button on the right.

Screenshot 2023-02-23 at 11 57 22 PM

My Ups and Downs With Bootstrap 5

If I am being honest, I have a LOT more downs than ups with using Bootstrap 5, however, I still highly suggest using it. Why in the world should “I” use it then, you may be asking yourself? The endgoal and its outcome with using it is so, so much more rewarding than not using it. In my opinion, it is even incomparable. It is a complete headache (at least to me) just trying to understand my own code and remembering certain variables or icons, but that is also why I recommend using Bootstrap 5’s website as a guide. Coding with this handy thing by your side makes a huge difference, especially for learners like myself.

To navigate around this website, just simply search or browse the topic or category that you want and refer to their examples or code. For example, if I wanted to look for a menu icon, I could go on to the icon page and simply search “menu” on the filter bar. Many options will pop up and it will also give me its icon font, code point, and a copy of Bootstrap 5’s HTML code using the icon.