Bootstrap

Introduction

Bootstrap is an intuitive and open-source framework that makes front-end development of Web applications simpler as well as quicker. So, it is also known as the front-end framework. Primarily, Bootstrap aims to make responsive Web applications as well as Websites. In fact, it is presently the most popular CSS framework for building responsive Websites.

The framework encompasses JavaScript, CSS, and HTML for developing custom components while designing Webpages. Developed by the Twitter team, Bootstrap also supports HTML5 and CSS3. It includes a free set of tools for creating Web applications and Websites.

Bootstrap consists of CSS and HTML based templates for designing a variety of components such as forms, layout, navigation, and even JavaScript extensions. It also includes a set of defined CSS classes that Web developers can use directly. The framework also uses JavaScript/Query framework for creating effects, styles, and actions for its components. In short, bootstrap is a CSS framework, a templating system, and a JavaScript toolkit.

Web developers use CSS for applying styles to the elements of a Webpage by creating as well as assigning classes to these elements. However, Bootstrap automates this styling task by facilitating a developer to include the Bootstrap files and state the predefined class names for the elements. This also eliminates the need of writing custom CSS classes for styling the elements. Thus, Bootstrap saves a lot of time while designing Webpages.

Benefits of Bootstrap

There are many reasons why Web designers and developers prefer Bootstrap. Following are these reasons:

• Easy and Flexible Enough to Get Started: Using Bootstrap is extremely easy, adaptable, and quick. Web developers can use it along with CSS, dynamic stylesheet language (Less), or Syntactically Awesome Style Sheets (Sass). Both Less and Sass are style sheet languages. While Less is compiled into CSS, Sass is interpreted into CSS. Further, there are different ways of adding Bootstrap to a Web project, which shows its flexibility.
  
  
• 100% Responsive Designs: A Website should be responsive to each Internet-enabled device. For example, it should adapt to the screen of a smartphone or tablet without compromising its smooth appearance and pleasant navigation. This is exactly what Bootstrap ensures through its fluid grid layout that readjusts itself dynamically to the screen resolution. The ready-made Bootstrap classes enable identifying the number of spots in the grid that each column should use. This helps in identifying points at which the columns should load horizontally rather than vertically for displaying the requested page accurately on the targeted smartphone. Bootstrap 3 comes with the mobile-first approach by offering mobile-first styles.
  
  
• Great Grid System: Bootstrap implements a 12-column, responsive grid that supports offset and nested elements.
  
  
• Better Development Speed: Rather than coding from scratch, Bootstrap allows using readymade blocks of code for designing a Webpage. Merging these blocks with the code for cross-browser compatibility and CSS-Less functionality can save several hours of coding. Even for backend developers who need to do some user interface modifications, Bootstrap is efficient.
  
  
• Browser Compatibility: Bootstrap resolves several cross-browser compatibility issues. This means a Web application made using Bootstrap runs smoothly in Chrome, Safari, Internet Explorer, and Firefox.
  
• Customization: It is possible to use Bootstrap as per the distinct design requirements. Web developers can select the required aspects by ticking off those that are not required. These aspects are available on the Bootstrap customize page, which includes common CSS, components, JavaScript components, and utilities. This is the custom version of Bootstrap, which is ready for download.
  
  
• Bundled JavaScript Components: Bootstrap comes with a set of JavaScript components for using different functionalities for user interface components. A few examples of these functionalities include tooltips, alerts, and modal windows. This means that there is no need to write scripts for these functionalities.
  
  
• Simple Integration: Web developers can integrate Bootstrap with other frameworks and platforms, even for the existing Websites. Some Bootstrap elements are usable with an existing CSS.
  
  
• Extensive Pre-styled Components: Bootstrap comes with a variety of pre-styled components for drop-downs, alerts, and navbars.
  

Setting Up Bootstrap

It is easy to download, install, and set up Bootstrap for getting started. There are two ways to start using the framework on a Website, which are:

• Downloading from getboostraps.com
• including ito Content Delivery Network(CDN)

Downloading from GetBootstrap.com

The framework’s latest version, 5.3.3, is available at getbootstrap.com

The Download page displays the following options, which are the different ways of downloading the framework:

• Download Bootstrap: Enables downloading the precompiled, mini versions of Bootstrap CSS, fonts, and JavaScript. It does not provide original files of source code or documentation. The precompiled one facilitates drag-n-drop usage in any project. It includes the compiled CSS and JS files, minified compiled versions of each, optional Bootstrap theme, and Glyphicon fonts.
  
  
• Download Source: Enables obtaining the latest documentation and JavaScript source code from GitHub. This is the source code version that encompasses the precompiled CSS and JS files, font files, and Bootstrap Less assets. It is a more comprehensive version with a higher learning core than the precompiled version.
  
  
• Download Sass: Enables obtaining the latest Bootstrap version imported to Sass from LESS for Sass-only projects.

Including from a CDN

Alternatively, Web developers can include Bootstrap from a CDN. This is the option for those developers who do not intend to host the framework by themselves.
Developing hesponsive Websites With Bootstrap and jQuery
A CDN, as a system of distributed servers, delivers Webpages to a user as per the geographic location of the server and the user. The closer the server, the faster is the content sent to the user.
CDN aims at accelerating the delivery of Web content for sites with global reach and high traffic. So, using Bootstrap CDN provides the benefit of faster loading time.

File Structure and Source Code in Bootstrap

After downloading the precompiled Bootstrap version, a ZIP file contains all the directories and files.
This arrangement logically clusters the common resources and offers the minified as well as the compiled variations. After extracting the ZIP file, its contents are visible in the form of structured css, js, and fonts directories.

+ -- css/

+-- bootstrap.css

+-- bootstrap.css.map

+-- bootstrap.min.css

+ -- bootstrap.min.css.map

+ -- bootstrap-theme.css

bootstrap-theme.css.map

bootstrap-theme.min.css

+-- bootstrap-theme.min.css.map

キー-j5/

1 + -- bootstrap.js

| +-- bootstrap.min.js

+- - fonts/

+- - glyphicons-halflings-regular.eot

+- - glyphicons-halflings-regular.sg

+- - glyphicons-halflings-regular.ttf

+-- glyphicons-halflings-regular.woff

+- - glyphicons-halflings-regular.woff2

These files enable a Web developer to use the desired components and plugins quickly by dragging and dropping them onto the required positions on a Webpage of any Web project. It reveals compiled CSS and JS files (bootstrap.*) along with minified and compiled CSS and JS (bootstrap.min.*). CSS source maps in the form bootstrap.*.map are available for a few browser developer tools.

The structure also includes fonts from Glyphicons and the optional Bootstrap theme. It is worth knowing that JavaScript plugins require the inclusion of jQuery.

Inside the Bootstrap File Structure

In Bootstrap, HTML, CSS, JS, and other components are grouped into categories, which are noticeable atop its documentation. Following are the categories:

• Scaffolding: Offers a basic grid structure, simple layouts, background, and link styles.
• CSS: Offers global CSS settings, advanced grid system, and styles for basic HTML elements.
• Components: Offer styles for a variety of reusable components such as alerts, tabs, page headers, and alerts.
• JavaScript Plugins: Offers custom and interactive Query plugins for components such as modals, tooltips, and popovers.

The categories of Components and JavaScript plugins together offer the following user interface elements:

• Button groups and button drop-downs
• Page headers and hero unit
• Navbar
• Navigational tabs, pills, and lists
• Labels
• Thumbnails
• Badges
• Drop-downs
• Tooltips
• Alerts
• Modals
• Progress bars

Example

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <title>Bootstrap Example</title>
</head>
<body>

  <h1>Hello,world!</h1>
  
</body>
</html

This converts the normal HTML file into a Bootstrapped one. It is essential to include the jQuery library prior to the Bootstrap library. The template also includes html5shiv.min.js and respond.min.js files for displaying HTML5 elements in Internet Explorer (IE) 8.

This HTML page is responsive, as it has the viewport meta tag in the ‹head> element. This tag takes care of rendering and touch zooming on the Internet-enabled mobile gadgets. The width property ensures that the page fits into the screen of the target device. By setting its value as device-width, the page is rendered properly across various devices such as tablets, desktops, and smartphones. The initial-scale = 1. 0 property renders the page at a 1:1 scale at the time of loading.

Output

Hello, world

MaxCDN also offers the desired JS and CSS files for working with Bootstrap. Code Snippet 1 shows the different links to be added under the head tag for using Bootstrap through

Code Snippet1:

<! -- Compiled and minified CSS --> <link rel="stylesheet"
href="https://maxcan.bootstrapcan.com/bootstrap/3.3.7/css/bootstrap.
min.css">

‹! -- Optional theme --> <link rel="stylesheet"
href="https://maxcdn.bootstrapcan.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css">

<! -- Compiled and minified juery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.j
s"></script>

<! -- Compiled and minified JavaScript --> <script src="https: //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.mi
n.js"></script>

In the snippet, the links are referring to the MaxCDN, a public distributed network hosting the desired CSS and JS files. The first link is of the compiled and minified version of CSS. The second one is optional and links to a Bootstrap theme. The third link is of the compiled and minified JS.

Code Snippet2:

Code Snippet 2:
<! DOCTYPE html>
<html lang="en" >
<head>
‹title>Bootstrap through CDN</title>
<meta charset="utf-8">
‹meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.0/jquery.min.j
s"></script>
<script
src="https://maxcan.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.mi
n.js"></script>
</ head>

In the snippet, the order of linking is important. The reference to minified version of jQuery (query.min.js) will always come before the minimized version of JS (bootstrap.min.js).

Bootstrap with CSS and JavaScript

Bootstrap is a robust front-end framework to quickly develop a functional Website. To give a unique and interactive look and feel to the site, it is essential to write JavaScript and CSS.

Using CSS

Bootstrap uses a few HTML elements and CSS properties that need the HTML5 doctype. It is essential to include it at the beginning of any Web project. Code Snippet 3 shows how to include the doctype.

Code Snippet 3

!< DOCTYPE html >
<html lang=”en”>

…

</html>

While Bootstrap 2 came with the discretionary mobile-friendly styles, Bootstrap 3 is mobile-friendly right from scratch. Rather than including the mobile styles, the version 3 framework have them right at its core. Undeniably, Bootstrap is mobile first, which means the mobile-friendly styles are present throughout the library rather than in isolated files.

For ensuring perfect rendering and zooming on touch, a Web developer should include the viewport meta tag in<head> .It is possible to disable zooming on any mobile device by including user-scalable=no to this tag. This allows users to scroll and disables zooming, which gives a feel of a native application. However, experts do not recommend disabling zooming for each site.

Bootstrap allows specifying the standard global display, link styles, and typography. These styles are present in scaffolding. less

In Bootstrap, all site contents and a grid system exist within a container, which is a containing element. There are two containers namely, fixed and fluid. They are non-nestable, which means it is not possible to include a container within another container.

Fixed Width Responsive Container

The fixed container has a preset width in pixels with respect to the whole page’s layout (viewport). It remains the same across different screens and browsers. This means that the container’s width does not change with a change in the resolution.

For example, in a viewport with a width of 960 pixels, each column has a preset width that does not change. Now, if the user shrinks the browser to 959 pixels, the container snaps to a new layout as per a media query having a maximum width of 768 px. The columns remain unchanged when the width of the browser is between 768 and 960 pixels.

Such a layout is easier to use and personalize in terms of design. It also eliminates the need to specify the minimum and maximum widths, which some browsers do not support.

To create a fixed container, a Web developer needs to use the . container class in ‹div›.

Fluid Width Responsive Container

This container spans across the width of the whole viewport. In simple words, it stretches to cover the available width for fitting to the window regardless of how wide it gets. The viewport’s width changes even if there is a smallest change in the size of the browser or screen. It continuously resizes as the browser’s width changes such that there is no additional empty space on the sides, unlike a fixed width container.

The width is usually a percentage of the window instead of fixed number of pixels. For example, with 100% layout’s width, each column adjusts its width as per the computed relative size (for instance, 25%) when the browser window resizes. Thus, fluid layouts stretch to contract as per the screen’s width.

To create a fluid container, a Web developer should use the . container-fluid class in ‹div›.

When the user resizes the browsers window, the content within the container adjusts itself while the width remains stretched across the viewport. A fluid design adjusts to the user’s screen settings.
It also eliminates the need to include a horizontal scroll bar in case of a smaller resolution of the screen, unlike a fixed width container.

It is unwise to modify the bootstrap.css file, as such a modification would invite complications while upgrading Bootstrap. Thus, the best way to edit bootstrap CSS is to make a custom css file and overwrite it whenever there is a different requirement. For example, if the default top bar is in black color but the requirement is gray color, just create a specific selector for this bar and apply the color rule. For instance, it can be <table class =”zig-zag mycustomclass”>. Declaring the custom css file just after bootstrap.css overwrites that part of code that needs a change.

Using JavaScript

Web developers can include JavaScript plugins in one of the following ways:

• Individually, using the *js files.
• All at once, using the bootstrap.js or bootstrap.min.js file, as each of them have all plugins.
  
  There are two ways of using JavaScript plugins namely, through data attributes and via JavaScript.
  
  

Data Attributes

Web developers can utilize all Bootstrap plugins via the markup Application Programming Interface (API).

This eliminates the need to write JavaScript. This is the first-class API of Bootstrap and is considered initially for using a JavaScript plugin.

In a few scenarios, it might be necessary to turn off this functionality. Code Snippet 4 shows how to disable the data attribute API.

Code Snippet 4:

$ (‘body’) .off (‘.data-api’)

The example unbinds all events on the body associated with the namespace, data-api. On the other hand, to turn the functionality off for a
specific plugin, a Web developer should include the plugin’s name before the data-api namespace. Code Snippet 5 shows how to include the alert plugin’s name before the namespace.

Code Snippet 5:

$ (‘body’). off (‘ alert.data-api’)

Now, let’s see how to use data attributes for displaying a modal. A modal is a restructured yet flexible dialog box with least required functionality and wise defaults. It is a special window that may contain a header, body, tooltip, video, and/or a popover for boosting the user experience.

• In step 6, the Open Modal button is set on the Webpage. Clicking it displays a modal window. The btn btn-info btn-1g CSS class sets the large style for this button.
• The data-toggle=”modal” data attribute is a custom HTML5 attribute that conveys Bootstrap what to do, which is to display a modal. The data-target data attribute conveys Bootstrap which element to open. In this case, it is a modal, as its value points to an element having an id attribute with value as myModal.
• In step 9, the modal fade CSS class sets the modal layout.
• In step 10, the modal-dialog class defines the dialog layout of the modal.
• In step 13, the class modal-content defines what the modal will contain.
• In step 14, the modal-header class defines the style of the modal’s header.
• In step 15, the class=”close” property defines the style of the close button in the modal window. The data-dismiss data attribute is a custom HTML5 attribute, which is specified for closing the modal window.
• In step 16, the modal-title class sets the title of the modal.
• In step 18, the modal-body Bootstrap CSS class sets the style for the modal’s body.
• Similarly in step 21, the modal-footer Bootstrap CSS class sets the style for the modal’s footer.
• In step 22, the CSS classes namely, bt and btn-default, specify the style for button in the modal’s footer.

Programmatic API

Another way to use Bootstrap plugins is via JavaScript API. Any public AP| is a single, chainable method that returns a collection. A method should receive an optional object called options, which is a string targeting a specific method. It can even receive nothing, which triggers a plugin with a default behavior. Code Snippet 6 illustrates both the statements.

Code Snippet 6:

$ (“#newModal”). modal (‘show’) // show is the string targeting the show method to display the modal dialog immediately.

$ (“#newModal”). modal () // This statement triggers Default initialization.

The only difference between modal (‘ show’) and modal () is that the former manually opens a modal. It also returns to the invoker prior to raising the relevant event, shown.bs. modal for showing the modal.

the MaxCDN links for Bootstrap contain the integrity and crossorigin attributes. Both ensure that an obtained resource was sent without unfavourable manipulation. The integrity attribute enables a browser to check the source and prevent its loading if the source is manipulated. This kind of security is essential, as the CDN is a public network on which any malicious user can manipulate the files on it. The crossorigin attribute set to anonymous conveys the browser to execute the specified CDN link without transferring the user credentials. The anonymous keyword indicates that there is no need of exchanging the credentials through HTTP authentication, security certificates, or cookies.

In the script tag, document. ready () indicates that the HTML page is ready for changes through JavaScript. Through it, JavaScript loads a modal through modal. show (), which is also invoked for closing the modal when the user clicks the Close button.

Code Snippet 7 shows how to initialize the modal plugin through the default method shown in Code
Snippet 6.

Code Snippet 7:

<script>
$(document). ready(function() {
$(“#mybtn”) . click (function() {
$(“#newmodal”) . modal ();
});

});
</script>

In this snippet, when a user clicks the button whose id is #myBt, the modal plugin is initialized by invoking its default method.

In short, there are two ways of activating a modal and other JavaScript plugins, which are as follows:

Through data attributes, wherein data-toggle=”modal” is set on the button controller and data-target=”myModal” is set to toggle a particular mod
Through JavaScript by initializing a modal with its id or invoking the show () method.

Each Bootstrap plugin also has a raw constructor, which is invoked through its Constructor property. Code Snippet 8 shows how to use this property.

Code Snippet 8:

$. fn. popover. Constructor

For retrieving a specific plugin instance, it is possible to do so directly from an element. Code Snippet 9 shows how to do so.
Code Snippet 9:

$ (‘ [rel=popover]’). data ( ‘popover’)

Events

Bootstrap offers custom events to handle most distinct actions of plugins. Usually, they are available in the infinitive and past participle form. The infinitive form is invoked in the beginning of an event, while the completion of the action triggers its past participle form. For example, the show event is triggered in the beginning, while the shown event is invoked once the action is completed.

An infinitive event comes with the preventDefault functionality for stopping the action’s execution prior to its beginning. Code Snippet 10 shows how to use this functionality.

Code Snippet 10:

S (‘#newModal’). on (‘show’, function (e)
｛
if (data) return e.preventDefault () //stops modal from display
})

Transition

Web developers should include Transition.js for applying a few basic transition effects. This is not needed if they are using the compiled bootstrap.js, as the file is already included. Transition js is a helper file that other plugins use to verify the CSS transition support. Developers can use the plugin for achieving the sliding and fading effects for modals, tabs, and alerts.

Templates in Bootstrap

A bootstrap template refers to a mock Website that is designed using the bootstrap framework. Its components are JS code, CSS code, HTML pages, fonts, and different images belonging to its design. The template is usually designed for accomplishing a purpose, which can be to have an e-commerce site, a corporate portal, a blog, or simply a vertical landing page.

As per the purpose, Web designers try to find and include all relevant templates. For instance, if templates are required for an e-commerce Website, they may find a product category page, a cart page, a contact us page, and a customer testimonial page. While there are a couple of more templates for such a Website, it is rational to pick only those that are required.

Bootstrap templates are also available in different versions. For adapting the template to the targeted site or purpose by easily changing its content, it is essential to have some basic knowledge about HTML, CSS, and JS. All Bootstrap Web templates are responsive, easy to customize, and ready-to-use. They are reusable due to which Web developers can save a lot of time in designing some of the most common Webpages.