Define what Bootstrap is.
Bootstrap is a front-end framework that is commonly used to create HTML, CSS, and JS web applications. Its layout is very responsive, fast, and easy to use. It mostly focuses on building mobile applications using design templates. You can also create interactive components like drop-downs, forms, buttons, button groups, alerts, cards, tabs, and many more components.
Why Bootstrap is used for mobile application developments?
It is used for mobile application developments because it has several responsive features and design templates that are easy to use. In other terms, it uses a Mobile-first approach.
What are the main features of Bootstrap 4.
Its features include:
- Free and open-source.
- Compatible with almost all modern browsers like Google Chrome, Firefox, Safari, Opera, and Internet Explorer.
- Responsive features.
- Easy to use.
- Lightweight.
- Consists of several components and utilities.
- Support for jQuery plugins.
- Easily customizable.
- Mobile-friendliness.
- Simple integration.
- Good documentation support.
- Availability of a large number of templates, themes, and plugins.
Bootstrap Interview Questions
Name key components of Bootstrap 4.
Its key components include:
- Scaffolding: Bootstrap built on a responsive grid system consists of a 12-column grid.
- JS Plugins: Contains JS and jQuery plugins.
- CSS: Contains CSS files.
What do you understand by the term container?
Containers are the most fundamental components in Bootstrap. It 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.
What do you mean by Bootstrap ClassLoader?
Bootstrap ClassLoader is a part of Java and a main parental class of class loader.
Advance Bootstrap Interview Questions
How many types of layouts are there in Bootstrap 4?
There are two types of layouts in Bootstrap 4.
They are:
- Fluid layout
- Fixed layout
What is the fluid layout?
The fluid layout is useful when you need to make an app that involves the full width of the screen. The fluid layout adjusts itself according to the browser size.
What is the fixed layout?
The fixed layout is the default layout type and it also responsive and easy to use. Unlike the fluid layout, it cannot adjust itself according to the browser size. The fixed layout should be 940px in most cases.
Bootstrap Interview Questions
How can you display code in Bootstrap?
You can display code in two ways.
They are:
- Using the <code> tag – This method is used to display code as inline code.
- Using the <pre> tag – This method is used to display code as a standalone block.
How can you make an image round in Bootstrap 4?
You can use the .rounded class to make an image round.
What is a progress bar?
A progress bar is an indicator to show the progress of a particular process.
Advance Bootstrap Interview Questions
Name the contextual classes that are used with the progress bar.
The contextual classes used with the progress bar are as follows:
- The .bg-primary class
- The .bg-secondary class
- The .bg-success class
- The .bg-danger class
- The .bg-warning class
- The .bg-info class
- The .bg-white class
- The .bg-light class
- The .bg-dark class
=> For more details, please refer to our progress bar tutorial.
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”
What are the different button styles in Bootstrap 4?
In Bootstrap 4, there are lots of styles that we can use with the buttons.
Some of them are:
- Buttons with colors
- Buttons with a colored outline
- Small buttons
- Large buttons
- Block-level buttons
- Button links
=> For more details, please refer to the button tutorial.
Bootstrap Interview Questions
What are Bootstrap alerts?
Bootstrap alerts are used to create presume alert messages, which add styles to make the messages more noticeable to the user.
The following contextual classes can be used to create colourful alerts:
- The .alert-primary class
- The .alert-secondary class
- The .alert-success class
- The .alert-danger class
- The .alert-warning class
- The .alert-info class
- The .alert-light class
- The .alert-dark class
=> For more details, please refer to our alerts tutorial.
Define Bootstrap 4 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 .img-thumbnail class around the image.
Explain the modal in Bootstrap4.
A model is an inherited window that is layered over its parent window. This is used to augment the user experience and add different functionalities. Model windows are created with the help of the modal plugin.
Advance Bootstrap Interview Questions
Which are the classes used for pagination in Bootstrap4?
The classes used for pagination are the .pagination class, the .page-item class, the .page-link class, the .pagination-sm class, the .pagination-lg class, the .active class and the .disabled class.
The following table provides more information about the above classes:
| Class | Function |
| The .pagination class, the .page-item class and the .page-link class | These three classes are used to create basic pagination. |
| The .pagination-sm class | It creates small pagination while decreasing the font size and spacing of the pagination nav. |
| The .pagination-lg class | It creates large pagination while increasing the font size and spacing of the pagination nav. |
| The .active class | It highlights the current page. |
| The .disabled class | It makes the page link un-clickable. |
Explain what Bootstrap’s collapsing elements is.
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.
What is well in Bootstrap 3?
Bootstrap well is a form of container which thrives or makes the content look recessed on the web page. It also wraps the content using the .well class.
Bootstrap Interview Questions
What will be the output of the below code and why?
<divclass="progress"> <divclass="progress-bar bg-success"style="width: 65%"> <spanclass="sr-only">75% successfully completed</span> </div> <divclass="progress-bar bg-warning"style="width: 20%"> <spanclass="sr-only">30% completed with warnings</span> </div> <divclass="progress-bar bg-danger"style="width: 15%"> <spanclass="sr-only">15% did not complete</span> </div></div>
If we place multiple bars with the same .progress parent element, Bootstrap will pile them into one single progress bar. As we know, in Bootstrap the sum of the progress bar is 100%. So, the progress bar will give the result full width and fully populated.
How can we customize links to pagination?
We can customize the links by using the .disabled class for unclickable links and the .active class for indicating the current page.
Explain input groups in Bootstrap4.
Input group is put out from controls.
We can prepend and append addons elements to a .form-control in front of or behind text inputs by using the .input-group-prepend class and the .input-group-append class respectively. Further, you can use the .input-group-sm class to make a small input group and the .input-group-lg class to make a large input group.
Advance Bootstrap Interview Questions
How can you create a tabbed navigation menu?
We can create a tabbed navigation menu by making a basic unordered list with the .nav base class and the .nav-tabs class.
How can you create a pills navigation menu?
A pills navigation menu can be created by making an unordered list with the base class of .nav the .nav-pills class.
Explain briefly how a navbar works.
A navbar is an eminent feature to make a responsive meta component that works as navigation headers for your application and site. In the mobile view, the navbar collapses and becomes horizontal as the available viewport width increases.
Bootstrap Interview Questions
What are the two methods of creating a navbar in Bootstrap 4?
We can create a navbar using the following two methods:
- Using an <ul> element and <li> elements
- Without using the <ul> and <li> elements
What is breadcrumb?
Breadcrumb is an efficient way to show hierarchy-based information for a site. This can show the information like published date, categories or tags in a blog, etc. It may also tell the user about the current page location within a navigational hierarchy.
We can use the .breadcrumb class to create a breadcrumb.
What are labels?
Labels are used for offering counts, tips, or other things to provide markup on web pages. We use the <label> tag to indicate labels.
Advance Bootstrap Interview Questions
What are badges in Bootstrap4?
Badges are small count and labelling components. We use the .badge class and a contextual class (.badge-*) to create a badge.
What is the function of a jumbotron in Bootstrap 4?
It is used to increase the size of headings and to add more margin for landing page content. To create a jumbotron we have to create a container <div> element with the .jumbotron class.
How can we make an image responsive in Bootstrap4?
Add the .img-fluid class to the <img> tag to make an image responsive. It applies the styles, .max-width: 100% and height: auto. So it can match nicely with the parent element.
Bootstrap Interview Questions
What do you mean by normalize in Bootstrap?
Bootstrap normalize is a small CSS file that is used to make cross-browser consistency.
What is lead?
Lead makes a paragraph stand out. The .lead class is used for this purpose and it enlarges the font and taller increases the line-height as well.
What are panels in Bootstrap 3?
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 the .panel class to the <div> element. We can also add the .panel-default class to this element.
Advance Bootstrap Interview Questions
How will you create a Bootstrap 3 panel with headings?
There are two ways to add panel headings:
The first method is directly using the .panel-heading class to add heading containers in a panel. The second method is by using any heading tag from <h1> to <h6> with the .panel-title class to add more styles to the headings.
What is a scroll spy in Bootstrap?
It is an auto-updating nav component that allows in fetching section of the page based on the scroll position. The .active class will update accordingly from one nav item to another based on the scroll position.
What is the function of the affix plugin in Bootstrap 3?
Affix is a jQuery plugin. It allows <div> element to be attached to a location on the page.
Example: Use of the social icon on a page. The icons will start in a location, but when the page hits on a certain mark, it will block the <div> element in place and will stop the scrolling for the rest of the page.
Bootstrap Interview Questions
What is the purpose of the grid system?
By using the grid system, we can make up to 12 columns across a page. Different classes have been defined for this purpose.
What are grid classes in Bootstrap 4?
There are five grid classes in Bootstrap.
They are:
- .col-*
- .col-sm-*
- .col-md-*
- .col-lg-*
- .col-xl-*
The following table shows detailed information about the grid classes. Show 102550100 entries Search:
| Class Prefix | Suitable Device Type | |
|---|---|---|
| 1 | .col-* | For an extra small device (a device with a screen width less than 576px) |
| 2 | .col-sm-* | For a small device (a device with a screen width equal to or greater than 576px) |
| 3 | .col-md-* | For a medium device (a device with a screen width equal to or greater than 768px) |
| 4 | .col-lg-* | For a large device (a device with a screen width equal to or greater than 992px) |
| 5 | .col-xl-* | For an extra-large device (a device with a screen width equal to or greater than 1200px) |
What are the global styles that are used in Bootstrap 4 default typography?
These are as follows:
- Font family – Native font stack
- Font size – Default root font size of the browser that is usually 16px
- Line height – 1.5
Bootstrap Interview Questions
What will be the output of the below code?
<div class="row">
<div class="col-6 col-md-4">A</div>
<div class="col-6 col-md-4">B</div>
<div class="col-6 col-md-4">C</div>
</div>According to the above code segment, the columns start at 50% of width on mobile devices and reduce up to 33.3% of width on desktop devices.
What are the dependencies required to work Bootstrap properly?
jQuery is the only dependency required to work Bootstrap properly.
Explain the function of the following code segment.
<a href="#">Home <span class="badge badge-primary">36</span></a>This code will produce a link with an inline badge which will give an important notification to the user like number received, messages received, or the number of requests, etc. Further, the .badge-primary class will add a blue color to the badge.
Advance
Advance Bootstrap Interview Questions
What is a toast and what are the main components of a toast?
It is like an alert box that appears for a small time. The main components of a toast are the toast header and the toast body.
Make a comparison between Bootstrap and Foundation frameworks?
Both are popular front-end frameworks.
The following table shows a comparison between the two frameworks. Show 102550100 entries Search:
| Parameter | Bootstrap | Foundation | |
|---|---|---|---|
| 1 | About | The most popular framework for HTML, CSS, and JavaScript | The most advanced responsive front-end framework |
| 2 | Current Version | Version 5 | Version 6 |
| 3 | Developer | Bootstrap Core Team | ZURB |
| 4 | Released in | 2011 | 2011 |
| 5 | Browser support | Almost all modern browsers | Almost all modern browsers |
| 6 | Written in | HTML CSS Less/Sass JavaScript | HTML CSS Sass JavaScript |
| 7 | Preprocessors | Less / Sass | Sass |
| 8 | License | MIT License | MIT License |
| 9 | |||
| 10 | GitHub stars | 149k | 29k |
Explain Glyph icons in Bootstrap 3?
Glyph icons are reusable components that provide beautiful icons (these icons are known as glyphs) under a wide range of categories. It can almost use anywhere in your code. Glyph icons do not only provide icons or glyphs, they also provide support for dropdowns, input groups, navigation, alerts, etc.
<span class=”glyphicon glyphicon-search”></span>Note: Bootstrap 4 does not support Glyph icons. Therefore, you can use the following icon sets when dealing with v4.
- Font Awesome
- Iconic
- Octicons
Bootstrap Interview Questions
What is the function of the transition plugin in Bootstrap?
It provides simple transition effects like sliding or fading in modals.
In Which language Bootstrap is written ?
It is written in HTML, CSS, LESS, Sass and JavaScript.
What are current Stable version of Bootstrap ?
Version: 3.3.7
Advance Bootstrap Interview Questions
Who had discovered the front-end Bootstrap framework?
Jacob Thornton and Mark Otto at Twitter.
What are bootstrap modal plugins?
Modal plugins act as a small pop up, or child windows can be used for the parent window. The main objective of this dialog box is to provide user notifications and warn users about session timeouts or to receive final configurations to delete or save any data. Bootstrap.js or bootstrap.min.js are required for the proper working of bootstrap modal plugins.
Bootstrap modal plugins can be used to add flexible and smart dialog boxes. The backdrop can be used to automatically close any modal.
Nested modal is not acceptable in Bootstrap, and only one window can be used at one time in Bootstrap.
Can we make a responsive image in Bootstrap?
Yes, we can make a responsive image with the use of .img-responsive in the <img> tag.
<img class="img-responsive" src="codingtag.png" alt="Coding Tag">
Bootstrap Interview Questions
Explain the differences between Bootstrap 4 and Bootstrap 3?
In Bootstrap 4, Normalize.css is used i.e., reboot.
In Bootstrap 4, the global pixel size has been increased from 14px to 16px.
In Bootstrap 4, Primary CSS unit px is replaced by rem.
In Bootstrap 4, 5 tier Grid System is used in place of 4 tier Grid System.
In Bootstrap 4, the Dark inverses table is supported.
In Bootstrap 4, CSS files have been converted into SCSS.
In Bootstrap 4, for full-width jumbotrons, the .jumbotron-fluid class has been introduced.
How can you create pagination on our website?
.pagination class with <ul> can be used to add pagination
<ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>
What is transition plugin in bootstrap?
Transition plugins can be used for transition effects, including fading out alerts, tabs, carousels panes, and models.
Transition.js, along with JS, is needed to insert this functionality.
Advance Bootstrap Interview Questions
How can we resize a group of a button instead of resizing each button?
These classes .btn-group-lg, .btn-group-xs classes, .btn-group-sm can be used to resize a group button.
How can we customize the links for pagination in Bootstrap?
- .active to specify the current page.
- .disabled can be used for unclickable links.
<ul class="pagination"> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li class="disabled"><a href="#">5</a></li> </ul>
