Bootstrap Interview Questions with Answers
Question: 1. What Do You Understand By Bootstrap?
Answer:
Bootstrap, originally named Twitter Blueprint, turned into evolved with the aid of Mark Otto and Jacob Thornton at Twitter, is loose and open source front stop Javascript internet framework for designing the wealthy, sleek, intuitive net programs with minimal effort. This framework is greater useful for constructing mobile based totally net applications. It uses HTML, Javascript and CSS primarily based layout templates and different interface additives. It additionally has non-compulsory JavaScript extensions.
Question: 2. Why Would You Use Bootstrap? Tell Me About Its Benefits?
Answer:
The primary advantages of the use of Bootstrap are-
It is a free and open-source Web Designing Framework
It has aid of all of the net browsers like Internet Explorer, Google Chrome, Firefox, Opera, Safari and so forth.
It is a very powerful cellular first the front-quit framework
It may be very easy to begin as one needs to have idea of HTML and CSS most effective to paintings with it
We can design responsive internet site thru it which regulate to desktop, pill and cellular
It comprises useful built-in components that are smooth to personalize
Python Interview Questions
Question: three. Who Developed The Bootstrap?
Answer:
Mark Otto and Jacob Thornton at Twitter
Question: 4. Which Components Are There In Bootstrap?
Answer:
Main components of Bootstrap are-
Reusable Components : It includes plenty of reusable format additives
CSS : It includes plenty of CSS documents
jQuery & JavaScript Plugins: It comprises many jQuery and JavaScript plugins
Scaffolding : It comes with a fundamental shape with link styles, grid system and historical past
Customization: You have a freedom to customize components as consistent with your want
Python Tutorial
Question: 5. Tell Me About Different Layouts Available In Bootstrap?
Answer:
Two layouts are available in Bootstrap-
Fluid Layout:Its layout computerized adjusts to the browser length.
Fixed Layout:Its layout does not alter automatically to distinctive browsers but it is able to be responsive.
HTML 4 Interview Questions
Question: 6. Could You Explain Me About Responsive Layout?
Answer:
Responsive format’s layout automatic adjusts to the browser size however whilst resizing, the wide variety of columns modifications in step with the gap available.
Question: 7. Would You Differentiate Between Fluid Layout & Responsive Layout?
Answer:
Yes, positive. The primary difference is that Fluid Layout are built using widths possibilities and they’re based totally on proportionally laying out the internet site so factors take in the same percent of space on distinct display sizes. Responsive Layout is built on a fluid grid and here CSS Media Queries are used to present special layouts primarily based on one-of-a-kind display screen sizes.
HTML 4 Tutorial HTML Interview Questions
Question: eight. What Do You Understand By A List Group In Bootstrap And Its Use?
Answer:
List group is a effective and bendy thing to show easy and complicated elements collectively with custom contents. A simple listing institution is created the use of elegance .Listing-institution to cope with the listing with usage of
- element, and class .Listing-institution-item to deal with character object with utilization of
- factors.
Question: 9. Would You Tell Me Something About Glyphicons And How Are They Written In Our Code?
Answer:
Glyphicons are symbols and icon fonts which are created for imparting simplicity and easy orientation on your net initiatives. Glyphicons Halflings are typically not available for free use and that they require licensing however their writer has made them value loose for Bootstrap tasks. Bootstrap includes greater than 250 glyphs from the Glyphicon Halflings set. To use the icons, we want to write down code everywhere in our program.
HTML five Interview Questions
Question: 10. How Would You Define Bootstrap Pagination?Answer:
Whenever a web web site has plenty of pages, we want to do pagination to every web page. In Bootstrap, we can create a fundamental pagination with the aid of including the .Pagination elegance to an
- element.
- and the
- factors.
- stands for definition time period, and prefer a dictionary, that is the term (or word) this is being defined. Subsequently, the
- is the definition of the
- .
You could make phrases and outlines in
HTML Tutorial
Question: 11. Describe Bootstrap Panel?Answer:
Whenever there’s a want of placing the contents in a bordered box with some padding round, panel additives are used. They can be created with the .Panel elegance and content material inside the panel has a .Panel-body magnificence. For growing a simple panel, add elegance .Panel to the
element and add magnificence .Panel-default to this element.Web Designing Interview Questions
Question: 12. What Is Normalize In Bootstrap?Answer:
Bootstrap uses Normalize to set up move browser consistency.
Normalize.Css is a cutting-edge, HTML5-ready alternative to CSS resets. It is a small CSS document that offers better go-browser consistency inside the default styling of HTML elements.
Python Interview Questions
Question: thirteen. What Is Lead Body Copy?Answer:
To upload a few emphasis to a paragraph, upload class = “lead”. This will give you larger font size, lighter weight, and a taller line height.
HTML 5 Tutorial
Question: 14. Explain Types Of Lists Supported By Bootstrap?Answer:
Bootstrap helps ordered lists, unordered lists, and definition lists.
Ordered lists : An ordered list is a list that falls in a few form of sequential order and is prefaced through numbers.
Unordered lists : An unordered list is a listing that doesn’t have any precise order and is traditionally styled with bullets. If you do not need the bullets to seem then you could get rid of the styling through the usage of the class .List-unstyled. You also can region all listing items on a single line the use of the class .List-inline.
Definition lists : In this form of listing, each listing object can consist of each the
- line up side-by-aspect using elegance dl-horizontal.
Question: 15. What Are Glyphicons?
Answer:
Glyphicons are icon fonts which you could use in your internet tasks. Glyphicons Halflings aren’t unfastened and require licensing, however their writer has made them available for Bootstrap projects freed from cost.
Java Script Interview Questions
Question: sixteen. What Is A Transition Plugin?Answer:
The transition plugin offers easy transition outcomes inclusive of Sliding or fading in modals.
Web Designing Tutorial
Question: 17. What Is A Modal Plugin?Answer:
A modal is a child window this is layered over its figure window. Typically, the motive is to display content from a separate supply that could have a few interplay without leaving the determine window. Child windows can offer records, interplay, or greater.
PHP Interview Questions
Question: 18. What Is Bootstrap Carousel?Answer:
The Bootstrap carousel is a versatile, responsive way to feature a slider to your web page. In addition to being responsive, the content material is flexible sufficient to permit pics, iframes, videos, or just about any sort of content which you may need.
HTML four Interview Questions
Question: 19. What Is Button Group?Answer:
Button businesses allow multiple buttons to be stacked together on a single line. This is beneficial whilst you need to area items like alignment buttons together
Java Script Tutorial
Question: 20. Which Class Is Used For Basic Button Group?Answer:
.Btn-institution class is used for a primary button organization. Wrap a series of buttons with magnificence .Btn in .Btn-organization.
. NET Interview Questions
Question: 21. Which Class Is Used To Draw A Toolbar Of Buttons?Answer:
.Btn-toolbar helps to combine sets of
right into afor extra complex additives.Question: 22. Which Classes Can Be Applied To Button Group Instead Of Resizing Each Button?
Answer:
.Btn-institution-lg, .Btn-group-sm, .Btn-institution-xs instructions may be applied to button organization instead of resizing each button.
PHP Tutorial
Question: 23. What Is Twitter Bootstrap?Answer:
Bootstrap is a graceful, intuitive, and effective cellular first the front-stop framework for quicker and less difficult web development. It uses HTML, CSS and Javascript.
ASP.NET Interview Questions
Question: 24. What Does Bootstrap Package Includes?Answer:
Bootstrap bundle consists of:
Scaffolding − Bootstrap offers a fundamental shape with Grid System, link patterns, heritage. This is is protected in element within the sectionBootstrap Basic Structure
CSS − Bootstrap comes with function of global CSS settings, fundamental HTML factors styled and more suitable with extensible classes, and an advanced grid machine. This is covered in element within the phase Bootstrap with CSS.
Components − Bootstrap consists of over a dozen reusable components constructed to provide iconography, dropdowns, navigation, signals, popovers, and lots more. This is blanketed in element within the section Layout Components.
JavaScript Plugins − Bootstrap consists of over a dozen custom jQuery plugins. You can effortlessly consist of all of them, or one by one. This is covered in information in the phase Bootstrap Plugins.
Customize − You can customise Bootstrap’s components, LESS variables, and jQuery plugins to get your very very own version.
HTML Interview Questions
Question: 25. What Is Bootstrap Grid System?Answer:
Bootstrap includes a responsive, cellular first fluid grid device that appropriately scales up to 12 columns as the device or viewport size will increase. It includes predefined instructions for smooth layout options, in addition to effective mixins for producing extra semantic layouts.
ASP.NET Tutorial
Question: 26. What Are Bootstrap Media Queries?Answer:
Media Queries in Bootstrap will let you circulate, display and disguise content based on viewport length.
Show a primary grid shape in Bootstrap.
Following is fundamental shape of Bootstrap grid:
…….Web Developer Guide Interview Questions
Question: 27. What Are Offset Columns?Answer:
Offsets are a useful feature for extra specialized layouts. They can be used to push columns over for more spacing, for instance. The .Col-xs = * lessons do not guide offsets, however they are without difficulty replicated through the usage of an empty mobile.
HTML five Interview Questions
Question: 28. How Can You Order Columns In Bootstrap?Answer:
You can easily trade the order of integrated grid columns with .Col-md-push-* and .Col-md-pull-* modifier lessons wherein * variety from 1 to 11.
Bootstrap Tutorial
Question: 29. How Do You Make Images Responsive?Answer:
Bootstrap 3 allows to make the images responsive by adding a class .Img-conscious of the
tag. This magnificence applies max-width: a hundred%; and height: vehicle; to the picture so that it scales nicely to the discern element.
WordPress Interview Questions
Question: 30. Explain The Typography And Links In Bootstrap?Answer:
Bootstrap sets a simple worldwide show (historical past), typography, and link styles:
detail.
Basic Global show − Sets heritage-coloration: #fff; at the
Typography − Uses the @font-circle of relatives-base, @font-length-base, and @line-height-base attributes because the typographic base
Link styles − Sets the worldwide link shade thru characteristic @link-shade and follow link underlines best on :hover.Question: 31. How Will You Create A Bootstrap Panel With Footer?
Answer:
You can upload footers to panels, by using wrapping buttons or secondary text in a
containing class .Panel-footer.Web Developer Guide Tutorial
Question: 32. What Contextual Classes Are Available To Style The Panels?Answer:
Use contextual kingdom lessons such as, panel-number one, panel-fulfillment, panel-data, panel-caution, panel-risk, to make a panel greater significant to a specific context.
Javascript Objects Interview Questions
Question: 33. Can You Put A Table Within Bootstrap Panel?Answer:
Yes! To get a non-bordered desk inside a panel, use the class .Desk inside the panel. Suppose there may be a
containing .Panel-frame, we add a further border to the top of the desk for separation. If there may be nocontaining .Panel-frame, then the component movements from panel header to table with out interruption.Web Designing Interview Questions
Question: 34. Can You Put A Listgroup Within Bootstrap Panel?Answer:
Yes You can include listing corporations within any panel. Create a panel by using including elegance .Panel to the detail. Also upload class .Panel-default to this detail. Now within this panel consist of your listing organizations.
Question: 35. What Is Bootstrap Well?
Answer:
A nicely is a field in that causes the content material to seem sunken or an inset effect at the page. To create a nicely, certainly wrap the content material that you would really like to appear in the properly with a containing the magnificence of .Properly.
Question: 36. What Is Scrollspy Plugin?
Answer:
The Scrollspy (automobile updating nav) plugin allows you to target sections of the page based totally at the scroll role. In its basic implementation, as you scroll, you may upload .Lively instructions to the navbar based on the scroll position.
Java Script Interview Questions
Question: 37. What Is Affix Plugin?Answer:
The affix plugin lets in a to grow to be affixed to a region at the web page. You also can toggle it’s pinning on and rancid the usage of this plugin. A not unusual instance of this are social icons. They will start in a region, however as the page hits a positive mark, the can be locked in area and will forestall scrolling with the rest of the web page.
Question: 38. How To Create A Navbar In Bootstrap?
Answer:
To create a default navbar:
Add the classes .Navbar, .Navbar-default to the tag.
Add function = “navigation” to the above element, to assist with accessibility.
Add a header magnificence .Navbar-header to the
element. Include an detail with magnificence navbar-emblem. This will supply the text a barely larger size.
To upload hyperlinks to the navbar, really upload an unordered listing with the training of .Nav, .Navbar-nav.
Question: 39. What Is Bootstrap Breadcrumb?Answer:
Breadcrumbs are a outstanding way to reveal hierarchy-primarily based records for a site. In the case of blogs, breadcrumbs can display the dates of publishing, classes, or tags. They imply the modern web page’s area within a navigational hierarchy.
A breadcrumb in Bootstrap is absolutely an unordered list with a class of .Breadcrumb. The separator is routinely added through CSS (bootstrap.Min.Css).Question: forty. Which Class Is Used For Basic Pagination?
Answer:
.Pagination magnificence is used to feature the pagination on a web page.
PHP Interview Questions
Question: forty one. How Will You Customize Links Of Pagination?Answer:
You can customise links via the use of .Disabled for unclickable links and .Energetic to indicate the modern-day page.
Question: 42. What Are Bootstrap Labels?
Answer:
Bootstrap labels are exquisite for presenting counts, recommendations, or different markup for pages. Use class .Label to display labels.
. NET Interview Questions
Question: forty three. What Are Bootstrap Badges?Answer:
Badges are much like labels; the primary distinction is that the corners are greater rounded. Badges are especially used to highlight new or unread gadgets. To use badges simply add to links, Bootstrap navs, and more.
Question: forty four. What Is Bootstrap Jumbotron?
Answer:
As the call propose this aspect can optionally growth the dimensions of headings and add quite a few margin for landing page content material.
To use the Jumbotron:
Create a containerwith the magnificence of .Jumbotron.
In addition to a larger
Question: 45. What Is Bootstrap Page Header?Answer:
The page header is a nice little characteristic to feature suitable spacing across the headings on a web page. This is especially helpful on a web web page where you may have several submit titles and want a way to add distinction to every of them. To use a page header, wrap your heading in a
with a category of .Page-header.