Read [BEST] Bootstrap Interview Questions & Answers [ STEP-IN ]
Last updated on 04th Jul 2020, Blog, Interview Questions
- These Bootstrap Interview Questions have been designed specially to get you acquainted with the nature of questions you may encounter during your interview for the subject of Bootstrap . As per my experience good interviewers hardly plan to ask any particular question during your interview, normally questions start with some basic concept of the subject and later they continue based on further discussion and what you answer.we are going to cover top 100 Bootstrap Interview questions along with their detailed answers.
- We will be covering Bootstrap scenario based interview questions, Bootstrap interview questions for freshers as well as Bootstrap interview questions and answers for experienced.
Q1. Define Bootstrap?
Bootstrap is a front-end framework that is used for creating HTML, CSS, and JS web applications. Its layout is very responsive, fast and easy to use. It mostly focuses on building a mobile application with having design templates for creating UI like Dropdown, Forms, Buttons, Alerts Tab, etc.
Q2. Why Bootstrap is used for Mobile Web development?
It is used for Mobile Web development because it has responsive designs and templates which are easy to use.
Q3. Explain the features of Bootstrap?
Its features include:
- Open source for use
- Compatibility with all browsers.
- Responsive designs
- Easy to use and fast.
Q4. Define the key components of Bootstrap?
Its components include:
- Scaffolding: It has the grid system, background, styles.
- JS Plugins: Contains JS and jQuery plugins.
- Customize: Can customize frameworks.
- CSS: Contains CSS files.
Q5. What do you understand by Bootstrap container?
Bootstrap container behaves like a container where you can put HTML code and it is a part within the page where the content of the site can be placed to make it responsive and fast.
Q6. What do you mean by Bootstrap Classloader?
Bootstrap class loader is a part of java and a main parental class of class loader.
Q7. How many types of layouts are there in Bootstrap?
There are two types of layouts in Bootstrap.
- Fluid Layout
- Fixed Layout
Q8. Define Fluid Layout?
Fluid Layout is useful when you need to make an app that involves the full width of the screen i.e. Fluid Layout adjusts itself according to the browser size.
Q9. Define Fixed Layout?
A fixed layout is responsive and easy to use but just like the fluid layout, it cannot adjust itself according to the browser size. The fixed layout should be 940 px in most cases.
Q10. How can you display code in Bootstrap?
You can display the code in two ways i.e. by using the <code>tag and by using the <pre>tag.
Q11.What is Twitter Bootstrap?
Q12.What is the use of 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.
- 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.
Q13.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.
- Customize − You can customize Bootstrap’s components, LESS variables, and jQuery plugins to get your very own version.
Q14.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.
Q15.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.
Q16.What are Bootstrap media queries?
Media Queries in Bootstrap allow you to move, show and hide content based on viewport size.
Q17.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.
Q18.How can you 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.
Q19.How do you make images responsive?
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.
Q20.Explain 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.
Q21.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.
Q22.What is Lead Body Copy?
To add some emphasis to a paragraph, add class = “lead”. This will give you larger font size, lighter weight, and a taller line height
Q23.Explain 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>.
Q24.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.
Q25.How do you use Glyphicons?
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.
Q26.What is a transition plugin?
The transition plugin provides simple transition effects such as Sliding or fading in modals.
Q27.What is a Modal Plugin?
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.
Q28.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.
Q29. When will you use <code>tag and <pre>tag?
<code>tag is used to show the code inline and <pre>tag is used to show code with multiple lines.
Q30. 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, which is only made for the progress bar.
Q31. Name the contextual classes that are used with the progressive bar in bootstrap?
The contextual classes used with progressive bar are as follows.
Q32. What are responsive utility classes in Bootstrap?
Responsive utility classes in bootstrap are a set of classes that are used to conceal or exhibit the HTML elements based on screen resolution that discerns by media query in bootstrap.Example: “hidden-md-down”, It hides
Q33. What are the different button styles in Bootstrap?
In bootstrap, there are seven styles which we can use with the bootstrap button.
Q34. What are Bootstrap alerts?
This is used to create presume alert messages, which adds style to the messages to look more noticeable to the user.
Q35. How many tables are there in alerts?
There are four classes in alerts: .alert-success, .alert-info, .alert-warning, .alert-danger.
Learn Bootstrap Training with In-Depth Concepts to Build Your Skills
- Instructor-led Sessions
- Real-life Case Studies
Q36. Define Bootstrap thumbnails?
It is a way to use the layout images, videos, text, etc. in a grid system. We can create thumbnails by adding a tag with the class .thumbnails around the image.This will add four pixels of padding and a grey border.
Q37. Explain Modal plugin in Bootstrap.
A model is an inherited window that is layered over its parent window. This is used to augment the user experience and adds different functionalities to the users. Model windows are created with the help of the modal plugin.
Q38. Which class is used for pagination in Bootstrap?
To add pagination on the webpage we have to use the class .pagination.
Q39. Explain what is Bootstrap collapsing elements.
Q40. What is Bootstrap Well?
Bootstrap well is a form of container which thrives or makes the content look recessed on the web page. It also wraps the content by using .well class.
Q41. Explain the uses of the carousel plugin in Bootstrap?
Carousel plugin in bootstrap is used to make sliders in the web pages or your site. There are several carousel plugins that are used in bootstrap to display large contents within a small space by adding sliders.Example: .carousel(options), .carousel(‘pause’), .carousel(cycle’), .carousel(‘prev’), .carousel(‘next’).
Q42. How can we customize links of pagination in Bootstrap?
We can customize the links by using .disabled for unclickable links and .active for indicating the current page.
Q43. Explain the input group in Bootstrap?
Input group in bootstrap is put out from controls. By using an input group, we can easily add prepended and appended text or button to the text-based inputs.
Q44. Write the ways to create a tabbed navigation menu in Bootstrap?
We can create tabbed navigation by making a basic unordered list with the base class of .nav and after this, we can add class .nav-tabs.
Q45. In Bootstrap, how can you create a pills navigation menu?
Pills navigation menu in bootstrap is created by making an unordered list at first with the base class of .nav and after this add the class .nav-pills.
Q46. How navbar works in Bootstrap?
In bootstrap, the navbar is an eminent feature to make a responsive meta component that works as navigation headers for your application and site. In the mobile view, the navbar collapses and becomes horizontal as the available viewport width increases.
Q47. How we can create a navbar in Bootstrap?
To create a navbar in a bootstrap at first, we have to add the classes .navbar, .navbar-default to the <nav> tag. After this, we have to add the role=” navigation” to the above element, and this will help inaccessibility.
Q48. What is Bootstrap breadcrumb?
Bootstrap breadcrumb is an efficient way to show hierarchy-based information for a site. This can show the dates of publishing, categories or tags in a blog. They also tell the user about the current page location within a navigational hierarchy.
Q49. What are labels in Bootstrap?
Bootstrap labels are used for offering counts, tips or other things to provide markup on web pages. To use the label in Bootstrap we use the class .labels to indicate the labels.
Q50. What are badges in Bootstrap?
Badges are homogeneous to labels, the main difference between them is corners are more rounded. The main work of badges in the bootstrap is to highlight new or unread items. To use badges just add <span class=”badge”> to links and bootstrap navs.
Q51.What is button group?
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.
Q52.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.
Q53.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.
Q54.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.
Q55.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.
Q56.Which class is used for basic pagination?
pagination class is uesed to add the pagination on a page.
Q57.What are bootstrap labels?
Bootstrap labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels.
Q58.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.
Get Hands-on Bootstrap Course from Real-Time ExpertssWeekday / Weekend BatchesSee Batch Details
Q59.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.
Q60.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.
Q61.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.
Q62.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.
Q63.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.
Q64.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.
Q65.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.
Q66.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.
Q67.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.
Q68. What is a jumbotron in Bootstrap?
It is used to increase the size of headings and to add a lot of margins for landing page content. To create a jumbotron we have to create a container <div> with the class of .jumbotron.
Q69. How can we make image responsive in Bootstrap?
After the updates in Bootstrap, currently the feature to make an image responsive has been added, we can do this by adding a class .img-responsive to the <img> tag. This class makes the width max-width =100%; and height=auto; to the image so that it matches nicely to the parent element.
Q70. What do you mean by normalize in Bootstrap?
Bootstrap normalize is a small CSS file that is used to make cross-browser consistency.
Q71. What is lead body copy in Bootstrap?
It is used to add some ascent to the paragraph if we add class=”lead”. This will enlarge the font size and taller line-height.
Q72. What are panels in Bootstrap?
Panels are components that are used when you want to put your DOM component in a box. So, to retrieve a basic panel we just need to add class.panel to the <div> element. We can also add class.panel-default to this element.
Q73. How will you create a Bootstrap panel with the heading?
There are two ways by which we can add panel heading.First is, we can directly use the .panel-heading class to add heading containers in a panel and the second way is by using any heading tag like <h1> to <h6> with a .panel-title class to give more styles on the heading.
Q74. What is a scrollspy plugin in Bootstrap?
It is an auto-updating nav plugin that allows in fetching section of the page based on the scroll position. This can be done by the .active class to the navbar based scroll position.
Q75. What is the work of the affix plugin in Bootstrap?
This plugin allows a <div> to be attached to a location on the page.Use of the social icon in a page is an example for this in which we see that the icons will start in a location, but when the page hits on a certain mark it will block the <div> in place and will stop the scrolling for rest of the page.
Q76. What is the grid system in Bootstrap?
By using the grid system, we can make up to 12 columns across a page. There are different classes that have been defined for this for the UI purpose.
Q77. What are Grid classes in the Bootstrap?
There are four grid classes in Bootstrap.
- xs (It is used for phone screens less than 786px wide).
- sm (It is used for the tablet screens which are greater than 786px wide).
- md (It is for small laptop screen of size equal to or greater than 992px wide).
- LG ( It is for laptop and desktop screens which are equal to greater than 1200px wide).
Q78. What are global styles that are used in Bootstrap Default Typography?
In Bootstrap the global default font-size is 14px and the line height is 1.428. The default font changes to Helvetica and Arial are with sans-serif fallback and all these styles are applicable for both body and all paragraphs.
Q79. What dependencies does Bootstrap require to work properly?
Q80. What are the two codes that are used for code display in Bootstrap?
The codes are <code> tag and <pre> tag.
Q81. What is the difference between Bootstrap and Foundation?
Bootstrap uses very fewer preprocessors as it supports less and it allows the designing and development for both mobile and desktop. On the other hand, Foundation supports sass processors and it is used only for mobile UI designing.
Q82. What are Glyphicons in Bootstrap?
By this, we can use the icon simply anywhere in your code.<span class=”glyphicon glyphicon-search”></span>
Q83. What is a transition plugin in Bootstrap?
It provides simple transition effects like sliding or fading in modals.
Q84. Explain the concept of creating a vertical or basic form in Bootstrap?
For this first we have to add a role form to the parent <form> element then we have to wrap labels and controls in a <div> with class.form-group and then we have to add a class of .form-control to all text url <input>,<textarea> and <select> elements.
Q85. 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.
Q86. List some features of Bootstrap?
Some of the features of Bootstrap are:
- It provides an open-source for use
- Bootstrap has Compatibility with all browsers
- It has Responsive designs
- Easy to use and fast
Q87. 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.
Q88. What is Bootstrap collapsing elements?
Q89. How can you create Nav elements in Bootstrap?
Bootstrap offers various options for styling navigation elements. All of these use the same markup and base class .nav. You need to perform the following steps to create Tabular Navigation or Tabs:
- Start with a basic unordered list with the base class of .nav
- Add class .nav-tabs
Q90. What are the input groups in Bootstrap?
Input groups are extended Form Controls. You can easily prepend and append text or buttons to the text-based inputs with the help of input groups. Also, you can add common elements to the user’s input
Q91. What are the bootstrap media objects?
The media objects are abstract object styles for building various types of components like blog comments, Tweets, etc. It features 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. And, this goal is achieved by applying classes to some of the simple markups.