Harshit's Blog

To put it simply- a responsive web page is a page that responds differently to different screen sizes such as desktops, laptops, tablets, mobile phones, etc. If you have created a web page on let's say your laptop and haven't focused on making it responsive, there is a high chance when you open the same webpage on your mobile phone it is going to look really bad. The reason for this is simple- the HTML elements that make up your webpage will no longer get enough space to render on a smaller screen size (a mobile phone) as they were getting earlier. Before we move on to how to do it, let's look at some advantages of it- The first one is obvious, a responsive web page will be easily readable by a larger group of users as they can be accessing your website on any kind of device. The second one is a little bit more interesting and has something to do with SEO (Search Engine Optimization). When we do a Google search for something, Google (or any search engine) runs an algorithm ...

 I don't want to go through every single detail of what Bootstrap Grid System can do because there is a lot and as I mentioned in the last part of  What is Bootstrap? Why use it?  the best way to know a tech in detail is to go through their documentation again and again. However, I do want to share some fundamentals to get a working knowledge of the Grid System. Bootstrap Grid System assumes 12 equal divisions of any screen. So, whatever device you have been using be it a mobile phone, tablet, laptop, or desktop. The total screen width has been split into 12 equal parts. Now, out of these 12 divisions, any number of divisions ranging from 1-12 can be applied to different HTML elements. The higher the number, the more width that particular element takes on the screen. Let's write this simple piece of code:- < div   class = "row mt-4 text-center" >      < div   class = "col-12 border bg-info py-4" >  ...

  Prerequisites- Basic HTML and CSS   Long story short- Bootstrap is a CSS framework. What's a framework? Now, this is something that most of us usually not have a clear understanding about. We often misunderstand 'language' with a 'framework'. However, there's a difference. Let's try to understand it through an example. Let's try to design a very simple login page with HTML and CSS. < form >      < div >          < label   for = "emailField" >             Email address </ label >          < input   type = "email"   id = "emailField" >      </ div >      < div >          < label   for = "passwordField" >           ...