YouTube Icon

Interview Questions.

Top 45 Bootstrap Interview Questions - Jul 25, 2022

fluid

Top 45 Bootstrap Interview Questions

Q1. Explain Types Of Lists Supported By Bootstrap?

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

Ordered lists : An ordered listing is a list that falls in a few form of sequential order and is prefaced by using numbers.

Unordered lists : An unordered list is a list that does not have any particular order and is historically styled with bullets. If you do not want the bullets to appear then you may remove the styling via the usage of the elegance .Listing-unstyled. You also can region all listing objects on a single line using the magnificence .Listing-inline.

Definition lists : In this sort of listing, every list item can consist of both the <dt> and the <dd> factors. <dt> stands for definition term, and prefer a dictionary, that is the term (or word) that is being described. Subsequently, the <dd> is the definition of the <dt>.

You could make phrases and descriptions in <dl> line up aspect-via-aspect the usage of class dl-horizontal.

Q2. Which Class Is Used To Draw A Toolbar Of Buttons?

.Btn-toolbar facilitates to mix sets of <div class = "btn-group"> into a <div class = "btn-toolbar"> for greater complex additives.

Q3. Who Developed The Bootstrap?

Mark Otto and Jacob Thornton at Twitter

Q4. What Is Scrollspy Plugin?

The Scrollspy (car updating nav) plugin permits you to goal sections of the page based totally at the scroll role. In its fundamental implementation, as you scroll, you can upload .Active classes to the navbar based at the scroll role.

Q5. What Is Bootstrap Jumbotron?

As the call advise this issue can optionally increase the scale of headings and add quite a few margin for touchdown page content.

To use the Jumbotron:

Create a containerwith the magnificence of .Jumbotron.

In addition to a bigger

Q6. What Are Offset Columns?

Offsets are a useful feature for greater specialized layouts. They may be used to push columns over for greater spacing, as an instance. The .Col-xs = * instructions do not assist offsets, however they may be without problems replicated by way of the use of an empty mobile.

Q7. How Will You Customize Links Of Pagination?

You can customise hyperlinks with the aid of the use of .Disabled for unclickable hyperlinks and .Energetic to indicate the modern page.

Q8. What Is A Trition Plugin?

The trition plugin offers easy trition consequences including Sliding or fading in modals.

Q9. How Will You Create A Bootstrap Panel With Footer?

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

Q10. Would You Tell Me Something About Glyphicons And How Are They Written In Our Code?

Glyphicons are symbols and icon fonts which might be created for providing simplicity and easy orientation in your internet tasks. Glyphicons Halflings are usually not to be had free of charge use and that they require licensing but their author has made them value free for Bootstrap projects. Bootstrap consists of greater than 250 glyphs from the Glyphicon Halflings set. To use the icons, we want to jot down <span class = "glyphicon glyphicon-search"></span> code anywhere in our software.

Q11. What Are Bootstrap Badges?

Badges are just like labels; the number one difference is that the corners are greater rounded. Badges are in particular used to focus on new or unread gadgets. To use badges simply upload <span class = "badge"> to links, Bootstrap navs, and more.

Q12. Why Would You Use Bootstrap? Tell Me About Its Benefits?

The foremost advantages of using Bootstrap are-

It is a free and open-supply Web Designing Framework

It has aid of all of the internet browsers like Internet Explorer, Google Chrome, Firefox, Opera, Safari and so forth.

It is a very effective cellular first the front-quit framework

It could be very clean to start as one desires to have idea of HTML and CSS only to paintings with it

We can layout responsive website via it which modify to laptop, pill and cell

It accommodates functional integrated additives that are smooth to customise

Q13. What Is Normalize In Bootstrap?

Bootstrap uses Normalize to set up go browser consistency.

Normalize.Css is a modern-day, HTML5-prepared alternative to CSS resets. It is a small CSS report that offers better go-browser consistency within the default styling of HTML elements.

Q14. What Are Glyphicons?

Glyphicons are icon fonts which you could use on your internet initiatives. Glyphicons Halflings aren't free and require licensing, however their author has made them available for Bootstrap projects free of fee.

Q15. Can You Put A Table Within Bootstrap Panel?

Yes! To get a non-bordered table inside a panel, use the class .Desk inside the panel. Suppose there may be a <div> containing .Panel-body, we add a further border to the top of the desk for separation. If there's no <div> containing .Panel-frame, then the factor moves from panel header to desk without interruption.

Q16. Could You Explain Me About Responsive Layout?

Responsive layout's design automatic adjusts to the browser size but when resizing, the range of columns modifications consistent with the distance available.

Q17. What Is Lead Body Copy?

To add a few emphasis to a paragraph, add magnificence = "lead". This will give you large font size, lighter weight, and a taller line height.

Q18. Describe Bootstrap Panel?

Whenever there may be a want of placing the contents in a bordered field with a few padding around, panel components are used. They can be created with the .Panel class and content material in the panel has a .Panel-frame elegance. For developing a basic panel, add magnificence .Panel to the <div> element and upload magnificence .Panel-default to this detail.

Q19. What Is Bootstrap Well?

A nicely is a box in that reasons the content material to seem sunken or an inset effect at the web page. To create a well, really wrap the content that you would love to seem inside the nicely with a containing the elegance of .Nicely.

Q20. What Is A Modal Plugin?

A modal is a toddler window that is layered over its determine window. Typically, the purpose is to show content material from a separate supply that can have some interplay without leaving the discern window. Child windows can offer information, interplay, or more.

Q21. What Is Twitter Bootstrap?

Bootstrap is a swish, intuitive, and effective mobile first front-end framework for quicker and less complicated internet development. It makes use of HTML, CSS and Javascript.

Q22. What Does Bootstrap Package Includes?

Bootstrap package deal consists of:

Scaffolding − Bootstrap offers a simple structure with Grid System, link patterns, background. This is is included in detail within the sectionBootstrap Basic Structure

CSS − Bootstrap comes with characteristic of worldwide CSS settings, essential HTML elements styled and more advantageous with extensible lessons, and a sophisticated grid machine. This is protected in detail inside the section Bootstrap with CSS.

Components − Bootstrap includes over a dozen reusable components constructed to provide iconography, dropdowns, navigation, alerts, popovers, and much more. This is covered in detail inside the phase Layout Components.

JavaScript Plugins − Bootstrap consists of over a dozen custom jQuery plugins. You can without problems include them all, or one at a time. This is included in information inside the section Bootstrap Plugins.

Customize − You can customise Bootstrap's additives, LESS variables, and jQuery plugins to get your very personal version.

Q23. How Would You Define Bootstrap Pagination?

Whenever a web website online has plenty of pages, we need to do pagination to every page. In Bootstrap, we will create a fundamental pagination via adding the .Pagination class to an <ul> element.

Q24. Tell Me About Different Layouts Available In Bootstrap?

Two layouts are to be had in Bootstrap-

Fluid Layout:Its layout computerized adjusts to the browser length.

Fixed Layout:Its design doesn't modify mechanically to different browsers however it is able to be responsive.

Q25. What Is Bootstrap Grid System?

Bootstrap includes a responsive, cellular first fluid grid device that appropriately scales up to 12 columns as the tool or viewport length increases. It consists of predefined instructions for smooth layout alternatives, in addition to effective mixins for producing more semantic layouts.

Q26. Which Class Is Used For Basic Pagination?

.Pagination magnificence is used to feature the pagination on a web page.

Q27. What Is Affix Plugin?

The affix plugin permits a to turn out to be affixed to a vicinity at the page. You can also toggle it is pinning on and off the usage of this plugin. A commonplace instance of this are social icons. They will start in a region, but as the page hits a positive mark, the could be locked in region and could forestall scrolling with the relaxation of the page.

Q28. Which Classes Can Be Applied To Button Group Instead Of Resizing Each Button?

.Btn-organization-lg, .Btn-group-sm, .Btn-institution-xs classes may be applied to button group rather than resizing every button.

Q29. How Do You Make Images Responsive?

Bootstrap three allows to make the pictures responsive through adding a class .Img-attentive to the <img> tag. This class applies max-width: 100%; and top: car; to the image in order that it scales properly to the figure detail.

Q30. What Is Bootstrap Page Header?

The web page header is a pleasant little feature to add suitable spacing around the headings on a web page. This is in particular beneficial on an internet web page in which you may have numerous put up titles and need a way to feature difference to every of them. To use a page header, wrap your heading in a <div> with a category of .Page-header.

Q31. How To Create A Navbar In Bootstrap?

To create a default navbar:

Add the instructions .Navbar, .Navbar-default to the tag.

Add function = "navigation" to the above element, to assist with accessibility.

Add a header elegance .Navbar-header to the

element. Include an element with magnificence navbar-brand. This will supply the text a barely large length.

To upload hyperlinks to the navbar, truly add an unordered list with the training of .Nav, .Navbar-nav.

Q32. Explain The Typography And Links In Bootstrap?

Bootstrap units a simple worldwide display (history), typography, and link patterns:

Basic Global show − Sets historical past-color: #fff; at the <body> detail.

Typography − Uses the @font-circle of relatives-base, @font-length-base, and @line-top-base attributes because the typographic base

Link patterns − Sets the global hyperlink color thru attribute @link-shade and observe hyperlink underlines handiest on :hover.

Q33. What Are Bootstrap Labels?

Bootstrap labels are high-quality for imparting counts, suggestions, or other markup for pages. Use elegance .Label to show labels.

Q34. What Do You Understand By A List Group In Bootstrap And Its Use?

List group is a effective and flexible thing to display easy and complicated factors together with custom contents. A easy list group is created the usage of class .Listing-organization to address the list with usage of <ul> detail, and sophistication .List-institution-item to deal with individual object with utilization of <li> factors.

Q35. What Do You Understand By Bootstrap?

Bootstrap, initially named Twitter Blueprint, become advanced by way of Mark Otto and Jacob Thornton at Twitter, is free and open source front end Javascript web framework for designing the rich, sleek, intuitive web applications with minimum attempt. This framework is extra useful for constructing mobile based web programs. It uses HTML, Javascript and CSS primarily based layout templates and different interface components. It also has optionally available JavaScript extensions.

Q36. What Is Bootstrap Breadcrumb?

Breadcrumbs are a fantastic way to show hierarchy-primarily based statistics for a site. In the case of blogs, breadcrumbs can display the dates of publishing, classes, or tags. They suggest the cutting-edge web page's vicinity inside a navigational hierarchy.

A breadcrumb in Bootstrap is surely an unordered listing with a category of .Breadcrumb. The separator is mechanically delivered with the aid of CSS (bootstrap.Min.Css).

Q37. Can You Put A Listgroup Within Bootstrap Panel?

Yes You can consist of listing organizations within any panel. Create a panel through adding elegance .Panel to the element. Also add magnificence .Panel-default to this element. Now inside this panel consist of your listing corporations.

Q38. How Can You Order Columns In Bootstrap?

You can easily alternate the order of built-in grid columns with .Col-md-push-* and .Col-md-pull-* modifier instructions where * range from 1 to eleven.

Q39. What Is Bootstrap Carousel?

The Bootstrap carousel is a flexible, responsive manner to feature a slider on your site. In addition to being responsive, the content is bendy sufficient to permit images, iframes, motion pictures, or just about any kind of content that you may want.

Q40. Which Class Is Used For Basic Button Group?

.Btn-organization elegance is used for a simple button institution. Wrap a chain of buttons with elegance .Btn in .Btn-organization.

Q41. What Are Bootstrap Media Queries?

Media Queries in Bootstrap permit you to pass, display and disguise content based totally on viewport length.

Show a primary grid structure in Bootstrap.

Following is basic shape 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">....

Q42. Would You Differentiate Between Fluid Layout & Responsive Layout?

Yes, certain. The fundamental distinction is that Fluid Layout are built using widths possibilities and they may be based on proportionally laying out the internet site so factors absorb the identical percentage of space on different display screen sizes. Responsive Layout is built on a fluid grid and here CSS Media Queries are used to offer extraordinary layouts primarily based on one of a kind screen sizes.

Q43. What Contextual Classes Are Available To Style The Panels?

Use contextual country instructions which include, panel-number one, panel-fulfillment, panel-information, panel-caution, panel-danger, to make a panel more significant to a selected context.

Q44. What Is Button Group?

Button businesses allow more than one buttons to be stacked together on a unmarried line. This is useful whilst you want to place gadgets like alignment buttons collectively

Q45. Which Components Are There In Bootstrap?

Main components of Bootstrap are-

Reusable Components : It includes masses of reusable layout additives

CSS : It incorporates plenty of CSS documents

jQuery & JavaScript Plugins: It incorporates many jQuery and JavaScript plugins

Scaffolding : It comes with a simple shape with link styles, grid system and heritage

Customization: You have a freedom to customise components as consistent with your want




CFG