Skillsbattle |School for Learning

1) Explain what is Bootstrap?

Bootstrap is a HTML, CSS, and JS framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.

Bootstrap is the most popular and powerful HTML, CSS, and JavaScript front-end framework for faster and easier use, responsive layout, and mobile-first web development. It includes design templates for UI components like Forms, Buttons, Tables, Navigation, Dropdowns, Alerts, Tabs, Accordion, Carousel and many others with optional JavaScript plugins.

2) Explain why to choose Bootstrap for building the websites?

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.

3) What are the key components of Bootstrap?

The key components of Bootstrap are

CSS : It comes with plenty of CSS files
Scaffolding : It provides a basic structure with Grid system , link styles and background
Layout Components : List of layout components
JavaScript Plugins: It contains many jQuery and JavaScript plugins
Customize: To get your own version of framework you can customize your components

4) Explain what are class loaders in Bootstrap?

Class loader is a part of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also does the process of converting a named class into its equivalent binary form.

5) What are the types of layout available in Bootstrap?

In Bootstrap there are two types of Layout available

Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen
Fixed Layout: For a standard screen you will use fixed layout (940 px) option

6) Explain what is Bootstrap Grid System?

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

7) What are Glyphicons?

Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.

8) Define Bootstrap Breadcrumb?

Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page’s location within a navigational hierarchy.

A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. The separator is automatically added by CSS (bootstrap.min.css) through the following class:

Bootstrap breadcrumb used for,

Documentation page
Magazine
ERP system

.breadcrumb > li + li:before {{'{'}}
              color: #CCCCCC;
              content: "/ ";
              padding: 0 5px;
              {{'}'}}

9) Define Bootstrap thumbnails?

A lot of sites need a way to lay out ../images, videos,text, etc in a grid, and Bootstrap has an easy way to do this with thumbnails.

To create thumbnails using Bootstrap:

Add an tag with the class of .thumbnail around an image.
This adds four pixels of padding and a gray border.
On hover, an animated glow outlines the image.

10) What are Bootstrap Plugins?

Bootstrap comes bundled with 12 jQuery plugins that extend the features and can add more interaction to your site. To get started with Bootstrap’s JavaScript plugins, you don’t need to be an advanced JavaScript developer. By utilizing Bootstrap Data API, most of the plugins can be triggered without writing a single line of code.

11) Define UI Bootstrap?

UI Bootstrap incorporates Bootstrap components written in AngularJS by the AngularUI team. It aims to provide AngularJS directives with the markup and CSS of Bootstrap. It has dependencies on AngularJS and Bootstrap CSS.

12) Define Kickstrap?

Kickstrap is a product where AngularJS is baked together with Bootstrap in conjunction with JavaScript Package Manager (JSPM). You can leverage the advantage of running an authenticated database-driven web application without the native backend. Kickstrap uses Firebase adhering to a Backend as a Service (BaaS) model.

13) What are different button styles in Bootstrap?

There are seven styles to add a button in Bootstrap. Use the following classes to achieve the different button styles:

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

14) What are Bootstrap Form Rules?

Always use <form role=”form”> (helps improve accessibility for people using screen readers)
Wrap labels and form controls in <div class=”form-group”> (needed for optimum spacing)
Add class .form-control to all textual <input>, <textarea>, and <select> elements

15) What are Bootstrap Alerts ?

Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users.

There are four classes that are used within <div> element for alerts.

.alert-success
.alert-info
.alert-warning
.alert-danger

16) What is Bootstrap pager ?

The bootstrap pager is a form of pagination. It is used to create previous and next buttons (links).The “.pager” class is used within the <ul> element to create the previous / next buttons.

17) Explain what is Modal plugin used for in Bootstrap?

A modal is a child window that is layered over its parent window. Using a custom Jquery Plugin, Bootstrap Modal are created. To enrich user experience and to add functionality to users, modal windows are created with the help of Modal plugin.

18) Explain what is Bootstrap Container?

Bootstrap container is a class which is useful and creates a centred area within the page where our site content can be put within. The advantage of the bootstrap .container is that it is responsive and will place all our other HTML code.

19) What are offset columns in Bootstrap?

For more specialized layouts offsets are a useful feature. For more spacing they can be used by pushing column over.

For example, .col-xs=* classes do not support offset but they are easily replicated using an empty cell

20) What is column ordering in Bootstrap?

Column ordering is one of the feature available in bootstrap and you can easily write columns in an order and show them in another one. With .col-md-push-* and .col-md-pull-*

21) What is the use of Jumbotron in Bootstrap?

In bootstrap, Jumbotron is generally used for content that you want to highlight like some slogan or marketing headline etc. in other words it is used to enlarge the size of the headings and to add a margin for landing page content

Create a container <div> with the class of .jumbotron

22) What is the difference between Bootstrap and Foundation?

Bootstrap	Foundation
– Bootstrap offers unlimited number of UI elements	– In Foundation UI element options are very limited in numbers
– Bootstraps uses pixels	– Foundation use REMs
– Bootstrap encourages to design for both desktop and mobile.	– Foundation encourages to design mobile first
– Bootstrap support LESS as its preprocessor	– Foundation support Sass and Compass as its preprocessor

23) In Bootstrap what are the two ways you can display the code?

In bootstrap you can display code in two ways

<code> tag : If you are going to display code inline, you should use <code> tag
<pre> tag: If you want to display the code as a standalone block element or it has multiple lines then you should use <pre> tag

24) Explain what are the steps for creating basic or vertical forms?

The steps for creating basic or vertical forms are

Add a role form to the parent <form> element
Wrap labels and controls in a <div> with class .form-group. To achieve optimum spacing this is needed
Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements

25) Explain what is Modal plugin used for in Bootstrap?

26) Explain what is Bootstrap Container?

27) Explain what is Bootstrap collapsing elements?

Bootstrap collapsing elements enables you to collapse any particular element without writing any JavaScript code or the accordion markup. In Bootstrap to apply collapsing elements you have to add data-toggle= “collapse” to the controller element along with a data-target or href to automatically assign control of a collapsible element. Likewise, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’)

28) Explain what is list group in Bootstrap and what is the use of it?

List groups are components to display both simple and complex element with custom content

For example, a simple list group is created using class .list-group to address the list, and class .list-group-item to address individual item.

29) How you can add badge to list group in Bootstrap?

To add badge to list group in Bootstrap you have to simply add "badge" class within the list element.

30) Explain how you can create Nav elements in Bootstrap?

Bootstrap offers various options for styling navigation elements all of them use the same markup and base class .nav.

Start with a basic unordered list with the base class of .nav
Then add class .nav-tabs

31) Explain what is the use of Bootstrap Carousel plugin?

The Carousel plugin is used to add a slider to your site. It is useful in condition where you want to display huge amount of contents within a small space on the web pages. Some of the standard carousel includes

.carousel (options)
.carousel (‘cycle’)
.carousel (‘pause’)
.carousel (‘number’)
.carousel (‘prev’)
.carousel (‘next’)

32) Features of Bootstrap

Easy to use
Bootstrap is very easy to use. Anyone with the basic knowledge of HTML and CSS can start development with Bootstrap.
Open Source
Bootstrap is completely free to download and use.
Browser compatibility
Bootstrap is compatible with all modern browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and Opera.
Responsive features
By using Bootstrap we can easily create responsive designs for web pages. Bootstrap's responsive CSS makes our web pages appear more appropriately on different devices as it adjusts to phones, tablets, and desktops.

33) Explain what is Bootstrap collapsing elements?

34) Why choose Bootstrap for building websites?

Bootstrap is used for building websites for the following reasons,

Mobile First Approach: Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
Browser Support: It is supported by all popular browsers.
Easy to Get Started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap.
Responsive Design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
Provides a clean and uniform solution for building an interface for developers.
It contains beautiful and functional built-in components that are easy to customize. It also provides web based customization.

35) Bootstrap 4 brought some major changes, adding new components, scrapping others. Here's the difference between Bootstrap 3 and Bootstrap 4.

Component	Bootstrap 3	Bootstrap 4
Global
Source CSS Files	LESS	SCSS
Primary CSS Unit	`px`	`rem`
Media Queries Unit	`px`	`px`
Global Font Size	`14px`	`16px`
Default Fonts	Helvetica Neue, Helvetica, Arial, sans-serif	Uses a "native font stack" (user's system fonts), with a fallback to Helvetica Neue, Arial, and sans-serif
Grids
Grid Tiers	4 tier grid system (xs, sm, md, lg)	5 tier grid system (xs, sm, md, lg, xl). Bootstrap 4 has removed the `xs` from the lowest break point. Therefore, `col-*` covers all devices (no need to specify the size in this case).
Offsetting Columns	Uses `col--offset-` classes to offset columns. For example, `col-md-offset-4`.	Uses `offset--` classes to offset columns. For example, `offset-md-4`.
Tables
Dark/inverse Tables	Not supported.	Added dark/inverse tables with the `.table-dark` class. Note: Prior to the Beta 2 release, these required the `.table-inverse` class. This class has been replaced with `.table-dark` in Beta 2.
Table Head Styles	Not supported.	Added table head styles with the `.thead-light` and `.thead-dark` classes. Note: Prior to the Beta 2 release, these required the `.table-default` class and the `.table-dark` class. These classes have been replaced with `.table-light` and `.table-dark` in Beta 2.
Condensed Tables	`.table-condensed`	`.table-sm`
Contextual Classes	Bootstrap 3 doesn't use the `.table-` prefix for its contextual classes. For example, Bootstrap 3 uses `.active` whereas Bootstrap 4 uses `.table-active`. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger).	Added the `.table-` prefix for its contextual classes.
Responsive Tables	The `.table-responsive` class must be added to a parent `div`element.	The `.table-responsive` class must be added to a parent `div`element. ~~Can add `.table-responsive` to the actual `table` element.~~ Beta 2 has also introduced the `.table-responsive-*` classes that can be used to specify a particular breakpoint. These are `.table-responsive-sm`, `.table-responsive-md`, `.table-responsive-lg`, and `.table-responsive-xl`.
Reflow Tables	Not supported.	~~Added reflow tables with the `.table-reflow` class.~~ Reflow tables have now been dropped.
Forms
Horizontal Forms	Horizontal forms require the `.form-horizontal` class. Forms don't require `.row` when using grids (although this class is still a requirement on Bootstrap 3 grids in general).	Bootstrap 4 dropped the `.form-horizontal` class — it is no longer needed to display horizontal forms. Forms require either the `.row` class when using grids, or the `.form-row` class (introduced in Bootstrap 4), which makes the form more compact.
Horizontal Forms	Use `.control-label` when using grids for form layout.	Bootstrap 4 uses `.col-form-label` * when using grids for form layout. * Note that Bootstrap 4 initially used `.form-control-label` but subesquently changed this to `.col-form-label`.
Checkboxes and Radio Buttons	Uses `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline` to display checkboxes and radio buttons.	Uses `.form-check`, `.form-check-label`, `.form-check-input`, and `.form-check-inline`.
Form Control Size	Use `.input-lg` and `.input-sm` to increase or decrease the size of an input control.	Use `.form-control-lg` and `.form-control-sm` to increase or decrease the size of an input control.
Form Label Size	No specific classes for adjusting form label size.	Bootstrap 4 introduced `.col-form-label-sm` and `.col-form-label-lg` to increase or decrease the size of a label to match the size of the relevant form control.
Help Text	Use the `.help-block` class to display help text.	Bootstrap 4 uses the `.form-text` class to display help text.
Validation and Feedback Icons	Includes validation styles for error, warning, and success states on form controls (for example, `.has-warning`). To present icons on the input fields using Bootstrap 3, use glyphicons.	Validation styles are not available for Bootstrap 4 forms. Use custom Bootstrap form validation messages instead.
Legends	No classes for styling the form legends.	Provides the option of using `.col-form-label` on `legend` elements to style it more like a label.
Static text	Uses `.form-control-static` to render static text instead of a control.	In Bootstrap 4, `.form-control-static` has been renamed to `.form-control-plaintext`.
Custom Forms	Not supported.	Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults.
Buttons
Styles	Includes the `.btn-default` and `.btn-info` classes. The `.btn-secondary` class isn't available in Bootstrap 3.	Introduced the `.btn-secondary`, `.btn-light`, and `.btn-dark` classes. Dropped the `.btn-default` class. Note that the `.btn-info` class was initially dropped in Bootstrap 4 but then reappeared again.
Outline Buttons	Not supported.	Introduced the `.btn-outline-` classes for styling buttons with an outline color. ~~Introduced the `.btn--outline` classes for styling buttons with an outline color.~~ (The `.btn--outline` classes became `.btn-outline-` in Alpha 3).
Button Sizes	The `.btn-xs` class is available.	Dropped the `.btn-xs` class (only `.btn-sm` and `.btn-lg` are available now).
Input groups
Classes	Bootstrap 3 uses the `.input-group-addon` and `.input-group-btn` classes.	Bootstrap 4 dropped `.input-group-addon` and `.input-group-btn` for two new classes: `.input-group-prepend` and `.input-group-append`. Bootstrap 4 also introduced `.input-group-text` for text within an input group.
../images
Responsive ../images	Use `.img-responsive` class.	Use `.img-fluid` class.
Image Alignment	Use `.pull-right`, `.pull-left`, and `.center-block` helper classes.	Uses `.m-x-auto` instead of `.center-block` to align block-level ../images. Can also use the various `.pull--right` and `.pull--left` responsive helper classes, as well as the `.text--left`, `.text--center`, and `.text--right` helper classes on the image's parent. Can use the various `.pull--none` classes to disable floating.
Media Objects
Classes	Includes many different classes for media objects, including `.media`, `.media-body` `.media-object`, `.media-heading`, `.media-right`, `.media-left`, and `.media-list` and `.media-body`.	Uses just `.media` class. Margins can be applied using spacer utilities. Media objects are flexbox enabled in Bootstrap 4, so the various flexbox classes can also be applied (such as reordering, etc).
Dropdowns
Structure	Apply dropdowns to lists (i.e. using `ul` and `li`).	Dropdowns can be built with `ul` or `div`s. Apply the `.dropdown-item` to a `a` or `button` element and wrap them all in a `div` (or `ul`) with a `.dropdown-menu` class applied.
Menu Headers	Apply `.dropdown-header` to the `li` tag.	Apply `.dropdown-header` to `h1` - `h2` tags (as Bootstrap no longer uses `li` tags to build dropdowns).
Dividers	Apply the `.divider` class to the `li` element (because it used lists to build dropdowns).	Apply the `.dropdown-divider` to the `div` element.
Disabled Menu Items	Apply the `.disabled` class to the `li` element.	Apply the `.disabled` class to the `a` element.
Button Groups
Justified?	Supports justified button groups (via the `.btn-group-justified` class).	Not supported.
Extra Small?	Supports extra small button groups (via the `.btn-group-xs` class).	Not supported (dropped the `.btn-group-xs` class).
Navs
Inline Navs	There is no `.nav-inline` class.	Can use the `.nav-inline` class to explicitly specify navs to be displayed inline.
Navbars
Colors	Limited (preset) color options. Supports inverse navbars but not the other classes.	New (preset) color options. Introduced the `.navbar-light` and the `.navbar-dark` classes, and allows the `.bg-*` classes to be used on navbars.
Navbar Alignment	Use `.navbar-right`, `.navbar-left` to align components within the navbar.	~~Use the various `.pull--right` and `.pull--left` responsive helper classes.~~ ~~Can also use the various `.pull-*-none` classes to disable floating.~~ Can either use spacing utilities such as `.mr-auto`, or any of the flexbox alignment utilities.
Navbar Forms	Add the `.navbar-form` class to forms within navbars.	Bootstrap 4 dropped the `.navbar-form` class. It's no longer necessary.
Fixed Navbars	Uses `.navbar-fixed-top` and `.navbar-fixed-bottom` to fix navbars to the top or bottom.	Uses `.fixed-top` and `.fixed-bottom`.
Pagination
Default Pagination	Only requires `.pagination` to be added (to the `ul` element that represents the list of pages).	Must also add `.page-item` to each `li` element and `.page-link` to each `a` element.
Pagers	Uses `.previous` and `.next` for aligning pagers.	Pagers have been dropped in Bootstrap 4 (Alpha 3). ~~Uses `.pager-prev` and `.pager-next` for aligning pagers.~~
Labels
Pill Labels	The `.label-pill` class is not available. However, Bootstrap 3 does have badges (which achieves a similar visual effect).	Labels have been replaced by badges in Bootstrap 4. Badges can use the `.badge-pill` for rounded corners.
Tags
Supported?	No. "Tags" are called "Labels" in Bootstrap 3 (i.e. they use the `.label` class).	~~Yes.~~ ~~The `.tag` class was introduced in Bootstrap 4 (Alpha 3) to replace the `.label` class.~~ ~~This was done to disambiguate from the `label` element.~~ Tags have now been renamed to "badges". These replace labels from Bootstrap 3.
Jumbotron
Full-Width	The `.jumbotron-fluid` class is not required on full-width jumbotrons.	Introduced the `.jumbotron-fluid` class for full-width jumbotrons.
Progress Bars
Uses `progress`?	Doesn't use the `progress` for progress bars. Instead, applies progress bar classes to nested `div` elements.	~~Uses the HTML5 `progress` element when working with progress bars.~~ Using the `progress` element was abandoned in Alpha 6. Bootstrap 4 now uses the `div` element again.
Glyphicons
Supported?	Supported.	Not supported.
Typography
Blockquotes	Bootstrap styles are applied to the `blockquote` element by default.	Introduced the `.blockquote` class for styling the `blockquote` element (i.e. styling this element is now opt-in).
Blockquote Alignment	Use `.blockquote-reverse` to align a blockquote to the right.	Use the text utilities to align blockquotes (`.text-center` and `.text-right`).
Page Headers	The `.page-header` class is supported.	The `.page-header` class is not supported.
Description Lists	The `.dl-horizontal` class was used to declare a horizontal list.	Horizontal lists are now declared with the `.row` class on the `dl` tag, then any of the grid system's predefined classes to the `dt` and `dd` tags.
Non-Responsive Usage
Supported?	Supported. You can specify a layout to be non-responsive.	Not supported.
List Groups
Linked List Items / Button List Items	Apply `.list-group-item` to the `a` element.	Apply `.list-group-item-action` to the `a` element.
Collapse
Show content	Uses `.in` to have content expanded upon page load.	Uses `.show` to have content expanded upon page load.
Cards
Supported?	Not supported.	Introduced in Bootstrap 4. Cards replace functionality that was previously provided by panels, wells, and thumbnails.
Panels
Supported?	Supported.	Not supported. Use cards instead.
Wells
Supported?	Supported.	Not supported. Use cards instead.
Thumbnails
Supported?	Supported.	Not supported. Use cards instead.
Breadcrumbs
Classes	Uses the `.breadcrumb` class against the `ul` tag.	Also requires `.breadcrumb-item` to be applied against all `li` elements that make up the breadcrumb. Breadcrumbs can also be used outside of lists. For example, the `.breadcrumb-item` could be applied to a bunch of `a` elements that are wrapped in a `.breadcrumb` element.
Carousels
Carousel Item	Use `.item` class.	Use `.carousel-item` class.
Affix
Supported?	Yes.	No.

Bootstrap Interview Questions with Answers