Index

General

  1. Why Bootstrap is used for Mobile Web development?
  2. Explain the features of Bootstrap.
  3. Define the key components of Bootstrap.
  4. What do you understand by Bootstrap container?
  5. What do you mean by Bootstrap Classloader?
  6. How many types of layouts are there in Bootstrap?
  7. What do you mean by the Bootstrap Grid System?
  8. Define Fluid Layout.
  9. Define Fixed Layout.
  10. Please explain Normalize in Bootstrap.
  11. How can you display code in Bootstrap?
  12. When will you use <code>tag and <pre>tag?
  13. What is a progress bar in bootstrap?
  14. Can you enumerate the various lists supported by Bootstrap?
  15. Name the contextual classes that are used with the progressive bar in bootstrap.
  16. What are responsive utility classes in Bootstrap?
  17. What are the different button styles in Bootstrap?
  18. What are Bootstrap alerts?
  19. Define Bootstrap thumbnails.
  20. Explain Modal plugin in Bootstrap.
  21. Which class is used for pagination in Bootstrap?
  22. Explain what is Bootstrap collapsing elements.
  23. What is Bootstrap Well?
  24. Explain the uses of the carousel plugin in Bootstrap.
  25. What do you mean by Glyphicons? How do you use them?
  26. Please provide an explanation of input groups in Bootstrap.
  27. How will you create a tabbed, pills, and vertical pills navigation menu in Bootstrap?
  28. What do you understand by the Bootstrap navbar? How will you create one?
  29. How can we customize links of pagination in Bootstrap?
  30. Explain the input group in Bootstrap.
  31. Write the ways to create a tabbed navigation menu in Bootstrap.
  32. In Bootstrap, how can you create a pills navigation menu?
  33. Can you explain Bootstrap breadcrumb?
  34. How do you create and customize thumbnails in Bootstrap?
  35. What do you understand by Bootstrap media objects?
  36. What purposes do the .media and .useful classes serve in Bootstrap?
  37. Do you know what Bootstrap panels are? Also, explain how to create a Bootstrap panel with a heading.
  38. Can you explain the purpose of the Scrollspy plugin?
  39. Please enumerate the various contextual classes available for styling the panels in Bootstrap.
  40. How navbar works in Bootstrap?
  41. How we can create a navbar in Bootstrap?
  42. What is Bootstrap breadcrumb?
  43. What are labels in Bootstrap?
  44. What are badges in Bootstrap?
  45. What is a jumbotron in Bootstrap?
  46. How can we make image responsive in Bootstrap?
  47. What do you mean by normalize in Bootstrap?
  48. What is lead body copy in Bootstrap?
  49. Explain the concept of creating a vertical or basic form in Bootstrap.


The Questions
General
1. Why Bootstrap is used for Mobile Web development? ↑

It is used for Mobile Web development because it has responsive designs and templates which are easy to use.

2. Explain the features of Bootstrap. ↑

Its features include:

Open source for use Compatibility with all browsers. Responsive designs Easy to use and fast.

3. Define the key components of Bootstrap. ↑

Its components include:

Scaffolding: It has the grid system, background, styles. JS Plugins: Contains JS and jQuery plugins. Customize: Can customize frameworks. CSS: Contains CSS files.

4. What do you understand by Bootstrap container? ↑

Bootstrap container behaves like a container where you can put HTML code and it is a part within the page where the content of the site can be placed to make it responsive and fast.

5. What do you mean by Bootstrap Classloader? ↑

Bootstrap class loader is a part of java and a main parental class of class loader.

6. How many types of layouts are there in Bootstrap? ↑

There are two types of layouts in Bootstrap.

They are:

Fluid Layout Fixed Layout

7. What do you mean by the Bootstrap Grid System? ↑

The Bootstrap Grid System is a responsive, mobile-first system that scales up to 12 columns as per the increase in the device or viewport size. The system features predefined classes for easy layout options and powerful mix-ins for generating effectively semantic layouts.

8. Define Fluid Layout. ↑

Fluid Layout is useful when you need to make an app that involves the full width of the screen i.e. Fluid Layout adjusts itself according to the browser size.

9. Define Fixed Layout. ↑

A fixed layout is responsive and easy to use but just like the fluid layout, it cannot adjust itself according to the browser size. The fixed layout should be 940 px in most cases.

10. Please explain Normalize in Bootstrap. ↑

For establishing cross-browser consistency, Bootstrap makes use of Normalize. It is a small CSS file capable of offering better cross-browser consistency in the default styling of HTML elements. Also, Normalize.css is an HTML5-ready and modern alternative to CSS resets.

11. How can you display code in Bootstrap? ↑

You can display the code in two ways i.e. by using the tag and by using the 

tag.
12. When will you use <code>tag and <pre>tag? ↑

tag is used to show the code inline and 

tag is used to show code with multiple lines.
13. What is a progress bar in bootstrap? ↑

Progress bar is used with HTML tag style in HTML element using keyword. In bootstrap, we use html5 with CSS classes that have special features in bootstrap, which is only made for the progress bar.

14. Can you enumerate the various lists supported by Bootstrap? ↑

Following are the three types of lists supported by Bootstrap:

Definition Lists – This type of list allows each list item to have both the

and the
elements. The
denotes definition term, which is the term or phrase being defined. The
element contains the definition for the
element. Ordered Lists – This type of list follows some kind of sequential order. Also, it is prefaced by numbers. Unordered Lists – Traditionally styled with bullets, an unordered list doesn’t follow any particular order. Using the .list-unstyled class allows removing the bullets styling from the unordered list. For placing all list items on a single line, the .list-inline class can be used.

15. Name the contextual classes that are used with the progressive bar in bootstrap. ↑

The contextual classes used with progressive bar are as follows.

Progress-success Progress-info Progress-warning Progress-danger

16. What are responsive utility classes in Bootstrap? ↑

Responsive utility classes in bootstrap are a set of classes that are used to conceal or exhibit the HTML elements based on screen resolution that discerns by media query in bootstrap.

Example: “hidden-md-down”, It hides

17. What are the different button styles in Bootstrap? ↑

In bootstrap, there are seven styles which we can use with the bootstrap button.

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

18. What are Bootstrap alerts? ↑

This is used to create presume alert messages, which adds style to the messages to look more noticeable to the user.

There are four classes in alerts: .alert-success, .alert-info, .alert-warning, .alert-danger.

19. Define Bootstrap thumbnails. ↑

It is a way to use the layout images, videos, text, etc. in a grid system. We can create thumbnails by adding a tag with the class .thumbnails around the image.

This will add four pixels of padding and a grey border.

20. Explain Modal plugin in Bootstrap. ↑

A model is an inherited window that is layered over its parent window. This is used to augment the user experience and adds different functionalities to the users. Model windows are created with the help of the modal plugin.

21. Which class is used for pagination in Bootstrap? ↑

To add pagination on the webpage we have to use the class .pagination.

22. Explain what is Bootstrap collapsing elements. ↑

It allows you to collapse any particular element without using any JavaScript code.

To use this feature in bootstrap you have to add data-toggle=” collapse” to the controller element along with a data target to automatically assign the control of a collapsible element. We can use this by writing .collapse(options) etc.

23. What is Bootstrap Well? ↑

Bootstrap well is a form of container which thrives or makes the content look recessed on the web page. It also wraps the content by using .well class.

24. Explain the uses of the carousel plugin in Bootstrap. ↑

Carousel plugin in bootstrap is used to make sliders in the web pages or your site. There are several carousel plugins that are used in bootstrap to display large contents within a small space by adding sliders.

Example: .carousel(options), .carousel(‘pause’), .carousel(cycle’), .carousel(‘prev’), .carousel(‘next’).

25. What do you mean by Glyphicons? How do you use them? ↑

Glyphicons are icon fonts that are used in web projects. Although Glyphicons Halflings aren’t free and require licensing in general, they are available free of cost for Bootstrap projects. Add the following code anywhere you wish to use the Glyphicons:

Note: - For proper padding, it is advised to leave a space between the icon and the text.

26. Please provide an explanation of input groups in Bootstrap. ↑

Input groups are simply extended Form Controls in Bootstrap. One can easily append and prepend buttons or text to the text-based inputs using the input groups. Appending and prepending content to an input field allows adding common elements to the user input.

You can append or prepend elements to a .form-control by:

Wrapping it in a

element with the class .input-group With the same
element, put the extra content inside a element with the .input-group-addon class Finally, place the element before or after the element as required

27. How will you create a tabbed, pills, and vertical pills navigation menu in Bootstrap? ↑
  1. For creating a tabbed navigation menu Start with a basic unordered list with the .nav base class Now, add the .nav-tabs class
  2. For creating a pills navigation menu Start with a basic unordered list with the .nav base class Now, add the .nav-pills class
  3. For creating a vertical pills navigation menu Stack the pills vertically using the .nav-stacked class Now, add the .nav and .nav-pills classes
28. What do you understand by the Bootstrap navbar? How will you create one? ↑

One of the most prominent features of Bootstrap, a navbar is a responsive ‘meta’ component that serves as a navigation header for an application or website. There can be several navbars in an application or website.

In mobile views, a navbar collapses and becomes horizontal when the available viewport width increases. The navbar includes styling for basic navigation and site names. Here is how to create a navbar in Bootstrap:

Add the .navbar and .navbar-default classes to the