Creating a Log-in Screen Interface using Bootstrap

Back-End Dev Note September 27, 2022

Hi everyone! I am Patrick, a PHP Web Developer intern here in Commude Philippines Inc. I am currently studying my Bachelor’s Degree in Information Technology at Rizal Technological University. I used to work and study front-end technologies such as ReactJS and Bootstrap before getting into Commude. I am still working as a part-time front-end developer in an agency. Moving on, I want to introduce to you one of the technologies that helped me in my front-end journey as well as during my training as a back-end developer.


Working with Laravel in the back-end, I needed to focus on the actual back-end code. The problem with this is that of course you still need the front-end so that you can see the output of your back-end code. So basically, you still need to actually get your hands dirty with HTML, CSS and JavaScript and other front-end technologies but… there’s a front-end framework that can handle all that work for you, so that you can focus more on the back-end side of things instead.


Let me introduce to you, Bootstrap. Bootstrap is a front-end framework for CSS that is made by the people at Twitter. They aim to make the designing phase of your website much easier. Utilizing pre-made designs that you can use depending on what you need. Let me show you how bootstrap differs with your vanilla CSS. Let’s design a button similar to the picture below.




HTML with Vanilla CSS:







As you can see, bootstrap makes it easier to design parts of your website without needing to worry too much about sizes, colors and even defining borders. There are lots of designs ready to be used that can be found in the Bootstrap’s documentation. Now that I have showed you how easy it is to use Bootstrap 5, let us try creating a login screen using Bootstrap! But first, we need to link Bootstrap’s CDN in our head tag. It’s just like linking your external CSS file.




Now, we are ready to proceed with creating our login screen. Don’t worry if you forget what class you need to add inside your tags. Bootstrap has you covered! You can check their documentation at their website and find everything that you need. Here is the link for your reference:



Here is our code:




And here is our output:




As a final conclusion, Bootstrap makes designing easier due to its nature of pre-made code designs that are ready to be accessed just by adding classes. It is great to use it in making websites when you are in a hurry or if you just need a front-end design that doesn’t hurt the eyes, but takes little to no-time to work with. Bootstrap can be fun to work, but the only down side for me is that after creating a lot websites with Bootstrap, it is sometimes not that engaging, especially if you like to code your own designs. As time goes on and you build more projects, you start to see that all of your websites made from Bootstrap share a lot of similarities in design. Nonetheless, it is still a fun tool to play with especially when you are in a hurry to create the front-end part of your website.