What is Bootstrap? Why use it?

 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">

            Password</label>

        <input type="password" id="passwordField">

    </div>

    <div>

        <button type="submit">

            Login</button>

    </div>

</form>

This is what plain HTML is capable of:-

Now, let's try to make the Login button a little bit prettier through CSS:- 

.button {

    color: #fff;

    background-color: #007bff;

    border-color: #007bff;

    display: inline-block;

    font-weight: 400;

    text-align: center;

    vertical-align: middle;

    padding: .375rem .75rem;

    border-radius: .25rem;

}

This is what the above lines of CSS does to our Login button:-

Now, let's try to visualize a real-world webpage. Let's take the Facebook login page for example:-

Try to notice all the stylings in each and every text, buttons, and other elements. Needless to say, an attempt to replicate this page just with HTML and CSS is going to be so cumbersome. And let's keep in mind this is just 1 page. A website is almost always a combination of several more complex pages.

Now, to make things simpler for us, some people decided to do the hard work and wrote the CSS codes for the most common styling patterns- things that are frequently used in almost all of the websites such as forms, buttons, text, etc.

For example- in the above attempt of styling the Login button, suppose all the CSS was written by someone else and they provided us the class "button" to use directly in our HTML to have the same stylings.

This is what a framework is! It contains solutions of many general requirements and makes those solutions available to be used directly.

<form>

    <div>

        <label for="emailField">

            Email address</label>

        <input type="email" id="emailField">

    </div>

    <div>

        <label for="passwordField">

            Password</label>

        <input type="password" id="passwordField">

    </div>

    <div>

        <button type="submit" class="btn btn-primary">

            Login</button>

    </div>

</form>

The above HTML code with two bootstrap classes- "btn" and "btn-primary" transforms completely how our Login button looks and most importantly without having to write a single line of CSS ourselves.

As a final illustration, this is what Bootstrap can do to our login form:-

Thus, Bootstrap provides us many ready-made things. Moreover, we always have a choice to override the solutions provided by them to suit our own specific needs. Advantages? Saves a lot of time and effort on repetitive tasks. And that's the difference between a language and a framework. In this particular scenario, CSS is a language and Bootstrap is its framework.

The next obvious question is how to know which solutions are already implemented by Bootstrap and how to leverage them?

The answer is- The Official Documentation!

The official documentation of any technology is usually the most exhaustive list of things the technology can do. So, learning to read the documentation and referring to it again and again whenever necessary is a great habit to develop.

Here's the link to the official documentation for Bootstrap 4.1-

https://getbootstrap.com/docs/4.1/getting-started/introduction/