1. Do you know what is Bootstrap well?

Bootstrap well is a container <div> that makes the content to appear 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.

2. Tell me 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.

3. What is button group in Bootstrap?

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.

4. What is Bootstrap Container in Bootstrap?

Bootstrap container is a class which is useful and creating a centred area in the page for display.

5. Tell me 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')

6. What is Fluid Layout in Bootstrap?

Fluid layout adapts itself to different browser. Means design automatic adjust according to browser size.

7. What is Bootstrap collapsing elements?

Bootstrap collapsing elements enables you to collapse any element without using external JavaScript.

8. Do you know what is Bootstrap Jumbotron?

As the name suggest this component can optionally increase the size of headings and add a lot of margin for landing page content. To use the Jumbotron −

☛ Create a container <div> with the class of .jumbotron.
☛ In addition to a larger <h1>, the font-weight is reduced to 200px.

9. How to add badge to list group in Bootstrap?

<span class="badge"></span> in LI Tag

10. Tell me what is the purpose of .media class in bootstrap?

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

Download Interview PDF

11. How to make images responsive in Bootstrap?

Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

12. Do you know what are bootstrap labels?

Bootstrap labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels.

13. Is Bootstrap Open Source?

Bootstrap is completely free to download and use.

14. Do you know what are bootstrap panels?

Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element.

15. What are current Stable version of Bootstrap?

Version: 3.3.7, Dated: July 25, 2016

16. What is responsive layout?

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.

17. How do you use Glyphicons in Bootstrap?

To use the icons, simply 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>

18. Tell me 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

To use the Jumbotron in Bootstrap

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

19. How to order columns in Bootstrap?

You can easily change the order of built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes where * range from 1 to 11.

20. Tell me how will you create a vertical pills navigation menu?

You can stack the pills vertically using the class .nav-stacked along with the classes: .nav, .nav-pills.

21. Is Bootstrap Browser compatibility?

Bootstrap is compatible with all modern browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and Opera.

22. What function you can use to wrap a page content?

.container

23. Do you know what is Scrollspy plugin?

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.

24. What is a Modal Plugin in Bootstrap?

A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more.

25. Do you know what is Twitter Bootstrap?

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.

Download Interview PDF

26. Tell me how will you create a tabbed navigation menu?

To create a tabbed navigation menu −

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

27. Explain me can you put a listgroup within bootstrap panel?

Yes! You can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also add class .panel-default to this element. Now within this panel include your list groups.

28. What is Fixed Layout in Bootstrap?

Fixed layout doesn't adapts itself to different browser but it can be responsive.

29. Is Bootstrap Easy to use?

Bootstrap is very easy to use. Anyone with the basic knowledge of HTML and CSS can start development with Bootstrap.

30. What is Media Object?

Media objects in Bootstrap enables to put media object like image, video or audio

31. Do you know who developed the Bootstrap?

Mark Otto and Jacob Thornton at Twitter

32. Tell me how will you customize links of pagination?

You can customize links by using .disabled for unclickable links and .active to indicate the current page.

33. Tell me what are Bootstrap media queries?

Media Queries in Bootstrap allow you to move, show and hide content based on viewport size.

34. Tell me 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.

35. Tell me 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.

36. Tell me how to create a navbar in bootstrap?

To create a default navbar −

☛ Add the classes .navbar, .navbar-default to the <nav> tag.
☛ Add role = "navigation" to the above element, to help with accessibility.
☛ Add a header class .navbar-header to the <div> element. Include an <a> element with class navbar-brand. This will give the text a slightly larger size.
☛ To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.

37. Tell me can you put a table within bootstrap panel?

Yes! To get a non-bordered table within a panel, use the class .table within the panel. Suppose there is a <div> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, then the component moves from panel header to table without interruption.

38. What is Jumbotron?

Jumbotron is used for content that you want to highlight like some slogan OR marketing headline.

39. What are Bootstrap 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.

40. What is difference between Fluid Layout and responsive Layout?

Fluid layout adapts itself to different browser window sizes, all the values used are calculated proportionally to the viewport size, so when resizing, all the columns are resized.

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

Download Interview PDF

41. Tell us what contextual classes are available to style the panels?

Use contextual state classes such as, panel-primary, panel-success, panel-info, panel-warning, panel-danger, to make a panel more meaningful to a particular context.

42. Tell me which class is used for basic button group?

.btn-group class is used for a basic button group. Wrap a series of buttons with class .btn in .btn-group.

43. Do you know 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.

To create Tabular Navigation or Tabs

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

44. Tell me what is column ordering and how it works?

In bootstrap columns are displayed in the order in which they are defined. Now If there is a requirement to change the ordering of columns then we can use column ordering classes defined in bootstrap. We have following 2 classes for column ordering;

.col-md-push- *

.col-md-pull- *

Here * represents the number of columns to be ordered.

Note: push and pull are relative. If you push a column towards right then you need to pull a column towards left in order to keep design consistent. In place of md we may also use sm, lg, xs depending the size of the screen for which you want to implement column ordering.

45. Do you know 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-*

the order of the column can be easily changed.

46. Do you know what global styles are applied as a part of Bootstrap's default typography?

Bootstrap sets the global default font-size to 14px, with a line-height of 1.428. The default font is changed to Helvetica and Arial with sans serif fallback. All these styles are applied to the <body> and all paragraphs, with the addition that <p> (paragraphs) receive a bottom margin of half their computed line-height, which is 10px by default.

47. Do you know what is Normalize in Bootstrap?

Bootstrap uses Normalize to establish cross browser consistency.

Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.

48. Explain me what are bootstrap badges?

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.

49. How to give a style to images in Bootstrap?

By using the Bootstrap classes we can easily style images like making images round, cornered, or circular, or we can give a thumbnail effect on images. We have the following classes for image shapes.

☛ Rounded Corners - The .img-rounded class used for adding rounded corners to an image.
☛ Circle - The .img-circle class used for shaping the image to a circle.
☛ Thumbnail - The .img-thumbnail class used for shaping the image to a thumbnail.

50. What to display code in bootstrap?

you can use following tags
<code></code>

51. Explain me how will you create a stacked progress bar using bootstrap?

You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them.

52. What is a transition plugin in Bootstrap?

The transition plugin provides simple transition effects such as Sliding or fading in modals.

53. Tell me 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

54. Tell me 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

55. Explain me how will you create a bootstrap panel with footer?

You can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.

Download Interview PDF

56. Explain what is grid system in bootstrap?

Bootstrap provides a responsive grid system that appropriately scales up to 12 columns as the device or viewport size increases. To create a responsive layout using bootstrap 12 column structure these points need to be considered

☛ All the rows must be placed inside of a div having class .container or .container-fluid
☛ Create a div having class .row to group column
☛ Add columns inside row as immediate children of row
☛ Place all content inside columns
☛ There are pre-defined classes for columns. These classes are col-md-*, col-sm-*, col-lg-*, col-sx-*where * represent number from 1 to 12. These classes take effect as per viewport of the device.

if a row has column with class .col-sm-4 then it mean it will occupy first 4 column for small device and full width in extra small device.

similarly column with class .col-sm-8 will occupy next 8 column in the row and full width for extra small device.

57. Tell me which classes can be applied to button group instead of resizing each button?

.btn-group-lg, .btn-group-sm, .btn-group-xs classes can be applied to button group instead of resizing each button.

58. Explain me how you can add badge to list group in Bootstrap?

To add badge to list group in Bootstrap you have to simply add <span class = “badge”> within the <li> element.

59. Tell me what the following code does, and where they are useful:

<a href="#">Home <span class="badge">36</span></a>

This code will generate a link with an inline badge that provides important notifications to the user, such as number received or unread messages or number of friend requests. Badges are most commonly used in message applications and social networking sites.

60. Tell me what are Offset columns?

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.

61. Explain me how will you create a pills navigation menu?

To create a pills navigation menu −

Start with a basic unordered list with the base class of .nav.
Add class .nav-pills.

62. Do you know what are bootstrap media objects?

These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content. The goal of the media object is to make the code for developing these blocks of information drastically shorter.

The goal of media objects (light markup, easy extendability) is achieved by applying classes to some of the simple markup.

63. Tell me what is affix plugin?

The affix plugin allows a <div> 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 <div> will be locked in place and will stop scrolling with the rest of the page.

64. What is Modal plugin used for in Bootstrap?

Modal Plugin is a child window that is layered over its parent window

65. Tell me what are the responsive design patterns?

Responsive design patterns provide a consistent look and feel and responsiveness across desktop, tablet and mobile devices

There are following patterns for responsive design.
☛ Column drop pattern
☛ Mostly fluid pattern
☛ Layout shifter pattern
☛ Tiny tweaks
☛ Off canvas

66. Tell me how to customize thumbnails using Bootstrap?

it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Follow the steps below −

☛ Change the <a> tag that has a class of .thumbnail to a <div>.
☛ Inside of that <div>, you can add anything you need. As this is a <div>, we can use the default span-based naming convention for sizing.
☛ If you want to group multiple images, place them in an unordered list, and each list item will be floated to the left.

67. Do you know why use Bootstrap?

Bootstrap can be used as −

☛ 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.
☛ Popular Browser
☛ Easy to get started − With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.
☛ 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 which are easy to customize.
☛ It also provides web based customization.
☛ And best of all it is an open source.

68. Do you know what is Bootstrap Grid System?

For creating page layout through a series of rows and columns that house your content Bootstrap Grid Sytem is used.

69. Tell me what is Contextual classes of table in Bootstrap?

The Contextual classes allow you to change the background color of your table rows or individual cells.

Class Description
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

70. Tell me how will you create a progress bar using bootstrap?

To create a basic progress bar −

☛ Add a <div> with a class of .progress.
☛ Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
☛ Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Download Interview PDF

71. Explain me the Bootstrap basic table?

The following table elements are used with Bootstrap:
☛ <table> - It is used for wrapping element for displaying data in a tabular format
☛ <thead> - It is used for container element for table header rows (<tr>) to label table columns.
☛ <tbody> - It is used for container element for table rows (<tr>) in the body of the table.
☛ <tr> - It is used for container element for a set of table cells (<td> or <th>) that appears on a single row.
☛ <th> - Special table cell for column (or row) labels. It must be used within a <thread>
☛ <td> - It is used for default table cell.
☛ <caption> - It is used for description or summary of what the table holds.

Bootstrap Basic Table:
We can create a basic Bootstrap table with basic styling that has a small cell padding and only horizontal dividers by adding Bootstrap class ".table" to the <table> element.

72. Tell me what are different shapes for image in bootstrap?

By Default bootstrap provides 3 classes for image shape.

☛ Rounded image
☛ Circle shape image
☛ Thumbnail image

Example:
<img src=""; alt="rounded image" class="img-rounded">
<img src=""; alt="circle image" class="img-circle">
<img src=""; alt="thumbnail image" class="img-thumbnail">

73. What are the components of Bootstrap?

Bootstrap provides dozens of components which are helpful to create modern and responsive web pages. Bootstrap components are itself responsive.

Major components provided by bootstrap are listed below:

☛ Glyphicons
☛ Navigation bar
☛ Breadcrumbs
☛ Pagination
☛ Badges
☛ Dropdown
☛ Thumbnails
☛ Alerts
☛ Progress bars
☛ List groups
☛ Panels
☛ Tabs
☛ Tooltip
☛ Carousel
☛ Model popup

74. Explain what are the advantages of Bootstrap?

There are many advantages of using Bootstrap:
☛ Bootstrap Css library takes care of our UI to make interactive mobile + desktop enabled websites, developers can even create a fully furnished jaw dropping website easily.
☛ The speed of development can be increased with the help of Bootstrap.
☛ With the increase in mobile first, website designers need to work a lot in order to make the UI adapt to all kinds of devices, whereas with the help of bootstrap this overhead has been reduced to quite an extent.
☛ Responsive Grid: As you go in depth with Bootstrap and read about Grid you will see that 12 columns are grids and are responsive and you can make them self-adjusting according to the device.
☛ There is a huge list of Components -- Dropdown menu, badges etc. A few have been discussed in this article.
☛ Easy to read documentation: I personally believe if you want to learn Bootstrap from scratch http://getbootstrap.com/ documentation is easy and great to start with. I personally appreciate their efforts we can go back to the site whenever we something is needed in our View.
☛ Themes: Bootstrap provides free colorful themes that can be used in our Web Application.

75. What are different types of Media Object?

☛ .media
☛ .media-list

76. Explain me how will you create a alternate progress bar using bootstrap?

To create a progress bar with different styles −

☛ Add a <div> with a class of .progress.
☛ Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.
☛ Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

77. Tell me which class make a set of buttons appear vertically stacked rather than horizontally?

.btn-group-vertical class make a set of buttons appear vertically stacked rather than horizontally.

78. Explain me a basic grid structure in Bootstrap

Following is basic structure of Bootstrap grid −

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

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

79. Tell me what is the difference between the following two lines of code?

$('#myModalPrompt').modal({ keyboard: false });
$.fn.modal.Constructor.DEFAULTS.keyboard = false;?

In the first line will initialize a modal dialog prompt with id #myModalPrompt, and set only it to ignore keyboard event. The second line will change the default settings for the modal plugin by modifying the plugin's Constructor.DEFAULTS object, and will have an impact on all modal dialog prompts.

80. Tell me 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.

81. Tell me 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

82. Please consider the HTML code snippet below.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="My Title">Hover over me</button>

What is missing for a tooltip to show properly?

Bootstrap's Tooltip plugin is not CSS-only, like other plugins are. For performance reasons, the Tooltip plugin is opt-in, and to use it you must initialize it using JavaScript with the following example code:

$(function () {
$('[data-toggle="tooltip"]').tooltip();
});

83. Tell me the typography and links in Bootstrap?

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

☛ Basic Global display − Sets background-color: #fff; on the <body> element.

☛ Typography − Uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base

☛ Link styles − Sets the global link color via attribute @link-color and apply link underlines only on :hover.

84. Explain me how to create thumbnails using Bootstrap?

To create thumbnails using Bootstrap −

☛ Add an <a> 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.

85. Tell me how will you create a striped progress bar using bootstrap?

To create a striped progress bar −

☛ Add a <div> with a class of .progress and .progress-striped.
☛ Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.
☛ Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Download Interview PDF

86. Tell me what do you understand about Responsive websites?

The first understanding of Responsive websites that comes to a beginner's mind is that responsive means a website that responds to a user. But actually, responsiveness here means that a website is designed in such a way that it can be used on any platform whether it is a large desktop, laptop, tablet or mobile.

So a responsive website actually is one that responds to the changing width and height of a device or screen.

Benefits of a responsive website:
☛ We all know that in today's world, all of the business work can be done using a small device like a tablet or a mobile. So it makes it easier for the user to access the website using a device, thus, increasing the user base and traffic on a website.
☛ When the user base increases, it also adds to the increase in the business of the website and the product sale will also increase.
☛ Makes it easy for an organization to analyze the user base and its productivity.
☛ Increase in the visibility in search engines. This is the major part of the success of an organization.
☛ Save time and cost on mobile development.

87. Explain what is column offset in bootstrap?

Column offset in bootstrap provides a more flexible approach for creating layouts. Use class .offset* to shift column right side of the screen. Here * represents number of columns to be shifted. E.g. If there is a class .offser4 on a div then it will shift 4 column from left side towards the right side of the screen.

Example
<div class="row">
<div>...</div>
<div class="offset3">
...
</div>
</div>

88. What is panel in Bootstrap?

A panel in bootstrap is a bordered box with some padding around its content. To create a basic panel, we use .panel class to the <div> element, and content inside the panel has a .panel-body class.

89. How to classified pagination in bootstrap?

Add class "pagination" on your page for pagination.
.disabled, .active are available
.pagination-Ig, .pagination-sm to get different sizes

90. Explain what is the purpose of .media-list class in bootstrap?

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.

91. Tell me how will you create a bootstrap alert?

You can add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

92. Tell me which class is used for basic pagination?

.pagination class is uesed to add the pagination on a page.

93. What is Lead Body Copy in Bootstrap?

To add some emphasis to a paragraph, add class = "lead". This will give you larger font size, lighter weight, and a taller line height

94. Please consider the following HTML code snippet:

<div class="row">
<div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
<div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
<div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
<div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
</div>

Tell me what will be the output of the following HTML code on mobile and on desktop view?

.col-xs-* class defines the number of grids for extra small devices, and .col-md-* defines the number of grids for desktop devices and above. This example will render on the desktop with four columns, and on mobile the columns will have full width and will be stacked on each other.

95. Do you know what are bootstrap alerts?

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.

96. Explain me types of lists supported by Bootstrap?

Bootstrap supports ordered lists, unordered lists, and definition lists.

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

☛ 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. You can also place all list items on a single line using the class .list-inline.

☛ 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, and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, the <dd> is the definition of the <dt>.

☛ You can make terms and descriptions in <dl> line up side-by-side using class dl-horizontal.

97. Tell me what will be the default Bootstrap look of the alert created with this following code:

<div class="alert" role="alert">Warning! Tell me what I'm missing something.</div>

Alert messages are used to provide feedback message that usually require the attention of the user. Here it is important to note that Bootstrap Alerts don't have default class. If a contextual class such as .alert-success, .alert-info, .alert-warning, or .alert-danger, is not provided, a default gray alert will be created.

98. Do you know 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')

99. Do you know 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

 tag: If you want to display the code as a standalone block element or it has multiple lines then you should use 
 tag

100. Do you know 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.

Download Interview PDF

101. Tell me what media object in Bootstrap is and what are their types?

Media objects in Bootstrap enables 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,

They are of two types

☛ .media
☛ .media-list

102. Explain me what is the difference between Bootstrap and Foundation?

Bootstrap:
☛ Bootstrap offers unlimited number of UI elements
☛ Bootstraps uses pixels
☛ Bootstrap encourages to design for both desktop and mobile.
☛ Bootstrap support LESS as its preprocessor

Foundation:
☛ In Foundation UI element options are very limited in numbers
☛ Foundation use REMs
☛ Foundation encourages to design mobile first
☛ Foundation support Sass and Compass as its preprocessor

103. Tell me what will be the output of the following HTML code:

<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Nested item 2.1</li>
<li>Nested item 2.2</li>
<li>Nested item 2.3</li>
</ul>
<li>Item 3</li>
</ul>

If we apply .list-unstyled to a list, it will remove the default list-style and left margin on the list items. But only for the immediate children. Main list items will be without any style, and nested list items will still have default unordered nested list-style.

104. Explain me how many different media queries are used by the Bootstrap grid system by default?

The Bootstrap grid system provides four tiers of classes: xs for phones (<768px), sm for tablets (≥768px), md for desktops (≥992px), and lg for large desktops (≥1200px). The hidden trick in this question is that there are only three media queries. Bootstrap is mobile first by design, so the default styles are for small devices, and media queries are then added on for larger screens, as follow in LESS code:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

105. Explain me how do you use the Dropdown plugin?

You can toggle the dropdown plugin's hidden content −

☛ Via data attributes − Add data-toggle = "dropdown" to a link or button to toggle a dropdown as shown below −

<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>

☛ If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href="#" −

<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
Dropdown

<span class = "caret"></span>
</a>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>

</div>

☛ Via JavaScript − To call the dropdown toggle via JavaScript, use the following method −

$('.dropdown-toggle').dropdown()

106. Do you know what are input groups?

Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs.

By adding prepended and appended content to an input field, you can add common elements to the user's input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface.

To prepend or append elements to a .form-control −

☛ Wrap it in a <div> with class .input-group
☛ As a next step, within that same <div> , place your extra content inside a <span> with class .input-group-addon.
☛ Now place this <span> either before or after the <input> element.

107. Explain me how will you create a Bootstrap Dismissal Alert?

To build a dismissal alert −

☛ Add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).
☛ Also add optional .alert-dismissable to the above <div> class.
☛ Add a close button.
☛ Use the <button> element with the data-dismiss = "alert" data attribute.

108. Tell me how will you create a animated progress bar using bootstrap?

To create an animated progress bar −

☛ Add a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped.
☛ Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
☛ Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

109. Tell me how will you create a bootstrap panel with heading?

here are two ways to add panel heading −

☛ Use .panel-heading class to easily add a heading container to your panel.
☛ Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

110. In Which language Bootstrap is written?

☛ HTML
☛ CSS
☛ LESS
☛ Sass
☛ JavaScript

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

112. What are different types of layout available in Bootstrap?

☛ Fluid Layout
☛ Fixed Layout

113. Do you know what are the key components of Bootstrap?

☛ Plenty of CSS files
☛ Scaffolding
☛ List of layout components
☛ JavaScript Plugins
☛ Customize your components

114. Tell me which class is used to draw a toolbar of buttons?

.btn-toolbar helps to combine sets of <div class = "btn-group"> into a <div class = "btn-toolbar"> for more complex components.

115. Tell me 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.

Download Interview PDF

116. Tell me what does Bootstrap package includes?

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.

117. Now please consider the HTML code snippet below. What will the output be, and why?

<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 65%">
<span class="sr-only">65% sucesfuly completed</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% completed with warnings</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 15%">
<span class="sr-only">15% did not complete</span>
</div>
</div>

By placing multiple bars under the same .progress parent element, Bootstrap will stack them into one single progress bar. Since the sum of the progress bar is 100%, the progress bar will be full width and fully populated.

118. Do you know what dependencies does Bootstrap require for it to work properly?

The only dependency that Bootsrap requires to work properly is jQuery, and this is only for Bootstrap's JavaScript plugins. At the moment, Bootsrap v3.3.4 requires jQuery v1.9.1 or later.

119. Do you know what is Bootstrap Container?

Bootstrap container is a class which is useful and creates a centered 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.

120. Do you know 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

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

121. Tell me 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

122. Explain me what is Bootstrap caraousel?

The Bootstrap carousel is a flexible, responsive way to add a slider to your site. In addition to being responsive, the content is flexible enough to allow images, iframes, videos, or just about any type of content that you might want.

123. Explain me what is bootstrap navbar?

The navbar is one of the prominent features of Bootstrap sites. Navbars are responsive 'meta' components that serve as navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes styling for site names and basic navigation.

124. Explain me 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 (bootstrap.min.css).

125. Tell me what is Bootstrap page header?

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.

126. Please explain what is bootstrap well?

A well is a container in <div> that causes the content to appear sunken or an inset effect on the page. To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .well.

127. What is bootstrap?

Bootstrap is a framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.

128. Tell us what is 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.