Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

April 30, 2022

Top 20 Bootstrap Interview Questions and Answers

 

Bootstrap is a comprehensive toolkit for generating and developing web pages and applications that contains HTML, CSS, and JavaScript tools. It is a free and open-source project available on GitHub that was created by (and for) Twitter.
Bootstrap gained a lot of traction after it was made open-source in 2011, and for good reason. Because of its versatility and ease of use, Bootstrap is popular among web designers and developers. Its main benefits are that it is responsive by design, that it works with a wide range of browsers, that it uses reusable components to offer a consistent design, and that it is simple to use and comprehend. It comes with built-in support for jQuery plugins and a programmatic JavaScript API for rich extensibility via JavaScript. Any IDE or editor, as well as any server-side technology and language, can be utilized with Bootstrap.


Python Interview Questions and Answers


Ques. 1): What is Bootstrap?

Answer:
Bootstrap is a platform for web development based on a front-end framework. It is used to create exceptional responsive designs using HTML, and CSS. These templates are used for forms, tables, buttons, typography, models, tables, navigation, carousels and images. Bootstrap also has Javascript plugins, which are optional. Bootstrap is mostly preferred for developing mobile web applications.


BlockChain interview Questions and Answers


Ques. 2): What is Bootstrap and how does it work?

Answer:

Bootstrap is the most popular open source toolkit for creating mobile responsive, dynamic websites and online applications. It includes HTML, CSS, and JS-dependent templates.

Features:

  • Bootstrap increase development speed
  • Bootstrap is outfitted with a 12-column grid system and a responsive layout for
  • Bootstrap ensures consistency
  • It's future compatibility.
  • Bootstrap provides rich customization features for designing tailor-made websites.
  • Bootstrap provides various advantages of using pre-styled components.
  • Bootstrap containing a simple integration approach to integrate into specialized platforms and frameworks.
  • Bootstrap contains a big list of components needed to develop mobile responsive websites like the navigation bar, drop-down, alerts, badges, labels.
  • It reduces extra efforts of large coding


Python Pandas Interview and Questions


Ques. 3): What is included in the Bootstrap package?

Answer:

Scaffolding: Bootstrap comes with a basic structure that includes a Grid System, link styles, and a background. The section Bootstrap Basic Structure goes over this in depth.

CSS: Bootstrap includes global CSS settings, basic HTML components stylized and improved with extendable classes, and a sophisticated grid system. The section Bootstrap with CSS goes over this in depth.

Over a dozen reusable components are included in Bootstrap, including iconography, dropdowns, navigation, notifications, popovers, and more. The section Layout Components goes through this in depth.

Plugins for JavaScript: Bootstrap includes over a dozen bespoke jQuery plugins. You may easily incorporate all of them or just one at a time. The section Bootstrap Plugins goes over this in depth.

Customize: You can customize Bootstrap's components, fewer variables, and jQuery plugins to get your very own version.


Hadoop Interview Questions and Answers


Ques. 4): What are collapsing elements in Bootstrap?

Answer:

You may collapse any element with Bootstrap collapsing elements without creating any JavaScript code or accordion markup. To use collapsible elements in bootstrap, add data-toggle= "collapse" to the controller element along with a data-target or href to delegate control of a collapsible element automatically. You can also do the same thing with.collapse (options),.collapse ('display'), or.collapse ('hide').


Hyperion Interview Questions and Answers


Ques. 5): What are the advantages of Bootstrap?

Answer:

The following are some advantages of Bootstrap:

  • Bootstrap is simple to use and anyone with a basic understanding of HTML and CSS can get started.
  • Features that adapt to phones, tablets, and desktops: Bootstrap's responsive CSS adapts to phones, tablets, and desktops.
  • A mobile-first strategy: Mobile-first styles are built into the Bootstrap framework.
  • Bootstrap 4 is compatible with all modern browsers, including Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera.


Internet of Things (IOT) Interview Questions and Answers


Ques. 6): How well-versed are you in the Bootstrap Grid System?

Answer:

The Bootstrap Grid System is a responsive, mobile-first grid that scales up to 12 columns as the device or viewport size increases. The system includes predefined classes for simple layout options and powerful mix-ins for developing successful semantic layouts.

In the Bootstrap 4 grid system, there are five classes:

  • .col- for extra small devices, whose screen width is less than 576px.
  • .col-sm- small devices, whose screen width is equal to or greater than 576px.
  • .col-md- medium devices, whose screen width is equal to or greater than 768px.
  • .col-lg- large devices, whose screen width is equal to or greater than 992px.
  • .col-xl- extra large devices, whose screen width is equal to or greater than 1200px.
  • The classes listed above can be combined to build layouts that are more dynamic and adaptable.


Machine Learning Interview Questions and Answers


Ques. 7): Explain why to choose Bootstrap for building the websites?

Answer:

There are few reason why we choose Bootstrap for building websites

Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers.

Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML

Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.


MySQL Interview Questions and Answers


Ques. 8): In Bootstrap, what are Glyphicons?

Answer:

There could be more than 200 glyphicons in the glyphicons set. It serves as an icon font for our web design projects, and it may be used in buttons, navigation, forms, and buttons, among other things. Only Bootstrap projects can use Glyphicons Halflings for free; otherwise, a licence is required.

Print glyphicon and Envelope glyphicon are two examples of Glyphicon.

The syntax can be used for this Glyphicon is:

<span class="glyphicon glyphicon-name"> </span>


Data Science Interview Questions and Answers


Ques. 9): Explain what pagination in bootstrap is and how they are classified?

Answer:

Pagination is the handling of an unordered list by bootstrap. To handle pagination bootstrap provides following classes

  • .pagination: To get pagination on your page you have to add this class
  • .disabled, .active: Customize links by .disabled for unclickable links and .active to indicate the current page
  • .pagination-Ig, .pagination-sm: Use these classes to get different size item


Edge Computing Interview Questions and Answers


Ques. 10): What is the Scrollspy Bootstrap plugin?

Answer:

Scrollspy is a plugin that allows you to build auto-updating navigation plugin parameters. It allows you to use a scroll position to target certain areas of a web page. The.active class, which can be added to the navbar based scroll position, can be used to accomplish this.


PowerShell Interview Questions and Answers


Ques. 11): What are the features of Bootstrap v4?

Answer:

  • The initial release of bootstrap v4.x was 4.0 and the final release in 2018-2019 is 4.2 ;
  • The toast component is added for showing notifications
  • The spinner component is added for loading
  • The utility class .text-decoration-none is added
  • The bootstrap-grid.css file updates the margin and padding of the grid system
  • The .modal-xl class is used for modals
  • The .font-weight-lighter and .font-weight-bolder are added as utility classes
  • The validation styles for file inputs is added with new features
  • The print feature of dark tables is updated with new quality
  • The new utility class .dropdown-item-text is added for dropdown items
  • The Tooltips supports Shadow DOM
  • The double transitions issue on carousels is improved now.


PHP Interview Questions and Answers


Ques. 12): How many types of classes are used in Bootstrap3 to create a responsive page layout?

Answer:

There are 4 types of bootstrap grid classes. we can create grid column layouts extra small devices like mobile phones to large devices like large desktop screens.

  • .col-xs-* : This class is used for extra small device like smart phone (Size<768px)
  • .col-sm-*: This class is used for small device like tablets (size>=768px)
  • .col-md-*: This class is used for medium device like laptops and small size desktop CRT screen (size >=992px)
  • .col-lg-* : This class is used for large device like flat screen or large size desktop (size>=1200px)


C language Interview Questions and Answers


Ques. 13): What is the grid size in Bootstrap 4?

Answer:

Bootstrap 4 supports 5 tier grid system. The below lists for different screen sizes of device,

1. Extra small <576px :

  • Width container will be auto.
  • Here class prefix is .col-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

2. Small =576px :

  • Width container will be 540px.
  • Here class prefix is .col-sm-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

3. Medium =768px :

  • Width container will be 720px.
  • Here class prefix is .col-md-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

4. Large =992px:

  • Width container will be 960px.
  • Here class prefix is .col-lg-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.

5. Extra large =1200px :

  • Width container will be 1140px.
  • Here class prefix is .col-xl-.
  • A number of columns will be 12.
  • It can be nestable.
  • It supports column ordering.


C++ language Interview Questions and Answers


Ques. 14): What is the definition of Kickstrap?

Answer:

Kickstrap is a product that combines AngularJS with Bootstrap, as well as the JavaScript Package Manager (JSPM). Without the native backend, you may take advantage of the benefits of running an authorised database-driven web application. Kickstrap adheres to the Backend as a Service (BaaS) model by using Firebase.


Unix interview Questions and Answers


Ques. 15): What is the purpose of the Bootstrap breadcrumb?

Answer:

The bootstrap breadcrumb is the greatest way to explain hierarchy-based information on a website. It has a breadcrumb class and is an unordered list. For a Bootstrap breadcrumb, the separator is automatically added up in CSS. Breadcrumbs can be used to display categories, tags, or publishing dates on a blog site. It also displays the current page's hierarchical position.


SQL Server Interview Questions and Answers


Ques. 16): What are the similarities and differences between Sass and Bootstrap?

Answer:

SASS is a language for writing stylesheets and CSS pre-processors. It should be compiled into CSS so that the Web browser can understand it. The files have the. scss extension and are written in SASS. The SASS language is used to write the whole Bootstrap 4 CSS source code.

A SASS compiler, such as A.K.A., is used to compile the Bootstrap 4 CSS files.

A pre-processor is a device that converts data into a more usable The best approach to tweak Bootstrap is through SASS.

 

Ques. 17): In Bootstrap 4, what are cards?

Answer:

Bootstrap 4 replaces panels, wells, and thumbnails with cards. To construct a container, Bootstrap 4 uses the.card and.card-body classes on an element. It uses and adds.card-title to heading elements. text-elements to card-text

Let’ see code,

<div class="container-fluid">

 <div class="card card-body">

 <h4 class="card-title">Name</h4>

 <p class="card-text">My name is Satyaprakash</p>

 <a href="#" class="btn btn-primary">More Detilas>></a>

 </div>

</div>

 

Ques. 18): In Bootstrap, what is the purpose of the affix plugin?

Answer:

Affix is a plugin that attaches a tag to a specific spot on a webpage. It is also possible to turn on and off pinning for the attached tag. Social icons are a prominent example of affix plugins in bootstrap. The scrolling that is fastened begins at one point on a webpage and ends at a place when the scrolling stops for the rest of the page.

 

Ques. 19): What are bootstrap modal plugins and how can I use them?

Answer:

Modal plugins can be used to create a small pop-up window, or child windows can be used to replace the parent window. This dialogue box's main purpose is to deliver user reminders and warnings concerning session timeouts, as well as to receive final configurations to delete or save any data. Bootstrap.js or bootstrap.min.js are necessary for bootstrap modal plugins to function properly.

Modal plugins for Bootstrap can be used to create flexible and intelligent dialogue boxes. Any modal can be closed automatically using the backdrop.

Nested modal is not acceptable in Bootstrap, and only one window can be used at one time in Bootstrap.

 

Ques. 20): What are the different sorts of lists that Bootstrap supports?

Answer:

Bootstrap supports three different forms of lists:

Definition Lists - It contains both and elements. Definition term is a term or phrase that is used to define something. The element's definition is defined by the element.

Ordered Lists — To create a sequential order, this list employs a number as a prefix.

Unordered Lists - This type of list is formatted with bullets and does not follow any particular order. The bullet-style can be eliminated from the unordered list by using the.list-unstyled class. To list all of the items in a single line, use the.list-inline class.

 

 


February 16, 2021

Top 20 AngularJS Interview Questions and Answers

 

Ques. 1): What is Angular JS ?

Answer: 

AngularJS is a JavaScript framework that is used for making rich, extensible web applications. It runs on plain JavaScript and HTML, so you don’t need any other dependencies to make it work.AngularJS is perfect for Single Page Applications (SPA). It is basically used for binding JavaScript objects with HTML UI elements.AngularJS handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

AJAX interview Questions and Answers

Ques. 2): What are the advantages of the AngularJS framework?

Answer: 

The AngularJS framework offers many advantages for web development like:

•        It supports MVC pattern

•        It supports animations along with client-server communication

•        It provides two-way data binding that is not possible in other cases.

•        It supports angular and static template

•        It supports dependency injection

•        It supports full rest services

•        It applies animations

•        It offers to add custom directives

•        It supports event Handlers

JavaScript Interview Questions and Answers

Ques. 3): Please explain the difference between Angular and AngularJS?

Answer: 

The differences between Angular and AngularJS are stated as follows:

•      Architecture - AngularJS supports the MVC design model. Angular relies on components and directives instead

•      Dependency Injection (DI) - Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn’t support DI

•      Expression Syntax - In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively

•      Mobile Support - AngularJS doesn’t have mobile support while Angular does have

•      Recommended Language - While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular

•      Routing - For routing, AngularJS uses $routeprovider. when() whereas Angular uses @RouteConfig{(…)}

•      Speed - The development effort and time are reduced significantly thanks to support for two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to upgraded features

•      Structure - With a simplified structure, Angular makes the development and maintenance of large applications easier. Comparatively, AngularJS has a less manageable structure

•      Support - No official support or updates are available for the AngularJS. On the contrary, Angular has active support with updates rolling out every now and then

Node.js Interview Questions and Answers

Ques. 4): What is the Template, scope and controller in AngularJS ?

Answer:

Template: The template is the HTML portion of the angular app. It is exactly like a static HTML page, except that templates contain additional syntax which allows data to be injected in it in order to provide a customized user experience.

Scope: The scope is the object that represents the “model” of your application. It contains fields that store data which is presented to the user via the template, as well as functions which can be called when the user performs certain actions such as clicking a button.

Controller: The controller is a function which generally takes an empty scope object as a parameter and adds to it the fields and functions that will be later exposed to the user via the view.

JQuery Interview Questions and Answers

Ques. 5): Could we make an angular application to render on the server-side?

Answer: 

Yes, we can, with Angular Universal, a technology provided by Angular capable of rendering applications on the server-side.

The benefits of using Angular Universal are:

•    Better User Experience: Allows users to see the view of the application instantly.

•    Better SEO: Universal ensures that the content is available on every search engine leading to better SEO.

•    Loads Faster: Render pages are available to the browsers sooner, so the server-side application loads faster.

Advance Java interview Questions and Answers

Ques. 6): How do you share data between controllers in AngularJs?

Answer: 

We can share data by creating a service, Services are the easiest, fastest, and cleaner way to share data between controllers in AngularJs. There are also other ways to share data between controllers, they are

•        Using Events

•        $parent, nextSibling, controllerAs

•        Using the $rootScope

 

Ques. 7): Difference between SessionStorage, Cookies, and LocalStorage

Answer:

SessionStorage: In session storage, data stored in a specific session, and it will be lost in a case the browser tab closed for a particular time or session. In session storage, it stores 5MB maximum size of data.

Cookies: Cookies help to store that data that needs to send back to the server by request. The usage of cookies relies on the duration and typeset from either the client-side or the server size. In cookies, it stores 4MB, the maximum size of data.

LocalStorage: In local storage, there is no expiration date for storing of data. In this case, it is possible to clear the data only either with JavaScript or the browser cache. In local storage, it stores the maximum size of data as compared to session storage and cookies.

 

Ques. 8): Explain Dependency Injection?

Answer: 

Dependency injection is an application design pattern that is implemented by Angular and forms the core concepts of Angular.

Let us understand in a detailed manner. Dependencies in Angular are services which have a functionality. Various components and directives in an application can need these functionalities of the service. Angular provides a smooth mechanism by which these dependencies are injected into components and directives.

 

Ques. 9): What is the SPA (Single page application) in AngularJs?

Answer: 

Single page application is a web application that used to load a single HTML page. It also helps to update the page to make the users connect with the application. With the help of HTML and AJAX, it is possible by the SPA to create responsively, and fluid web app without entertaining invariant page reloads. In this way, one can able to make responsive UI without taking the assistance of page flicker.

 

Ques. 10): Difference between AngularJS and JavaScript Expressions?

Answer: 

Below are some major difference between AngularJS and JavaScript Expressions

•    Both can contain literals, operators, and variables.

•    AngularJS expressions can be written in HTML but JavaScript expressions are not.

•    AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

•    AngularJS expressions support filters, while JavaScript expressions do not.

 

Ques. 11): What is the AOT (Ahead-Of-Time) Compilation? What are its advantages?

Answer:  

An angular application consists of components and templates which a browser cannot understand. Therefore, every Angular application needs to be compiled before running inside the browser. The Angular compiler takes in the JS code, compiles it, and then produces some JS code. It is known as AOT compilation and happens only once per occasion per user.

There are two kinds of compilation that Angular provides:

JIT(Just-in-Time) compilation: the application compiles inside the browser during runtime

AOT(Ahead-of-Time) compilation: the application compiles during the build time.

Advantages of AOT compilation:

•      Fast Rendering: The browser loads the executable code and renders it immediately as the application is compiled before running inside the browser.

•      Fewer Ajax Requests: The compiler sends the external HTML and CSS files along with the application, eliminating AJAX requests for those source files.

•      Minimizing Errors: Easy to detect and handle errors during the building phase.

•      Better Security: Before an application runs inside the browser, the AOT compiler adds HTML and templates into the JS files, so there are no extra HTML files to be read, thus providing better security for the application.

 

Ques. 12): What is the ng-App directive in AngularJs?

Answer: 

The ng-App directive in AngularJs is used to specify the AngularJs Application. It is used to call the root element of an AngularJs app. Also, it can be stored near <body> or <html> tag. It is possible to show any number of ng-app directives in the HTML document. However, it is possible to bootstrap only one application automatically. Moreover, the other applications are needed to bootstrap manually.

For Example:

//<div ng-app=””>

<p>My first expression: {{178 + 133}} </p>

</div>//

 

Ques. 13): What is the difference between one-way binding and two-way binding in AngularJS ?

Answer: 

In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.

ng-bind has one-way data binding.

While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.

 

Ques. 14): Explain Angular Authentication and Authorization.

Answer: 

The user login credentials are passed to an authenticate API, which is present on the server. Post server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication.

Post logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

 

Ques. 15): What is dependency injection In AngularJs and how does it work?

Answer:

AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components of their dependencies instead of hardcoding them within the component. For example, if you had a controller that needed to access a list of customers, you would store the actual list of customers in a service that can be injected into the controller instead of hardcoding the list of customers into the code of the controller itself. In AngularJS you can inject values, factories, services, providers, and constants.

 

Ques. 16): How to enable HTML5 mode in Angular 1.x?

Answer: 

html5Mode method of $locationProvider module is used to enable HTML5 mode in Angular 1.x. For creating pretty URLs and removing # from URLs html5Mode need to true.

Enabling html5Mode to true in Angular 1.x.

angular.module('myApp', [])

    .config(function($routeProvider, $locationProvider) {

        $routeProvider

            .when('/', {

                templateUrl : 'partials/home.html',

                controller : mainController

            })

        // use the HTML5 History API

        $locationProvider.html5Mode(true);

    });

 

Ques. 17): How to access parent scope from child controller in AngularJS ?

Answer: 

In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.

Example:

<div ng-controller="ParentCtrl">

    <h1>{{ name }}</h1>

    <p>{{ address }}</p>

    <div ng-controller="ChildCtrl">

        <h1>{{ title }}</h1>

        <input type="text" ng-model="$parent.address" />

</div>

 

Ques. 18): Explain all the steps to configure an Angular App (ng-app)

 Answer: 

There are specific points that need to consider to configure an Angular app:

•      First of all, the Angular module should be created

•      Then, a controller is assigned to the module

•      After that, the module is get linked with the HTML template by the assistance of the Angular App.

•      Finally, the HTML template will get linked to the controller with an ng-controller directive.

 

Ques. 19): What is a Mocked Service in AngularJs? How to use it?

Answer: 

It is the most common type of dependency on AngularJS application. A service can be mocked in two ways by either getting an instance of actual service using an inject block or by implementing a mock service using $provide.

 

Ques. 20): What do you mean by ng-include and ng-click directives in AngularJs?

Answer: 

The term ng-include is needed to add distinct files on the main page while the ng-include directive adds HTML from an external file. The added content will be considered as child nodes of the particular element. Moreover, the added file should be placed on the similar domain like the document such as <div ng-include=”‘myFile.htm'”></div>. Moreover, ng-click is used in the case when we need to click on a bottom or when there is a need to perform an operation. The main purpose of it conveys AngularJs how to behave in case an HTML element is clicked. For example: //<button ng-click=”count = count + 1″ ng-init=”count=0″>OK</button>//

The above-written code is used for hiking up the count variable by 1 when the button gets clicked.