Showing posts with label CSS. Show all posts
Showing posts with label CSS. 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 CSS (Cascading Style Sheets ) Interview Questions & Answers

 

Ques. 1): What is CSS?

Answer: CSS stands for Cascading Stylesheet. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to HTML documents or web pages. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.

 

Ques. 2): What are the different types of CSS?

Answer: Below are the different types of CSS –

      Embedded – Adding the CSS styles in <style> attribute.

      Inline – Adding the CSS to the HTML elements.

      Linked/External – Adding the External CSS file to the HTML document.

 

Ques. 3): Explain the differences between CSS and CSS3.

Answer: Just like HTML5 is the latest standard rolled out for HTML, similarly, CSS3 is the latest standard rolled out for CSS3 that carries many advanced features and it was under development since 2005. It’s backwards-compatible with older versions of CSS, and has new properties that debug previous quirks and extend CSS2 features, and it’s even got some JavaScript-like capabilities.

CSS3 has also addressed a number of mobile development concerns, accounting for responsive design and making up for issues caused by Adobe Flash incompatibility on mobile devices. In combination with JavaScript, CSS3 has a lot of the functionality of Flash now–animation- and interactivity-wise. Some of these are listed below.

1.       Mobile-first mentality

2.       Modular code

3.       Support for web fonts

4.       Faster development and load times

5.       New Color and Images Effects

6.       Bug fixes and improvements

 

Ques. 4): How is a CSS file included or referred to in an HTML document?

Answer: An HTML document can include an external stylesheet using the <link> tag. Here is an example,

<link rel="stylesheet" type="text/css" href="theme.css">

In the above snippet, the rel attribute specifies the relation between the HTML document and the file linked. Here the value stylesheet means that the refered file is a stylesheet for the HTML document. The type attribute also does the same thing. Finally, the href attribute defines the path to the actual file on the server. Here the filename is theme.css and the path is relative to the current HTML document.

 

Ques. 5): What are CSS custom properties?

Answer: CSS variables or custom properties are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation. For example,

--main-color: black;

And are accessed using the var() function. For example,

color: var(--main-color);

You can use them without the need of a preprocessor. They cascade. You can set a variable inside any selector to set or override its current value. When their values change (e.g. media query or other state), the browser repaints as needed. You can access and manipulate them in JavaScript.

 

Ques. 6): What is inline CSS?

Answer: Inline CSS allows us to add CSS styles to only a particular element in the DOM. These CSS styles only affect the element that they are defined on in the HTML document. The term inline comes from the fact that the styles are written directly within the HTML tag using the style attribute.

Using the style attribute overrides the styles applied by all other CSS files on the same element. Inline CSS styles take precedence over all other styles at the cost of making the HTML document difficult to read and harder to maintain. An example of inline CSS is

<h1 style="color:blue; margin-left:30px;">This is a heading</h1>

In the above example, using the style attribute, some styles are specified on the h1 element but it makes the document dirty. These styles will only affect this h1 element only and all other h1 elements will stay the way they are.

 

Ques. 7): How does absolute positioning work in CSS?

Answer: In absolute positioning, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

 

Ques. 8): List out some of the properties in added in CSS3?

Answer: Below are the some of the properties in CSS3-

        Border Images

        New Web fonts

        Multi Column layout

        Box Shadows

        Text Shadows

        Transform property

 

Ques. 9): How do you target something inside or around another element?

Answer: To target something that’s next to something else or target something only if it’s inside a particular container, there is a way.

If you’re wanting to style occurrences of a certain class inside another class, you can write the following:

.nav .nav-item { ... }

The above targets any .nav-item inside .nav.

If you only want those that are immediately inside the .nav as opposed to any level deep, you can add the > character, like so:

.nav > .nav-item { ... }

Want to target a button only if it’s next to another button? The + character has got you covered:

.button + .button { ... }

 

Ques. 10): What is the difference between “display:none” and “visibility:hidden” in CSS?

Answer:

    “Display:none” – This will just hide the element and does not take any space of the element.

    “visibility:hidden” – This also hides the element and will take space for the element and this will affect the entire layout of the document.

 

Ques. 11): What is a CSS selector?

Answer: A CSS selector allows us to select the required elements in an HTML document that need to be styled in a certain way. It is also referred to as a connection between the stylesheet and HTML files. There are different types of CSS selectors, however, the simplest ones are element, class and id selectors.

 

Ques. 12): What would be the difference between “width:auto” and “width:100%” in CSS?

Answer: “width:auto” reaches to the full width and it will subtract borders, paddings, margins etc. from the available space where as “width:100%” will force the element to be as wide as its parent element and will add additional spacing which can cause some problems.

 

Ques. 13): What are the advantages and disadvantages of using embedded stylesheets?

Answer: The advantages of Embedded Style Sheets are as follows.

    It is possible to generate classes for use on multiple tag types in the document.

    In comparison to In External Style Sheets, no extra download is compulsory to import the information.

    The disadvantages of Embedded Style Sheets are as follows.

    Controlling the styles for multiple files from one file is not possible.

 

Ques. 14): What is the exclamation (!) symbol used to in CSS?

Answer: The exclamation symbol (!) is generally used to denote a style as important. The styles that are marked as !important override the styles that are not. For example, if there are two CSS classes applied on the same element. Class A add a color red to the text but class B adds a green color. Now, generally, the style that is applied later will persist. But if either of the classes has the !important declaration will never be overridden by other styles.

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

 

Ques. 15): What is an ID selector?

Answer: ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector's name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit.

#abc123 {

color: red;

background: black

}

 

Ques. 16): How are attributes used to style HTML elements in CSS?

Answer: There are a few attributes that apply to all tags, like class and id, but a lot of tags have their own ones. For example, input tags can have a type (text, number, radio, etc) and a tags can have href.

You can target elements with particular attributes by using square brackets: [attribute="value"].

For example, you can target all input fields that are of type radio like so:

input[type="radio"] {

     background-color: #eee;

}

 

Ques. 17): What changes would you normally add to your print-stylesheet?

Answer: A print-stylesheet needs to make sure that the document looks clean and is easily readable when the document is printed. This requires some fanciness and beauty-elements to be taken away from the document to make it easier on the eyes when printed. Some most common things we do in a print-stylesheet are listed below.

Remove unwanted items - Usually it's just your organisation logo and page content that you'll want to appear on the printed version of the web page. You'll normally want to remove the header, left column and right column. You may also want to remove the footer (or some of it) from the printed version, unless it contains your contact details. You may also want to remove certain images and adverts, especially animated images as these won't make sense when printed.

Format the page - There's nothing worse than printing off a web page to find the last few words of each line cut off. It's also annoying (and a waste of paper) when the left and right columns are left in, leaving a very narrow space for the content so the web page prints on to 15 pieces of paper.

Generally speaking, the three CSS commands you'll need are: width: 100%; margin: 0; float: none;

These commands should be applied to any containing elements (<div>s for a CSS layout and <table>s for table layouts) to ensure the content spans the full width of the paper.

Change the font - It is personal preference, but some print stylesheets do change the font size (often to 12pt) but this isn't generally a very good idea. If users increase text size on the screen then the text will print in this larger font size... unless you specify a fixed font size in the print stylesheet.

Links - Print-outs are often in black and white so do make sure that links have a decent colour contrast. If not, assign links a slightly darker colour in the printout.

 

Ques. 18): Explain the term “pseudo-class” in reference to CSS3.

Answer: Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo_class { property: value; }, simply with a colon in between the selector and the pseudo class. Some of the pseudo classes are link, visited, hover, active, focus etc.

 

Ques. 19): What are web safe fonts and fallback fonts?

Answer: Not all operating systems and browsers have the same fonts installed. Web safe fonts are fonts that are commonly pre-installed on many computer systems, such as Arial and Times New Roman. In case the browser or operating system doesn’t recognize the first font you set (e.g. Ubuntu), you should choose a web safe fallback font to display (e.g. Arial), followed by a generic font family (e.g. sans-serif).

If your fallback font doesn’t display either, the browser can pick a generic font in the sans-serif family.

 

Ques. 20): What are pseudo classes and what are they used for?

Answer: Pseudo classes are similar to pseudo elements, but instead of styling a part of an element, they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button.

Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab.

They all start with a single colon and look like this:

.link:hover { ... }

.link:active { ... }

.tab:first-child { ... }

.tab:last-child { ... }

.avatar:nth-child(2n) { ... }