Bootstrap interview question set 1/Bootstrap Interview Questions and Answers for Freshers & Experienced

What is the function of the lg grid class?

The lg grid class is used for larger screens of laptops and desktops, which are equal or even greater than 1200 px wide.

What will happen if we add many tags with the class of thumbnails around the image?

This will result in creating four pixels of padding and also develop a grey border.

Define types of layout in Bootstrap? Explain?

There are two types of layout in Bootstrap include fixed design and fluid layout. The fluid layout helps in creating a full-width screen that adjusts with the browser size. The fixed layout, on the other hand, cannot adjust itself as per the browser screen and has a fixed layout of 940 px.

How do you make images responsive in Bootstrap?

You can answer this by explaining that developers add a class of .img-responsive to an "a" tag in order to make it responsive for users.

How can you add a badge to a list group in Bootstrap?

When asked how to add a badge, explain that the user can add it in the element.

What is the Bootstrap Navbar?

You can define the Bootstrap Navbar as the area at the top of the website with links to pages the user wants to emphasize.

What is the benefit of Bootstrap?

It helps in developing highly responsive, quick, and easy to use layout. The main advantage of Bootstrap is observed while developing mobile applications that have design templates. These templates help in creating UI, including alert tab, dropdown, forms, etc.

What is the need of Bootstrap?

Bootstrap acts as a front-end framework that supports the development of various kinds of web applications such as HTML, JS, and CSS.

Is it possible to put a table within the Bootstrap panel?

Yes, it is possible to put a table within a Bootstrap panel. Use the .table class within a panel to get a non-bordered table within the same.

What are bootstrap alerts and how will you create them?

Bootstrap Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions. You can add an optional close icon to alert. Also, you can add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes.

List Any Three Components of Bootstrap.

1. Navbar: acts like a header for navigation on your website
Syntax: <nav class = “navbar”><!—Code your navigation DOM elements –></nav>

2. Jumbotron: behaves like a viewport; can assume full screen to concentrate on a key content
Syntax: <div class = “jumbotron”><!—Write your content within DOM elements here –></div>

3. Progress bars: displays feedback highlighting the progress of an action
Syntax: <div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>

How to create thumbnails using Bootstrap?

To create thumbnails using Bootstrap you need to do the following:

Add an <a> tag with the class of .thumbnail around an image.
It will add four pixels of padding and a gray border.
Now, on hover, an animated glow will outline the image.

What is 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.

What do you mean by Bootstrap well?

Bootstrap well is nothing but a container that makes the content appear sunken. Sometimes it may also give an inset effect on the webpage. Thus, a developer can create a well and also wrap the content in the well with the help of <div> and class .well. The content would appear as per your wish.

What are glyphicons? How to use them?

Glyphicons are icon fonts which can be used in your web projects. Glyphicons Halflings are not free and require licensing. However, their creator has made them available for Bootstrap projects without any cost.

To use the icons, you just have to use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.

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

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

How do you Create a Vertical or Basic Form in Bootstrap?

Following are the steps to create a vertical basic form in Bootstrap:

Step 1: To the parent <form> element, add a role form.

Step 2: Add labels and controls inside a <div> with class.form-group

Step 3: Add the .form-control class to every text URL <input>, all <textarea> as well as <select> elements.

Please enumerate the various contextual classes available for styling the panels in Bootstrap.

Various contextual classes used in Bootstrap for styling the panels, i.e. making them more meaningful, are:

.panel-danger
.panel-info
.panel-primary
.panel-success
.panel-warning

Can you explain the purpose of the Scrollspy plugin?

Using the Scrollspy plugin in Bootstrap allows you to target certain sections of the page based on the scroll position. Thereafter, you can add .active classes, based on the scroll position, to the Bootstrap navbar.

What is the difference between Bootstrap and Foundation?

To show that you know the difference between the two, you can highlight these points:

1. Bootstrap uses pixels, whereas Foundation uses REMs.
2. Bootstrap's preprocessor is LESS, Foundation's preprocessor is Sass and Compass.
3. Bootstrap can design for desktop and mobile browsers, Foundation prioritizes mobile displays.

What purposes do the .media and .useful classes serve in Bootstrap?

The .media class allows a media object, such as audio, images, or video, to float to the left or right of a content block. For adding article lists or comment threads to an unordered list, we use the .useful class.

What types of layout are available in Bootstrap?

For this question, there are two answers you can choose from. Bootstrap uses the following layout types:

a) Fluid layout works with applications designed to use the entire width of a screen.
b) Fixed layout works for standard screens.

What do you understand by Bootstrap media objects?

Bootstrap media objects are abstract object styles for building different types of components, such as blog comments and Tweets, which feature either a left-aligned or right-aligned image and textual content.

The main aim of a Bootstrap media object is to make code required for developing blocks of information incredibly smaller. In order to achieve easy extensibility, lightweight markup, and other desirable aspects, classes are applied to some of the simple markups.

What are the Four Contextual Classes to Use with Bootstrap’s Progressive Bar.

Following are the four contextual classes that are used with Bootstrap’s progressive bar:

1. Progress-success
2. Progress-info
3. Progress-warning
4. Progress-danger

Explain Dropdowns and Button Groups in Bootstrap.

A dropdown is a dynamic toggle menu that contains a list of linked items under it. It is one of the cleanest design elements of a website.

The syntax to use these Dropdowns is:

<div class= “dropdown”><!– have your list in this with the class .dropdown-menu –></div>

Button Groups are a series of buttons placed in an adjacent manner. This Bootstrap component requires that division elements with .btn-group class be defined first. After that, the button elements are nested using.btn class.

The syntax is as follows:

<div class=“btn-group”><button class= “btn”>Correct</button></div>

<div class=“btn-group”><button class= “btn”>Wrong</button></div>

Using the above two components, you can create a new component called the Button Dropdown that would enable you to trigger a dropdown using a button element.

Syntax:

<button class = “btn-default dropdown-toggle”><!— the dropdown component goes here –></button>

Explain types of lists supported by Bootstrap.

Bootstrap supports three types of lists such as:

1. Ordered lists − An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.

2. Unordered lists − An unordered list is a list that doesn’t have any particular order and is traditionally styled with bullets. If you do not want the bullets to appear then you can remove the styling by using the class .list-unstyled.

3. Definition lists − In this type of list, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for definition term. Subsequently, the <dd> is the definition of the <dt>.

15) What is the role of the media objects in Bootstrap and how many types are available?

In Bootstrap, it is possible to add images, audio, and video using media object. It can either be placed on the left side or the right side of the content. If the developer wishes to create a media element then they can use .media a class where the source will be specified as a .media-object class. There are usually two types of Media-objects i.e. .media and .media-list.

What is media object in Bootstrap and what are their types?

Media objects in Bootstrap help you to put media object like image, video or audio to the left or right of the content blocks. Media element can be created using the class .media and the source is specified in using the class .media-object. Media-objects are of two types.

The two types of media object are:

.media
.media-list

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

What is a progress bar in bootstrap?

Progress bar is used with HTML tag style in HTML element using <progress> keyword. In bootstrap we use html5 <progress> with CSS classes that have special features in bootstrap, that is only made for the progress bar.

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.

Please provide an explanation of input groups in Bootstrap.

Input groups are simply extended Form Controls in Bootstrap. One can easily append and prepend buttons or text to the text-based inputs using the input groups. Appending and prepending content to an input field allows adding common elements to the user input.

You can append or prepend elements to a .form-control by:

Wrapping it in a <div> element with the class .input-group
With the same <div> element, put the extra content inside a <span> element with the .input-group-addon class
Finally, place the <span> element before or after the <input> element as required

What are the Various Features of Bootstrap?

Following are some features of Bootstrap:

– It is a free, open-source platform; allows developers to contribute to its improvement.

– Bootstrap is fast, responsive and extremely easy to use

– It is compatible to use with all browsers

– Bootstrap has a rich library of designs and templates to choose from

What Makes Bootstrap an Effective Option for Mobile and Web Development?

Bootstrap’s quick and easy to use layout allows for faster development of mobile and web applications. The design templates included are highly responsive and automatically adjust themselves to different screen sizes without any compromise to the essence of a webpage.

Explain the typography and links in Bootstrap.

Bootstrap sets a basic global display (background), typography, and link styles.

a) Basic Global display − It sets background-color: #fff; on the <body> element.

b) Typography − This uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base

c) Link styles − It sets the global link color via attribute @link-color and applies link underlines only on :hover

Explain what pagination in bootstrap is and how they are classified?

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

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

What function you can use to wrap a page content?

To wrap a page content you can use .container and using that you can also center the content.

Why do we use Jumbotron in Bootstrap?

Jumbotron is used for highlighting content in bootstrap. It could either be a slogan or probably a headline. It increases the heading size and gives a margin for the content of the landing page. To implement Jumbotron in a Bootstrap, you have to use:

Create a container <div> with the class of .jumbotron
For example, use <div class=”container”> if you don’t want Jumbotron to reach the screen’s edge.

Give an example of a basic grid structure in Bootstrap.

Example of a basic grid structure:

<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>

<div class = "row">...</div>
</div>
<div class = "container">....

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.

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

How many types of layout are available in Bootstrap?

There are two major layouts for Bootstrap:

1. Fluid Layout- This layout is necessary for creating an app that is 100 % wider and covers all the screen width.
2. Fixed Layout- It is used only for a standard screen (940px). Both layouts can be used for creating a responsive design.

What are Class loaders in Bootstrap?

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

Please explain Normalize in Bootstrap.

For establishing cross-browser consistency, Bootstrap makes use of Normalize. It is a small CSS file capable of offering better cross-browser consistency in the default styling of HTML elements. Also, Normalize.css is an HTML5-ready and modern alternative to CSS resets.

What Makes Bootstrap an Effective Option for Mobile and Web Development?

Bootstrap’s quick and easy to use layout allows for faster development of mobile and web applications. The design templates included are highly responsive and automatically adjust themselves to different screen sizes without any compromise to the essence of a webpage.

What are the Key Components of Bootstrap?

Bootstrap is loaded with a number of components that make way for an excellent user experience. These include interactive features like pop-ups, dropdown menus, navigation bars, buttons, forms, alerts, etc.

Following are the key components of Bootstrap:

1. JS Plugins: this is where JS and jQuery plugins are
2. Customize: used to customize frameworks
3. CSS: includes CSS files
4. Scaffolding: contains a grid system, background styles, etc

What are the types of layout available in Bootstrap?

In Bootstrap there are two types of Layout available

1. 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
2. Fixed Layout: For a standard screen you will use fixed layout (940 px) option

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.

Explain why Bootstrap is preferred for website development.

Bootstrap has better features as compared to other web development platforms. It provides extensive browser support for almost every known browser such as Opera, Chrome, Firefox, Safari, etc. If you are well-acquainted with CSS and HTML, web development becomes easy on Bootstrap.Also, it supports mobile applications with the help of responsive design and can adjust CSS as per the device, screen size, etc. Instead of creating multiple files, it creates only a single file reducing the work of a developer.

What is Bootstrap?

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.

Search
R4R Team
R4R provides Bootstrap Freshers questions and answers (Bootstrap Interview Questions and Answers) .The questions on R4R.in website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,Bootstrap interview question set 1,Bootstrap Freshers & Experienced Interview Questions and Answers,Bootstrap Objetive choice questions and answers,Bootstrap Multiple choice questions and answers,Bootstrap objective, Bootstrap questions , Bootstrap answers,Bootstrap MCQs questions and answers Java, C ,C++, ASP, ASP.net C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for Bootstrap fresher interview questions ,Bootstrap Experienced interview questions,Bootstrap fresher interview questions and answers ,Bootstrap Experienced interview questions and answers,tricky Bootstrap queries for interview pdf,complex Bootstrap for practice with answers,Bootstrap for practice with answers You can search job and get offer latters by studing r4r.in .learn in easy ways .