Top Interview Questions & Answers | Learn Now

Bootstrap Interview Questions and Answers | Basic and Advanced Level

Written by Bhavya Sri | Apr 7, 2018 4:50:47 AM

Q1. What is Bootstrap?

Ans: Bootstrap is arguably the most powerful combination of CSS, HTML, and JavaScript framework for front-end developers. It is easier and faster to use than all previous frameworks. It can be used for mobile web development as well as design responsive layouts for web pages.
Bootstrap comes with design templates that can be used for UI components such as buttons, forms, navigation, dropdowns, accordion, alerts, tables, tabs, etc. It also has optional JavaScript plug-in.
Some of its outstanding features include responsiveness, browser compatibility, easy to use, and open source.

Q2. Do you know why choosing a Bootstrap is advised to create the website?

Ans: There are many reasons why Bootstrap is advised to create the website such as:

  1. Mobile support:It offers complete support to the mobile devices in the sole file. It is more supportive in terms of the receptive design that includes the adjustment to be based for the CSS on different devices, types, and screen size and so on. It also enables the less efforts to be made for developers.
  2. Extremely simple to understand: The focus of writing application becomes a lot easier if you have Bootstrap. If you are aware about HTML and CSS, then the progress can pace up pretty easily.
  3. Browser Compatibility:It also offers better support for some of the most common browsers such as Safari, Firefox, Opera and even IE to name a few.

Q3. What is Fluid Layout in Bootstrap?

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

Q4.What are the major Bootstrap components?

Ans: Bootstrap has some components that assist it to perform its function in web design. The major components of Bootstrap are:

  • CSS: Bootstrap contains tons of Cascading Style Sheet for formatting text and others.
  • Scaffolding: Bootstrap scaffolding is its basic structure that comes fully packed with a grid system, link styles, and background.
  • Reusable Components:If you need reusable layout components, you can find a lot of them in Bootstrap.
  • Customization:Bootstrap components can easily be customized to suit your needs.

Q5. Can you explain the right way to order the columns when using Bootstrap?

Ans: It is not a hard and fast rule to change the build in grid columns order when it comes of making the amendments with the help of Bootstrap. All you need to do is modify the .col-md-pull-* and. col-md-push-* classless that ranges between 1-11.

Q6. What is Fixed Layout in Bootstrap?

Ans: Fixed layout doesn’t adapts itself to different browser but it can be responsive.

Q7. Explain Bootstrap Grid System

Ans: Web pages are arranged in rows and columns. Bootstrap comes incorporated with a grid system that can be used by a developer for creating page layout in rows and columns for storing the content of a page. By using the increment in the size or viewport of the device, the layout can adjust to as much as 12 columns.
Bootstrap 3 is an improvement over the preceding Bootstrap versions. It comes with predefined grid classes that can be used for designing a wide variety of grid layouts for an array of devices such as desktops, mobiles, laptops, and tablets.

Q8. What is the meaning of class loaders in Bootstrap?

Ans: There is a portion present in Java Runtime Environment which is also known by the name of JRE. This portion is called the class loader. It focuses on loading the Java classless in the Java virtual environment. The loader also focuses on processing the changes which a named class can do in an equal binary form

Q9. What is responsive layout?

Ans: 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.

Q10. What are Bootstrap’s Responsive Utility Classes?

Ans: These are responsive classes that are used to define the responsiveness of a web page when viewed on different screen sizes.
If you want to define the responsiveness, you can use some built-in responsive classes such as:

  • .visible-xs-*: The elements of the page will only be visible on a small screen size that is less than 768px. The elements will be hidden on other devices.
  • .visible-sm-*: This is used to define the visibility of elements on small devices, but that are still wider than or 768px. Other screen sizes won’t see the elements.
  • .visible-md-*: The visibility of elements of medium-sized devices with a screen width equal to or greater than 992px is usually designed with this class. The elements remain invisible on other devices.
  • .visible-lg-*: The elements defined with this class are visible on a large device with a screen width that is equal to or greater than Those elements are not visible on other devices.

 

Q11. Explain the Types of layout available in Bootstrap.

Ans: The layout which is available in the bootstrap is categorized in two things:

  1. Fixed Layout which is used for the standard screen.
  2. Fluid Layout which is used when you would want to build an app which is wide through 100% and can be used up all the screen width.

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

Ans: 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.

Q13. Do you know what is typography and the links that are present in the Bootstrap?

Ans: Generally, bootstrap sets a basic global display, typography, and styles of the link which means:

Typography is used for the attributes that work as the basic of typography such as @ font-size-base, @font-family-base, and @line-height-base.
Display at basic Global:  It sets out the background of on the <body> element and #fff.
Styling of the link: It sets out the link color at the global platform through attributes @link-color.

Q14. What are Glyphicons in Bootstrap?

Ans: Glyphicons are icons used in Bootstrap to boost the attractiveness of a web page as well as serve as a shortcut to some menu. A Glyphicon is usually used in front of a text. Some notable Glyphicons are:

  • Glyphicon-search: This is the icon for search. Clicking this Glyphicon will open the search box where you can enter your search query.
  • Glyphicon-ok: This is the icon for accepting a command.
  • Glyphicon-off: The icon can be used for switching off a program or something else as defined in the website.
  • Glyphicon-download: Use this Glyphicon for downloading anything from the website.
  • Glyphicon-zoom-in: The icon is designed for zooming in the content of a website.

Q15. Know the Jumbotron use in Bootstrap?

Ans: The use of Jumbotron is for the content which you would want to highlight such as the headline to be used for promotion, the slogan to be used for marketing and so on. In simpler words, it is also used for enlarging the leadings size and also adds up the margin by which the landing page content can be well aligned.
To use such type of feature, you need to first:
Make a container <div> in which there is a .jumbotron class

Q16. What is pagination which you see in Bootstrap and how it is classified?

Ans: Pagination is to handle an unordered list by Bootstrap. To handle such type of option offers the classless such as:
View full post