Frequently asked - Bootstrap Interview Questions and Answers - Part 02
21. What are the different button styles in Bootstrap?
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
.btn-primary.btn-secondary.btn-success.btn-danger.btn-info.btn-warning..btn-danger..btn-light..btn-dark..btn-link.
22. 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.
23. What is Bootstrap breadcrumb?
Bootstrap breadcrumb is an efficient way to show hierarchy-based information for a site. This can show the dates of publishing, categories or tags in a blog. They also tell the user about the current page location within a navigational hierarchy. So we can say that Bootstrap breadcrumb is simply an unordered list with a class of .breadcrumb.
24. What are panels in Bootstrap?
Panels are components that are used when you want to put your DOM component in a box. So, to retrieve a basic panel we just need to add class.panel to the div element. We can also add class .panel-default to this element.
25. How will you create a Bootstrap panel with heading?
There are two ways by which we can add panel heading.
First is, we can directly use .panel-heading class to add heading container in a panel and the second way is by using any heading tag like <h1> to <h6> with a .panel-title class to give more styles on the heading.
26. What is the role of media object in Bootstrap and how many types are available?
In Bootstrap, it is possible to add images, audio, and video using media object. It can either be placed on the left side or the right side of the content.
If the developer wishes to create a media element then they can use .media class where the source will be specified as .media-object class.
There are usually two types of Media-objects:
- .media
- .media-list.
27. What is the step-wise procedure for creating basic or vertical forms?
There are few steps, which can be followed for creating vertical forms.
- Firstly, a role form can be added to the parent
<form>element. - Secondly, add appropriate spacing by wrapping labels and control in
<div>and using the function class.form-group. - Lastly, apply the function class
.form-controlto different elements such as<input>,<textarea>and<select>.
28. What do you mean by Bootstrap “well”?
A Bootstrap well is a container that makes the content appear sunken. Sometimes it may also give an inset effect on the webpage.
Thus, a developer can create a well and also wrap the content in the well with the help
of <div> and class .well.
29. What is a Affix plugin in Bootstrap?
The Affix plugin allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them “stick” at a specific area while scrolling up and down the page.
30. What will be the default Bootstrap look of the alert created with this following code?
Consider:
<div class="alert" role="alert">Warning! I'm missing something.</div>
Answer:
Alert messages are used to provide feedback message that usually require the attention of the user. Here it is important to note that Bootstrap Alerts don’t have default class. If a contextual class such as .alert-success, .alert-info, .alert-warning, or .alert-danger, is not provided, a default grey alert will be created.
31. Explain what the following code does, and where they are useful
Consider:
<a href="#">Home <span class="badge">36</span></a>
Answer:
This code will generate a link with an inline badge that provides important notifications to the user, such as number received or unread messages or number of friend requests. Badges are most commonly used in message applications and social networking sites.
32. What is the role of pagination in bootstrap and what are their classifications?
When an unordered list has to be handled by bootstrap, it uses pagination. To handle the list, different classes are available such as:
.pagination,.disabled,.active,.pagination-lg.
33. What is Normalize in Bootstrap?
Bootstrap uses Normalize to establish cross browser consistency.
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
34. What is Bootstrap Grid System?
The Bootstrap Grid System is used for layout, specifically Responsive Layouts. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers. The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components.
35. Explain column ordering in Bootstrap?
Column ordering is one of the most interesting features that can be found in Bootstrap. By using appropriate functions, the columns can be written easily and also in a defined order. You can also show them in another column. In order to change or alter the order of the column easily, the functions .col-md-push-* and .col-md-pull-* can be used.
36. What are Grid classes in the Bootstrap?
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
They are:
xsfor phone screens less than 786px wide.smfor the tablet screens which are greater than 786px wide.mdfor small laptop screen of size equal to or greater than 992px wide.lgfor laptop and desktop screens which are equal to greater than 1200px wide.
37. What is screen reader in bootstrap documentation?
A screen reader is a tool used by people who can’t see well or for some reason can’t read from a screen; it reads the text out loud to them, or presents it to them in a different format that they can use more easily. You should always consider screen readers for accessibility purposes.
38. What is the class sr-only used for? Is it important or can I remove it?
According to bootstrap’s documentation, the sr-only class is used to hide information intended only for screen readers from the layout of the rendered page.
For example you might consider to hide from sighted user an internal link “skip to main content” which is desirable for blind users if you have a complex navigation or adds in the page header before the content. You should always consider screen readers for accessibility purposes.
According to the World Health Organization, 285 million people have vision impairments. So making a website accessible is important.
39. How can you differentiate between Bootstrap and Foundation?
Bootstrap supports LESS preprocessor and allows the designing and development for both mobile and desktop. It uses only pixels and has a number of UI elements. Foundation, on the other hand, supports Sass preprocessor and allows mostly mobile designing. It uses REMs and has only a few options when it comes to UI elements.
40. Name some alternatives to Bootstrap.
There are lots of alternatives. Some of them are shown in the below list.
- Foundation
- Bulma
- Materialize
- Material Design Lite
- Skeleton
- Pure CSS
- Semantic UI
- Tailwind
- Uikit