Bootstrap Interview Questions & Answers 2019

1.    What is Bootstrap?

Bootstrap is a mobile first front-end framework for easier web development with supporting all virtual devices. It uses HTML, CSS, JavaScript.

2.    Why we should use Bootstrap?

Every browser can support bootstrap features. With the knowledge of HTML, CSS, and JavaScript anyone can start working with Bootstrap. Bootstrap responsive CSS adjusts to Desktops, Mobiles, and Tablets. It provides web-based customization. Bootstrap is open source. It can be used for mobile first design styles using the entire library instead of separate and different files.

3.    What are Responsive websites?

Responsive means a website can be used on any platform with all types of screen size. A platform like it may be a desktop, laptop, tablet or smartphones. It automatically adjusts with changing the width and height of the screen.

In today’s era, people, as well as business, follow the smartphones for their personal and professional use. So, bootstrap is the best choice to make the website one time and it supports all kinds of devices.

4.    What are the features of Bootstrap v4?

The initial release of bootstrap v4.x was 4.0 and the final release in 2018-2019 is 4.2 ;

·         The toast component is added for showing notifications

·         The spinner component is added for loading

·         The utility class .text-decoration-none is added

·         The bootstrap-grid.css file updates the margin and padding of the grid system

·         The .modal-xl class is used for modals

·         The .font-weight-lighter and .font-weight-bolder are added as utility classes

·         The validation styles for file inputs is added with new features

·         The print feature of dark tables is updated with new quality

·         The new utility class .dropdown-item-text is added for dropdown items

·         The Tooltips supports Shadow DOM

·         The double transitions issue on carousels is improved now

5.    What is a Source map file?

A source map file allows the web debuggers to refer to the original context from where the code was generated. The file has the .map extension.

6.    How to make images responsive using bootstrap3?

We can make responsive images using .img-responsive class. Let’s see the code,

<div class="container">

<img class="img-responsive" src="images/Satya.jpg" alt="Responsive"/><div>

      How to create responsive images in Bootstrap 4?

Bootstrap 4 works with .img-fluid to build responsive images. Let’s see the code,

<div class="container">

<img src="/Satya/Pics/Name.jpg" class="img-fluid" alt="">

</div>

1. 8.    How to make videos responsive in bootstrap3?

We can create responsive using a .embed-responsive class. Then we will add the .embed-responsive-item class to an <iframe> tag. Let’s see the code,

<div class="container">

<div class="embed-responsive">

<iframe class="embed-responsive-item"src="https://www.youtube.com/channel/ "></iframe>

</div>

</div>

1. 9  How to make tab component using bootstrap?

We can create nav components such as tabs using Twitter Bootstrap. You can use .nav-tabs class with the base class .nav. 

<ul class="nav nav-tabs">

<li class="active"><a href="#">Profile</a></li>

<li><a href="#">Details</a></li>

<li><a href="#">Contact</a></li>

</ul>

1. 10. How many types of classes are used in Bootstrap3 to create a responsive page layout?

There are 4 types of bootstrap grid classes. we can create grid column layouts extra small devices like mobile phones to large devices like large desktop screens. 

.col-xs-* : This class is used for extra small device like smart phone (Size<768px)

.col-sm-*: This class is used for small device like tablets (size>=768px)

.col-md-*: This class is used for medium device like laptops and small size desktop CRT screen (size >=992px)

.col-lg-* : This class is used for large device like flat screen or large size desktop (size>=1200px)

1. 11. How to hide elements in Bootstrap3 based on device?

This can be possible using hidden utility classes. See

hidden-xs-* : Hide the elements only on extra small de

hidden-sm-* : Hide the elements only on small devices

hidden-md-*: Hide the elements only on medium devi

hidden-lg-*: Hide the elements only on larger devices.

1. 12. How to visible elements based on device screen?

This can be possible using hidden utility classes. See the below classes,

visible-xs-*: Visible the elements only on extra small de

visible-sm-*: Visible the elements only on small devices.

visible-md-*: Visible the elements only on medium devi

visible-lg-*: Visible the elements only on larger devices.

1. 13. How to show certain elements for printing purpose?

visible-print class is visible for printing purpose. Let’s see the code,

<div class="container">

<div class="row">

<div class="col-xs-10 visible-print">

<!--It is visible when printing.-->

</div>

</div>

</div>

1. 14. What is the grid size in Bootstrap 4?

Bootstrap 4 supports 5 tier grid system. The below lists for different screen sizes of device,

Extra small <576px :

0.    Width container will be auto.

1.    Here class prefix is .col-.

2.    A number of columns will be 12.

3.    It can be nestable.

4.    It supports column ordering.

Small =576px :

5.    Width container will be 540px.

6.    Here class prefix is .col-sm-.

7.    A number of columns will be 12.

8.    It can be nestable.

9.    It supports column ordering.

Medium =768px :

10. Width container will be 720px.

11. Here class prefix is .col-md-.

12. A number of columns will be 12.

13. It can be nestable.

14. It supports column ordering.

Large =992px:

15. Width container will be 960px.

16. Here class prefix is .col-lg-.

17. A number of columns will be 12.

18. It can be nestable.

19. It supports column ordering.

Extra large =1200px :

20. Width container will be 1140px.

21. Here class prefix is .col-xl-.

22. A number of columns will be 12.

23. It can be nestable.

24. It supports column ordering.

15. How to create a bootstrap tooltip using jQuery?

Using data-toggle attribute that means include data-toggle="tooltip" to the element and initialize it using jQuery. For setting the tooltip message include the title attribute to the element.

Let’s see the code,

<button class="btn btn-primary" tooltip="The title message is shown"

data-toggle="tooltip">

Click Here

</button>

<script type="text/javascript">

$(document).ready(function () {

$('[data-toggle="tooltip"]').tooltip();

});

</script>

1. 16. How to set alert using JavaScript?

To create an alert, I can use the alert class. Types of alert contextual classes are mentioned below,

0.    alert-danger: This can be used for error purpose.

1.    alert-success: This can be used for success purpose.

2.    alert-danger: This can be used for information purpose.

3.    alert-warning: This can be used for warning purpose.

First, create a button element for click event and then create div element with ID and message information.

<button id="btnAlert" class="btn btn-primary">

Alert

</button>

<div id="dvAlert" class="alert alert-danger collapse">

<a href="#" class="close" data-dismiss="alert">×</a>

<strong>Error!</strong> Check once using unit test.

</div>

Next step is to mention div id inside button click event using jquery.

<script type="text/javascript">

$(document).ready(function () {

$('#btnAlert').click(function () {

$('#dvAlert').show('fade');

});

});

</script>

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Mariano

I'm Ethan Mariano a software engineer by profession and reader/writter by passion.I have good understanding and knowledge of AngularJS, Database, javascript, web development, digital marketing and exploring other technologies related to Software development.