Here we have mentioned most frequently asked Bootstrap Interview Questions and Answers specially for freshers and experienced.
1. Explain what is Bootstrap?
Ans:
Bootstrap is a HTML, CSS, and JS framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.
2. Explain why to choose Bootstrap for building the websites?
Ans:
There are few reason why we choose Bootstrap for building websites
Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers.
Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML
Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.
3. What are the key components of Bootstrap?
Ans:
The key components of Bootstrap are
CSS : It comes with plenty of CSS files
Scaffolding : It provides a basic structure with Grid system , link styles and background
Layout Components : List of layout components
JavaScript Plugins: It contains many jQuery and JavaScript plugins
Customize: To get your own version of framework you can customize your components
4. Explain what are class loaders in Bootstrap?
Ans:
Class loader is a part of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also does the process of converting a named class into its equivalent binary form.
5. What are the types of layout available in Bootstrap?
Ans:
In Bootstrap there are two types of Layout available
Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen
Fixed Layout: For a standard screen you will use fixed layout (940 px) option
6. Explain what is Bootstrap Grid System?
Ans:
For creating page layout through a series of rows and columns that house your content Bootstrap Grid Sytem is used.
7. What are offset columns in Bootstrap?
Ans:
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
8. What is column ordering in Bootstrap?
Ans:
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.
9. What function you can use to wrap a page content?
Ans:
To wrap a page content you can use .container and using that you can also center the content.
10. 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
.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
10. What is the use of Jumbotron in Bootstrap?
Ans:
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
11. What is the difference between Bootstrap and Foundation?
Ans:
Bootstrap | Foundation |
– Bootstrap offers unlimited number of UI elements | – In Foundation UI element options are very limited in numbers |
– Bootstraps uses pixels | – Foundation use REMs |
– Bootstrap encourages to design for both desktop and mobile. | – Foundation encourages to design mobile first |
– Bootstrap support LESS as its preprocessor | – Foundation support Sass and Compass as its preprocessor |
12. In Bootstrap what are the two ways you can display the code?
Ans:
< 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
13. How will you create a bootstrap panel with footer
Ans:
You can add footers to panels, by wrapping buttons or secondary text in a < div>containing class .panel-footer.
14. Explain what are the steps for creating basic or vertical forms?
Ans:
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
15. Explain what is Modal plugin used for in Bootstrap?
Ans:
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.
16. Explain what is Bootstrap Container?
Ans:
Bootstrap container is a class which is useful and creates a centred area within the page where our site content can be put within. The advantage of the bootstrap .container is that it is responsive and will place all our other HTML code.
17. Explain what is Bootstrap collapsing elements?
Ans:
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’)
18. Explain what is list group in Bootstrap and what is the use of it?
Ans:
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.
19. How you can add badge to list group in Bootstrap?
Ans:
To add badge to list group in Bootstrap you have to simply add < span class = “badge”> within the < li> element.
20. Explain what media object in Bootstrap is and what are their types?
Ans:
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
21. Explain what is Bootstrap well?
Ans:
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.
22. Explain how you can create Nav elements in Bootstrap?
Ans:
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
23. Explain what is the use of Bootstrap Carousel plugin?
Ans:
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’)
24. What is Twitter Bootstrap?
Ans:
Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.
25. Why use Bootstrap?
Ans:
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.
26. What does Bootstrap package includes?
Ans:
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.
27. What is Contextual classes of table in Bootstrap?
Ans:
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 |
28. What is Bootstrap Grid System?
Ans:
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.
29. What are Bootstrap media queries?
Ans:
Media Queries in Bootstrap allow you to move, show and hide content based on viewport size.
30. Show a basic grid structure in Bootstrap.
Ans:
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">....
31. What are Offset columns?
Ans:
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.
32. How can you order columns in Bootstrap?
Ans:
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.
33. How do you make images responsive?
Ans:
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.
34. Explain the typography and links in Bootstrap.
Ans:
Bootstrap sets a basic global display (background), typography, and link styles –
Basic Global display – Sets background-color: #fff; on theelement.
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.
35. What is Normalize in Bootstrap?
Ans:
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.
36. What is Lead Body Copy
Ans:
To add some emphasis to a paragraph, add class = “lead”. This will give you larger font size, lighter weight, and a taller line height
37. Explain types of lists supported by Bootstrap.
Ans:
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.
38. What are glyphicons?
Ans:
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.
39. How do you use Glyphicons?
Ans:
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.
40. What is a transition plugin?
Ans:
The transition plugin provides simple transition effects such as Sliding or fading in modals.
41. What is a Modal Plugin?
Ans:
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.
42. How do you use the Dropdown plugin?
Ans:
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()
43. What is Bootstrap caraousel?
Ans:
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.
44. What is button group
Ans:
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.
45. Which class is used for basic button group
Ans:
.btn-group class is used for a basic button group. Wrap a series of buttons with class .btn in .btn-group.
46. Which class is used to draw a toolbar of buttons
Ans:
.btn-toolbar helps to combine sets of
into a
47. Which classes can be applied to button group instead of resizing each button
Ans:
.btn-group-lg, .btn-group-sm, .btn-group-xs classes can be applied to button group instead of resizing each button.
48. Which class make a set of buttons appear vertically stacked rather than horizontally
Ans:
.btn-group-vertical class make a set of buttons appear vertically stacked rather than horizontally.
49. What are input groups
Ans:
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.
50. How will you create a tabbed navigation menu
Ans:
To create a tabbed navigation menu –
Start with a basic unordered list with the base class of .nav.
Add class .nav-tabs.
51. How will you create a pills navigation menu
Ans:
To create a pills navigation menu –
Start with a basic unordered list with the base class of .nav.
Add class .nav-pills.
52. How will you create a vertical pills navigation menu
Ans:
You can stack the pills vertically using the class .nav-stacked along with the classes: .nav, .nav-pills.
53. What is bootstrap navbar
Ans:
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.
54. What is bootstrap breadcrumb
Ans:
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).
55. Which class is used for basic pagination
Ans:
.pagination class is uesed to add the pagination on a page.
56. How will you customize links of pagination
Ans:
You can customize links by using .disabled for unclickable links and .active to indicate the current page.
57. What are bootstrap labels
Ans:
Bootstrap labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels.
58. What are bootstrap badges
Ans:
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.
59. What is Bootstrap Jumbotron
Ans:
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.
60. What is Bootstrap page header
Ans:
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.
61. How to create thumbnails using Bootstrap
Ans:
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.
62. How to customize thumbnails using Bootstrap
Ans:
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.
63. What are bootstrap alerts?
Ans:
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.
64. How will you create a bootstrap alert?
Ans:
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).
65. How will you create a Bootstrap Dismissal Alert?
Ans:
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.
66. How will you create a stacked progress bar using bootstrap
Ans:
You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them.
67. What are bootstrap media objects
Ans:
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.
68. What is the purpose of .media class in bootstrap?
Ans:
This class allows to float a media object (images, video, and audio) to the left or right of a content block.
69. What is the purpose of .media-list class in bootstrap
Ans:
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.
70. What contextual classes are available to style the panels
Ans:
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.
71. What is Scrollspy plugin
Ans:
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.
72. What is Bootstrap?
Ans:
Bootstrap is the most popular and powerful HTML, CSS, and JavaScript front-end framework for faster and easier use, responsive layout, and mobile-first web development. It includes design templates for UI components like Forms, Buttons, Tables, Navigation, Dropdowns, Alerts, Tabs, Accordion, Carousel and many others with optional JavaScript plugins.
Features of Bootstrap
- Easy to use
- Bootstrap is very easy to use. Anyone with the basic knowledge of HTML and CSS can start development with Bootstrap.
- Open Source
- Bootstrap is completely free to download and use.
- Browser compatibility
- Bootstrap is compatible with all modern browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and Opera.
- Responsive features
- By using Bootstrap we can easily create responsive designs for web pages. Bootstrap’s responsive CSS makes our web pages appear more appropriately on different devices as it adjusts to phones, tablets, and desktops.
73. Why choose Bootstrap for building websites?
Ans:
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.
74. What do you understand about Responsive websites?
Ans:
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.
75. What are the advantages of Bootstrap?
Ans:
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 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.
- Support
76. For an interview as a front-end web app developer, what HTML5, CSS3, and JS concepts should I master?
Ans:
Here is a short list of what any good HTML5 front-end application developers should know:
Understand that HTML5 is HTML and that the same application model is applicable. So, no new magical development paradigm was brought with HTML5 (outside of Canvas/WebGL, which is totally new), just browsers are more robust, much faster, and more capable.
Understand that many of the effects in CSS3 are available in IE7 & IE8 with proprietary Microsoft CSS attributes. (rounded corners being the main exception). So, if a client wants to do “HTML5” looking app in IE7+, it is totally possible by use the “MS/IE7” old CSS properties and JavaScript animation lib like jQuery animate.
Understand that JavaScript is completely Object Oriented and that there is no need to have some meta-framework like Sencha to do good OO in Javascript
Understand the power of HTML and CSS for good component layout. Twitter/Bootstrap is a great (and probably the best) example of this. Simple HTML structure with simple CSS classes and you can get some great reusable UI elements.
Understand that decoupling UI layout/style from behavior (i.e. JS) brings a great deal of performance and flexibility. This could be described as the Twitter/Bootstrap way vs the Sencha one. The former has a great decoupling between the HTML/CSS code and the JavaScript (which is not needed to get the layout/style), and the later, Sencha intermingles everything in a foreign all-in-one component UI and OO language (high-learning curve and high-degree of lock-in). (in other words, avoid Sencha like frameworks)
Understand the pros/cons of CSS animations vs JavaScript ones. The pros for CSS transitions is that it is easier for browsers to optimize them, Safari on Mobile/PC and Chrome on PC even move them to GPUs. The cons are that CSS transitions do not work on older browsers (IE 7 & 8) and that they do not offer many controls (e.g., can’t really stop them and no curve path).
Understand the benefits and the “Why” of the Web Workers. In short, it’s a way to do multi-threaded work in a single threaded environment. Before HTML5, the only way was with Ajax, and therefore including a server in the picture, now it can just be all local.
Understand the Canvas vs SVG. This one is a tricky one, as there are a lot of “social-engineering” baggage behind the technical aspects. On the technical side, SVG is a DOM approach to vector graphic (and consequently retained mode) whereas Canvas is a programmatic and immediate mode approach. The catch is that sometimes it seems that Canvas gets a little bit more “love” from the browser vendor developers as SVG always had a love and hate relationship with HTML from its beginning.
DOM Centric MVC. Ok, this is more an opinion than a fact, but given my expertise, HTML5 application developer (not web page developers) needs to have a good understanding of what is MVC, and realize that they do not need “do-it-all” meta-frameworks do MVC in HTML. In fact, with little DOM extension, it is relatively easy to do MVC the DOM way.
onload vs jQuery:$(document).ready which one trigger first? This is a great low-level question to ask for anybody that claims they know jQuery. In short, onload trigger after, and $(document).ready trigger before and is a normalization brought by jQuery.
Web performance is a very valuable concept to master. If you’re interviewing for a company that gives a damn about how their page load time affects conversion rates, you’re very likely to get asked a question or two about web perf.
77. Explain why to choose Bootstrap for building the websites?
Ans:
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.
78. What are the key components of Bootstrap?
Ans:
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
79. Explain what are class loaders in Bootstrap?
Ans:
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.
80. What are the types of layout available in Bootstrap?
Ans:
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
81. Explain what is Bootstrap Grid System?
Ans:
For creating page layout through a series of rows and columns that house your content Bootstrap Grid Sytem is used.
82. What are offset columns in Bootstrap?
Ans:
For more specialized layouts offsets are a useful feature. For more spacing they can be used by pushing column over.
or example, .col-xs=* classes do not support offset but they are easily replicated using an empty cell
83. What is column ordering in Bootstrap?
Ans:
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.
There may be noticeably a bundle to know about this. I assume you made sure good factors in options also.