Bootstrap Interview Questions and Answers 

Q1.  What is Bootstrap?

Ans. Bootstrap is a front-end used to create web applications in HTML, JS and CSS. It has a fast, easy to use and responsive s layout. It is majorly used in building mobile applications having design templates for making user interfaces like forms, dropdown lists, buttons, alert/notification tabs etc.

Q2. What is the Bootstrap Grid System?

Ans. The Bootstrap Grid System is a very scalable and responsive feature of bootstrap used in mobiles that can scale up to 12 columns based on the size of device or viewport size. It also contains predefined classes with simple layouts and versatile mix-ins for producing effectively semantic layouts.

Q3. Why is Bootstrap mostly used for Mobile Web development?

Ans. It is mostly used for mobile web development due to the availability of easy to use templates and responsive designs.

 Q4. Why is Normalize used in Bootstrap?

Ans. Normalize is used to establish cross-browser consistency in Bootstrap. It is a small CSS file that offers good cross-browser consistency to HTML default styling elements. Normalize.css is a modern and alternate version of CSS resets.

Q5. What are the features of Bootstrap?

Ans. Some of the features in bootstrap are:

 It is open source and easily available online

  • It offers responsive designs.

  • It is compatible with almost all browsers.

  • It is fast and easy to use

Q6. Explain the various types of lists supported by Bootstrap?

Ans. Three types of lists supported by Bootstrap are:

  • Definition Lists – It has both the and the elements. The stands for definition term, that is used to define a term or phrase. The element is used to define the element.

  • Ordered Lists – This list uses numbers as a prefix to set a sequential order. 

  • Unordered Lists – This type of list does not follow any order and is generally styled with bullets. By using the .list-unstyled class, bullet-style can be removed from the unordered list. the .list-inline class is used to list all the items in a single line.

Q7. What are the components in Bootstrap?

Ans. Bootstrap components include:

  • Scaffolding: It is for background, grid system and styles.

  • Customize: It is for customizing frameworks according to user requirements.

  • JS Plugins: It is for JS and jQuery.

  • CSS: It has CSS files.

Q8. What is the use of the grid system in Bootstrap?

Ans.  With the grid system in bootstrap, it is possible to create up to 12 columns across a page. Different classes are also defined as a grid system that enhances the user interface.

Q9. What is a Bootstrap container?

Ans. The bootstrap container is that part of the web page where website content is placed in HTML codes to make the site fast and responsive.

Q10. Explain the types of layouts in Bootstrap?

Ans. 

  • Fluid Layout- This layout is used when there is a need to adjust the screen according to the browser size. It is mainly used to create apps that comprise the full-width screen.

  • Fixed Layout- This layout has fixed screen size which generally remains 940px, unlike fluid layout where the screen size can adjust according to the browser size.

Q11. Where tag and tag used in bootstrap?

 

Ans. tag- It is used when there is a need to show the code inline. tag- It is used when there is a need to show code with multiple lines.

Q12.  Explain Bootstrap breadcrumb?

Ans. Information based on hierarchy in a website can be best explained by using the bootstrap breadcrumb. It is an unordered list having a. breadcrumb class. In CSS, the separator gets automatically added up for a Bootstrap breadcrumb. In a blog site, categories, tags or publishing dates can be displayed by using breadcrumb. It also shows the current page’s location in a hierarchy.

Q13. Explain progress bar in bootstrap?

Ans. Progress bar comes within the HTML tag by using

<progress>

keyword. In bootstrap,

<progress>

tag is used with CSS classes having distinct features in bootstrap, specifically designed for the progress bar.

 Q14. How do you create and customize thumbnails in Bootstrap?

Ans. Thumbnails are created by adding tag with .thumbnail class while working with an image. It adds four pixels of padding along with a grey border. While hovering over the image, the image outline glows with an animation effect.

Any sort of HTML element can be added into thumbnails to customize them such as buttons, paragraphs or headings.

Q15.  What does responsive utility classes do in bootstrap?

Ans. These sets of classes are used to conceal HTML elements depending on screen resolution that separates by a media query. For Example: ‘hidden-md-down', It hides

Q16. What do you understand about Bootstrap media objects?

Ans. Bootstrap media objects are object styles used to create different types of elements, such as the comment section in blogs Tweets, which generally comprises textual content and either a left-aligned or right-aligned image. The main purpose of bootstrap media objects is to simplify and reduce the code needed to create blocks of information. Bootstrap classes are used to achieve the desired goals such as lightweight markup and easy extensibility.

Q17. What are Bootstrap alerts? Name its classes.

Ans. Pre-written alert messages are created by using bootstrap alerts. This adds style to the way messages appear to the user so that they become more noticeable. The four classes in bootstrap alerts are .alert-success, .alert-warning, .alert-info, .alert-danger.

 Q18. Where are the .media and .useful classes used in Bootstrap?

Ans. the.media class lets a media object, such as images, audio or video, to move to the right or left of a content block. Generally, for putting a content thread or to add a list of articles in an unordered list, the .useful class is used.

Q19. What is the purpose of lead body copy in Bootstrap?

Ans. Lead body copy is used to add formatting to the paragraph such as enlarging the text size or to increment the line-height etc. A class=”lead” is used for this purpose.

 Q20. What is the purpose of the Scrollspy plugin?

Ans. This plugin is used to target certain sections of a web page depending on the scroll position. After this plugin, .active classes can be added to the Bootstrap navbar.

Q21. What is the purpose of the Modal plugin in Bootstrap?

Ans. A modal plugin is used to create a modal window. This window is inherited and lies on top of its parent window. It adds many features and functionalities that enhances the user experience.

Q22. Explain Bootstrap well.

Ans. Bootstrap well is created to add a sunken or inset effect to a webpage. It is a container tag that comes within

. To create a bootstrap well, the whole content should be wrapped within a

tag with a .well class.

Q23. Explain panels in Bootstrap?

Ans. When a DOM component needs to be kept in a box, then panels are used. To retrieve a panel in bootstrap, class.panel  is added to the

element. class.panel-default can also be added to make it a default element.

 Q24. What are the ways in which pagination links can be customized in Bootstrap?

Ans. Pagination links can be customized by using .disabled for inactive links .active for signifying the current page.

Q25. What is the use of the affix plugin in Bootstrap?

Ans. Affix plugin is used for affixing a tag to a certain location in a webpage. It is also possible to toggle pinning on and off for the tag that is affixed. Some of the popular examples of affix plugins in bootstrap are social icons. The that is affixed starts from one particular location in a webpage to a certain point where the scrolling stops for the rest of the web page.

Q26. How is the tabbed navigation menu created in Bootstrap?

Ans. Tabbed navigation can be created by using an unordered list along with the base class of .nav. Afterwards, .nav-tabs class is added.

Q27. How navbar is created in Bootstrap?

Ans. Firstly the classes .navbar, .navbar-default is added to the tag. Afterwards, role=” navigation” is added to the above element, for facilitating the inaccessibility. A header class .nav-header is added to the

Q28. What are badges in Bootstrap?

Ans. Badges are almost similar to labels with just one exception that the corners are rounded. They are majorly used to highlight unread or new items. For using badges in bootstrap, is added to links and to navigation bars.

Q29. What are labels in Bootstrap?

Ans. Labels are used as markups in web pages to display counts or tips. ‘.labels’ class is used to indicate the labels in bootstrap.

Q30. Explain jumbotron in Bootstrap?

Ans. A jumbotron is used to increment the heading size and to add sufficient margins for landing pages in a website. A jumbotron is created with ‘.jumbotron’ class in the container.

Q31. 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 training Bangalore.

Q32. What Bootstrap Package Includes?

Ans. 

Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background. This is covered in detail in the section Bootstrap Basic Structure

CSS: Bootstrap comes with the 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.

Q33. 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.

Q34. Define  Bootstrap thumbnails?

Ans. A lot of sites need a way to lay out images, videos,text, etc in a grid, and Bootstrap has an easy way to do this with thumbnails.

To create thumbnails using Bootstrap:

Q35. What are Bootstrap Plugins?

Ans. Bootstrap comes bundled with 12 jQuery plugins that extend the features and can add more interaction to your site. To get started with Bootstrap’s JavaScript plugins, you don’t need to be an advanced JavaScript developer. By utilizing Bootstrap Data API, most of the plugins can be triggered without writing a single line of code.

Q36. Define UI Bootstrap?

Ans. UI Bootstrap incorporates Bootstrap components written in AngularJS by the AngularUI team. It aims to provide AngularJS directives with the markup and CSS of Bootstrap. It has dependencies on AngularJS and Bootstrap CSS.

Aspired to become an Bootstrap? 

Explore the post to discover the know-hows on Bootstrap Training.

Q37. Define Kickstrap?

Ans. Kickstrap is a product where AngularJS is baked together with Bootstrap in conjunction with JavaScript Package Manager (JSPM). You can leverage the advantage of running an authenticated database-driven web application without the native backend. Kickstrap uses Firebase adhering to a Backend as a Service (BaaS) model.

Q38. What are different button styles in Bootstrap?

Ans. There are seven styles to add a button in Bootstrap. Use the following classes to achieve the different button styles:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Q39. What are Bootstrap Form Rules?

Ans. 

  • Always use
    (helps improve accessibility for people using screen readers)
  • Wrap labels and form controls in

    (needed for optimum spacing)