Bootstrap Interview Questions and Answers

Bootstrap is a CSS, HTML and JS framework for developing the web applications with less effort. This framework emphasis on developing mobile web applications. It is supported all web browsers.

The key components of Bootstrap are:

CSS: It comes with plenty of CSS files

Layout Components: List of layout components

JavaScript Plugins: It contains many jQuery and JavaScript plugins

Scaffolding: It gives a basic structure with link styles, Grid system and background

Customize: To get your own version of framework you can modify your components

Class loader is a portion of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also do the process of changing a named class into its equal binary form.

Fluid Layout: It is used when you want to build an app that is 100% wide and use up all the width of the screen

Fixed Layout: It is used for a standard screen.

Bootstrap grid system is used for creating page layout through a series of rows and columns.

Column ordering is one of the features 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-* the order of the column can be easily changed.

The page header is a nice little feature to add appropriate spacing around the headings on a page. This is particularly helpful on a web page where you may have several post titles and need a way to add distinction to each of them. To use a page header, wrap your heading in a <div> with a class of .page-header.

Jumbotron is mostly used for content that you want to highpoint like some slogan or headline etc. in other words it is used to expand the size of the headings and to add a margin for landing page content

To use the Jumbotron in Bootstrap

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

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 several lines then you should use <pre> tag

Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new or unread items. To use badges just add <span class = “badge”> to links, Bootstrap navs, and more.

Bootstrap Media Queries are CSS techniques which are introduced in CSS3 that allow the designer to show, hide and move contents according to the size of viewport. @media is used to include a bunch of CSS properties if a certain condition is true.

• 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

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

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.

Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new or unread items.

To use badges just add <span class = “badge”> to links, Bootstrap navs, and more.

The affix plugin allows a to become affixed to a location on the page. You can also toggle it’s pinning on and off using this plugin. A common example of this are social icons. They will start in a location, but as the page hits a certain mark, the will be locked in place and will stop scrolling with the rest of the page.

The Scrollspy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.

Bootstrap collapsing elements allows you to collapse any particular element without writing any JavaScript code. 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’)

Bootstrap Carousel plugin is used to add a slider to your site. It is useful in the situation where you want to display a large amount of contents within a small space on the web pages. Some of the standard carousels are:

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

Bootstrap well is a container that makes the content to seem sunken or an inset effect on the page. In order to create a well, wrap the content that you would like to appear in the well with a <div> containing the class of .well.

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).

Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more spacing, for example. The .col-xs = * classes don’t support offsets, but they are easily replicated by using an empty cell.

Bootstrap package includes –

Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, background. This is is covered in detail in the section Bootstrap Basic Structure

CSS − Bootstrap comes with feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.

Components − Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section Layout Components.

JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in details in the section Bootstrap Plugins.

Customize − You can customize Bootstrap’s components, LESS variables, and jQuery plugins to get your very own version.

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.

Button groups allow multiple buttons to be stacked together on a single line. This is useful when you want to place items like alignment buttons together.

Responsive layout which is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space.

The Scrollspy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.

This class allows floating a media object (images, video, and audio) to the left or right of a content block.

If you are preparing a list where the items will be part of an unordered list, use a class. useful for comment threads or articles lists.