Introduction to Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compatibility issue. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).

Reason to choose Bootstrap:

·       Faster and Easier Web-Development.

·       It creates Platform-independent web-pages.

·       It creates Responsive Web-pages.

·       It’s designed to be responsive to mobile devices too.

·       It’s Free! Available on www.getbootstrap.com

·       You can quickly create multi-column layout with pre-defined classes.

·       You can quickly create different types of form layouts.

·       You can quickly create different variation of navigation bar.

·       You can easily create components like accordions, modals, etc. without writing any JS code.

·       You can easily create dynamic tabs to manage large amount of content.

·       You can easily create tooltips and popovers to show hint text.

·       You can easily create carousel or image slider to showcase your content.

·       You can quickly create different types of alert boxes. 

 

History of Bootstrap

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub.

Advantages of Using Bootstrap

If you have had some experience with any front-end framework, you might be wondering what makes Bootstrap so special. Here are some advantages why one should opt for Bootstrap framework:

• Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design templates and classes and concentrate on other development work.
• Responsive features — Using Bootstrap you can easily create responsive websites that appear more appropriately on different devices and screen resolutions without any change in markup.
• Consistent design — All Bootstrap components share the same design templates and styles through a central library, so the design and layout of your web pages will be consistent.
• Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML, CSS and JavaScript can start development with Bootstrap.
• Compatible with browsers — Bootstrap is created with modern web browsers in mind and it is compatible with all modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
• Open Source — And the best part is, it is completely free to download and use.

Websites that were built with a lot of CSS and JavaScript can now be built with a few lines of code using Bootstrap. Bootstrap comprises of mainly three components:

·       CSS

·       Fonts

·       Javascript

How to use Bootstrap 4 in a Webpage

There are two ways to include Bootstrap in the website.

• Include Bootstrap from CDN link.
• Download Bootstrap from getbootstrap.com and use it.

Bootstrap Grid System

Bootstrap grid system provides the quick and convenient way to create responsive website layouts. The latest Bootstrap 4 version introduces the new mobile-first flexbox grid system that appropriately scales up to 12 columns as the device or viewport size increases.

The Bootstrap Grid System Has 3 Main Parts: CRC

When working with the Bootstrap 12 column grid you have to keep in mind the order of elements and that there are always three parts: a Container, a Row, and any number of Columns. CRC.

 

For example:

table > tr > td is like .container > .row > .col-sm-6

Container – .container or .container-fluid

This is the parent container that determines if the columns should be full-width or not.

Row – .row

A horizontal wrapping container for the series of columns it contains. It essentially clears the floated columns

Column – .col-*-*

A column is a vertical division similar to a table cell. This is where your content goes and has built-in margin to the left and right to prevent text and images from touching each other. The default grid uses floating divs to achieve the horizontal columns.

 

Bootstrap 5 Breakpoints

Columns also have grid tiers which tell the columns how they should look at different breakpoints. In the example below I used .col-sm-6 which essentially says, “When the browser window is 576px or higher make this column span 6 of the 12 columns. For anything below 576px make it full width.” So when you declare a grid tier you are saying make it this size for the specified tier and up.

Bootstrap 4 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the .col-* classes to create grid columns for extra small devices mobile phones in portrait mode, similarly you can use the .col-sm-* classes to create grid columns for small screen devices like mobile phone in landscape mode, the .col-md-* classes for medium screen devices like tablets, the .col-lg-* classes for large devices like desktops, and the .col-xl-* classes for extra large desktop screens.

The following table summarizes some of the key features of the new grid system.

 

Above table demonstrates one important thing, applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium, large and extra large devices having screen width greater than or equal to 540px, if a .col-md-*, .col-lg-* or .col-xl-* class is not present. Similarly, the .col-md-* class will not only affect the styling of elements on medium devices, but also on large and extra large devices if a .col-lg-* or .col-xl- class is not present.

Now the question arises how to create rows and columns using this 12 column responsive grid system. The answer is pretty simple, at first create a container that acts as a wrapper for your rows and columns using the .container class, after that create rows inside the container using the .row class, and to create columns inside any row you can use the .col-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* classes. The columns are actual content area where we will place our contents. Let's put all these things into real action. Let's see how it actually works:

Bootstrap Containers

In bootstrap, container is used to set the content’s margin. It contains row elements and the row elements are container of columns. This is known as grid system.

There are two container classes in bootstrap:

1.    .container

2.    .container-fluid

 

Let’s look at each of the above two class in details with examples:

·       .container: The .container class provides a responsive fixed width container.

In the below example, the div with class “container” will have a fixed left and right margin and will not take the complete width of it’s parent or the viewport.

 

<!-- Bootstrap container class -->

<html>

<head>

  <title>Bootstrap Container Example</title>

  <!-- Add Bootstrap Links -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/

   bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

</script>

</head>

<body>

    <!-- Since we are using the class container, the below

        div will not take complete width of it's parent. -->

    <div class="container bg-success text-light" >

      <h1>Beta-Labs</h1>

      <p>Complete Tutorial for Web Developers</p> 

    </div>

</body>

</html>

       .container-fluid: The .container-fluid class provides a full-width container which spans the

entire width of the viewport.

In the below example, the div with class “container-fluid” will take-up the complete width of the viewport and will expand or shrink when ever the viewport is resized.

<!-- Bootstrap container-fluid class -->

<html>

<head>

  <title>Bootstrap Container Example</title>

  <!-- Add Bootstrap Links -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/

    css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

  </script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

  </script>

</head>

<body>

   <!-- Since we are using the class container, the below

        div will not take complete width of it's parent. -->

        <div class="container-fluid bg-success text-light" >

            <h1>Beta-Labs</h1>

            <p>Complete Tutorial for Web Developers</p> 

        </div>

</body>

</html>

Introduction to JQuery

HTML, CSS, and JavaScript are the three fundamental languages of the web. We structure our websites with HTML, style them with CSS, and add interactive functionality with JavaScript. In fact, most animations and any action that happens as a result of a user clicking, hovering, or scrolling are constructed with JavaScript.

jQuery is the “Write Less, Do More” JavaScript library. It is not a programming language, but rather a tool used to make writing common JavaScript tasks more concise. jQuery has the added benefit of being cross-browser compatible, meaning you can be certain the output of your code will render as intended in any modern

What is jQuery?

• jQuery is a fast, small, lightweight, and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like DOM traversal and manipulation, event handling, animation, and Ajax much simpler. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. As of May 2019, jQuery was used by 73% of the 10 million most popular websites.
• jQuery was created by John Resig in 2006 with the motto “Write less, do more”.
• The main purpose of jQuery is to make JavaScript faster, easier, more concise, more effective, and more attractive. jQuery helps the developers to make websites more dynamic and interactive with jQuery.
• jQuery takes a lot of common functionalities of Vanilla JavaScript which required many lines of code and wraps them into pre-defined and built-in methods which you can call in a single line of code in jQuery. 

Why jQuery?

jQuery Syntax is designed to make it easier to achieve a wide collection of functionalities. Let us now see one by one, why we should learn jQuery and use it over vanilla JavaScript.

1. LIGHT-WEIGHT: jQuery is a very lightweight library of JavaScript. Its minified file is just about 19 kB.
2. SHORT SELECTORS: jQuery provides us a shorter syntax to select any element of our DOM (Document Object Model). Thus, using jQuery, we can easily target any of the DOM elements
3. DOM MANIPULATION: jQuery makes the DOM manipulating really with short and simple syntax by its selector engine named Sizzle.
4. DOM TRAVERSING: jQuery provides us built-in and predefined keywords to traverse through the DOM, which is really hassle-free for the developers.
5. EVENT HANDLING: jQuery provides us an extremely easy and elegant way to Handle any keyboard or mouse event in our web application such as clicking on a button or pressing the enter key or firing the blur event.
6. AJAX SUPPORT: jQuery helps us to develop dynamic and interactive web applications with the latest AJAX technology. AJAX calling with jQuery is much easier than vanilla JavaScript.
7. ANIMATION: jQuery has a sea of built-in animation effects that can provide your website an elegant look.
8. PLUG-INS: jQuery provides a lot of plug-ins to use in our web applications to make high-level effects, advanced and themeable widgets
9. CROSS-BROWSER SUPPORT: JQuery has cross-browser support, works efficiently in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome, and Opera 9.0+ browser.

jQuery History

jQuery was first released in January 2006 by John Resig at BarCamp NYC. It is currently headed by Timmy Wilson and maintained by a team of developers.

Nowadays, jQuery is widely used technology. Most of the websites are using jQuery. So, you can say that out of the lot of JavaScript frameworks, jQuery is the most popular and the most extendable. Many of the biggest companies on the web use jQuery.

Some of these companies are:

• Microsoft
• Google
• IBM
• Netflix

 

JQuery Prerequisite

It is always advised to a fresher to learn the basics of web designing before starting to learn jQuery. He should learn HTML, CSS and JavaScript first. But, if you belong to a technical background, it is up to you.

If you are a fresher and want to study these subjects first.

 

How to use jQuery?

There are two ways to use jQuery.

• Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
• CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

Local Installation

Go to the https://jquery.com/download/ to download the latest version available.

Now put downloaded jquery-3.6.0.js file in a directory of your website, e.g. /jQquery.

Example

Now you can include jQuery library in your HTML file as follows −

<html>

  <head>

    <title>The jQuery Example</title>

    <script type="text/javascript" src="./jquery/jquery-3.6.0.js"></script>

    <script type="text/javascript">

      $(document).ready(function () {

        document.write("Hello, World!");

      });

    </script>

  </head>

  <body>

    <h1>Hello</h1>

  </body>

</html>

This will produce following result −

CDN Based Version

You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.

We are using Google CDN version of the library throughout this tutorial.

Example

Now let us rewrite above example using jQuery library from Google CDN. 

<html>

  <head>

    <title>The jQuery Example</title>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script type="text/javascript">

      $(document).ready(function () {

        document.write("Hello, World!");

      });

    </script>

  </head>

  <body>

    <h1>Hello</h1>

  </body>

</html>

This will produce following result −

HTML Crud with FireBase

Source Code:  https://github.com/pankkap/CRUD_Firebase

Working App: https://pankkap.github.io/CRUD_Firebase/