Top 50+ Bootstrap Interview Questions and Answers

Top 50+ Bootstrap Interview Questions and Answers
Spread the love

Are you web developer or front end developer ? Here is the best list of Bootstrap Interview Questions and Answers. These questions will help you crack for interviews. These will help for freshers, experienced professionals and full stack developers.

Interview Questions on Bootstrap

Bootstrap is the most popular and powerful front-end development open-source framework. This framework is based on HTML, CSS, and JavaScript. It is used for developing interactive, easily scalable and platform independent mobile-first websites and web applications.

Bootstrap speeds-up the process of website development by utilizing reusable code blocks while providing responsive designs that automatically fits on any device without losing the style and look.

It provides various kind of plugins for including different attractive features to your website. The plugins can be included individually using Bootstrap’s individual files like “carousel.js”, “modal.js.”, etc., or import the complete package using “bootstrap.js” or “bootstrap.min.js”.

It is compatible with all popular browsers like Chrome, Firefox, Internet Explorer, Opera, etc.

 

1. What is Bootstrap thumbnail?

Ans. When we develop our website or web application that contain images, videos, dialogues, quotes, etc. Most of the times, we want to display them in grids. The classes that help us achieve it are “img-thumbnail” and “thumbnail”. For e.g.,

<img src=”onlinetutorials.jpg” class=”img-thumbnail” alt=”Tutorials” width=”250″ height=”200″>

2. Explain About Modal plugin in Bootstrap?

Ans. The modal plugin is a feature provided by Bootstrap which is used to create lightweight, customizable, responsive and multi-purpose pop-ups. Websites use modals to display popups like terms and conditions, Intro video, social media widgets, ads, etc.

This is how you can trigger a modal on a button: –

<a href=”#” class=”btn btn-lg btn-sucess” data-toggle=”modal” data-target=”#myModal”> Click here </a>

Here,

** data-toggle tells Bootstrap to invoke the modal window.

** data-target tells Bootstrap to load the given element on the page.

Whenever the button “Click here” is clicked, the modal with an Id “myModal” will pop-up.

3. Which class is used for pagination in Bootstrap?

Ans. Pagination is required for the sequencing of a large number of pages on a website. This makes it easier to go through the pages without missing any link.

In Bootstrap, it is achieved by using a class called “pagination”.

Example of use:-

<ul class=”pagination”>

<li><a href=”page1.html”>1</li>

<li><a href=”page2.html”>2</li>

<li><a href=”page3.html”>3</li>

</ul>

4. Explain what is Bootstrap collapsing elements?

Ans. Bootstrap provides a class called “collapse” which is used when you want to hide a large amount of content on your page and only show it on the click of a button.

Example of use: –

<p>

<button class=”btn btn-primary” type=”button” data-toggle=”collapse” data-target=”#displayData”> About Us </button>

</p>

<div class=”collapse” id=”dispalyData”>

We provide you top interview questions at onlinecoursetutorials.com

</div>

5. What is Bootstrap Well?

Ans. Bootstrap provides a class called “well” which is used to add a rounded border around an element that has a grey background and padding which gives it an inset effect.

Example of use: –

<div class=”well”> onlinetutorials </div>

6. Explain the uses of carousel plugin in Bootstrap?

Ans. The Bootstrap carousel is an efficient and responsive way to include a slideshow in your site. It can display content like images, videos, user markups or almost any type of content.

Example of use:-

<div class=”container”>

<h2>Slide Show</h2>

<div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>

<ol class=”carousel-indicators”>

<li data-target=”#mySlideShow” data-slide-to=”0″ class=”active”></li>

<li data-target=”#mySlideShow” data-slide-to=”1″></li>

<li data-target=”#mySlideShow” data-slide-to=”2″></li>

</ol>

<div class=”carousel-inner”>

<div class=”item active”>

<img src=”iphone.jpg” alt=”iPhone” style=”width:100%;”>

</div>

<div class=”item”>

<img src=”poco.jpg” alt=”PocoF1″ style=”width:100%;”>

</div>

<div class=”item”>

<img src=”mi.jpg” alt=”Redmi” style=”width:100%;”>

</div>

</div>

 

<a class=”left carousel-control” href=”#mySlideShow” data-slide=”prev”>

<span class=”glyphicon glyphicon-chevron-left”></span>

<span class=”sr-only”>Previous</span>

</a>

<a class=”right carousel-control” href=”#mySlideShow” data-slide=”next”>

<span class=”glyphicon glyphicon-chevron-right”></span>

<span class=”sr-only”>Next</span>

</a>

</div>

</div>

7. How can we customize links of pagination in Bootstrap?

Ans. There are several classes available in Bootstrap to customize the pagination links. For example.,

i) Use “active” class to indicate the current page. It will highlight the page number.

ii) Use “disabled” for links to the pages that are unavailable. It will make the page number unclickable.

iii) Use “pagination-lg” class for creating large size blocks.

iv) Use “pagination-sm” class for creating smaller blocks.

8. Explain input group in Bootstrap?

Ans. While taking input from the user, one would want to give a better look and feel of the input box to the users probably by giving a description of the input to be provided or the format of input to be given, etc.

Bootstrap provides a class called “input-group”, it enhances an input by adding an icon, text or a button in front or behind the input field.

To set the position of the help text, one of these two classes are used

i) “input-group-prepend” to add it in front of the input.

ii) “input-group-append” to add it behind the input.

And finally, to add and style the specific text use “input-group-text”.

9. Write the ways to create a tabbed navigation menu in Bootstrap.

Ans. Bootstrap provides a base “nav” class to create basic navigation components like tabs.

Tabs are created with <ul class=”nav nav-tabs”> and to mark the current page we use <li class=”active”>.

Example of use: –

<ul class=”nav nav-tabs”>

<li class=”active”><a href=”#”>Home</a></li>

<li><a href=”about.html”>About Us</a></li>

<li><a href=”courses.html”>Courses</a></li>

<li><a href=”contact.html”>Contact Us</a></li>

</ul>

10. In Bootstrap, how can you create a pills navigation menu?

Ans. Pills are created with <ul class=”nav nav-pills”> and to mark the current page we use <li class=”active”>.

Example of use: –

<ul class=”nav nav-pills”>

<li class=”active”><a href=”#”>Home</a></li>

<li><a href=”about.html”>About Us</a></li>

<li><a href=”courses.html”>Courses</a></li>

<li><a href=”contact.html”>Contact Us</a></li>

</ul>

11. How does navbar work in Bootstrap?

Ans. Bootstrap provides a feature of navigation panel which is placed at the top of the page for easy navigation through the site.

“navbar” class is used for creating a scalable and flexible navigation bar for a web page that extends and collapses depending on the device’s screen size.

Navbars are wrapped with navbar-expand(-sm/-md/-lg/-xl) for responsive collapsing. By default, Navbars and their contents are fluid. We use optional containers to limit their horizontal width.

However, navbars are responsive by default but we can use the collapse plugin to manipulate it. The navbar includes styling for site names and basic navigation.

You cannot print navbars as they are hidden, to print them you would have to add “d-print” to the navbar class.

12. How we can create a navbar in Bootstrap?

Ans. A basic navbar is created like this: –

<nav class=”navbar navbar-default”>

<div class=”container-fluid”>

<div class=”navbar-header”>

<a class=”navbar-brand” href=”#”>OnlineTutorials</a>

</div>

<ul class=”nav navbar-nav”>

<li class=”active”><a href=”index.t=html”>Home</a></li>

<li><a href=”tutorials.html”>Tutorials</a></li>

<li><a href=”questions.html”>Interview Questions</a></li>

<li><a href=”makemoney.html”>Make Money Onlnie</a></li>

</ul>

</div>

</nav>

13. What is Bootstrap breadcrumb?

Ans. Bootstrap breadcrumb shows the current page’s location within a navigational hierarchy. It shows your current location on the website and provides a link to each previous page with a separator added after each page title. Eg., home / tutorials / java / string / methods

“breadcrumb” class is used to create the path.

14. What are labels in Bootstrap?

Ans. Bootstrap provides a class called “label”, that is used to display some extra information or tips about something on a page. For example, if we are providing a tutorial on a certain language say C++, labels can be used to inform the expertise level before taking up the course. So, C++ can have labels like “Beginners”, “Pro” etc.

Modifier classes such as label-default, label-primary, label-success, label-info, label-warning, label-danger are used to determine the look plus the intensity of a label.

15. What are badges in Bootstrap?

Ans. Bootstrap badges are just other labels with rounded edges mostly used as numerical indicators like on top of a mailbox icon to show the number of unread emails.

The bootstrap class “badge” is used to create it along with modifier classes like badge-primary, badge-secondary, badge-danger, badge-warning, etc., to style the badges.

16. What is a jumbotron in Bootstrap?

Ans. The Bootstrap “jumbotron” class provides an attractive way to display important content on a web page in a big shaded box with rounded edges.

To create a jumbotron an <div> element with class jumbotron can be used.

For example:-

<div class=”jumbotron”>

<h2>Online Tutorials</h2>

<p>we provide you the best tutorials on c, c++, python, php, sql, java, .net and many more programming languages.</p>

</div>

17. How can we make an image responsive in Bootstrap?

Ans. There are a number of various kinds of devices that we use to surf the internet nowadays from a Fitbit to an iPad. The images in our websites or web apps must fit into all different screen sizes for better user experience.

Bootstrap provides a class called “img-responsive” which is add to the <img> in order to make the image responsive. This class applies the following three properties to the image — display: block, max-width: 100% and height: auto.

18. What do you mean by normalizing in Bootstrap?

Ans. Normalizing means bringing something into a standard shape. Normalize.css, which is also known as browser/CSS reset, is a most popular styling component that makes all the browsers render all elements more consistently so that your CSS styling doesn’t change as the browser changes.

19. What is lead body copy in Bootstrap?

Ans. Bootstrap provides a range of classes to apply different styles to the content/HTML elements. One such class is “lead”, that makes a paragraph stand-out and emphasize it, in turn, attracting more attention from the user.

Example of use: –

<p class=”lead”>This is an important paragraph</p>

20. What are panels in Bootstrap?

Ans. Bootstrap provides a class called “panel” that adds borders around content with some padding. It can be used to display your shopping cart on an e-commerce site or shares of different companies in a stock market site.

Example of use: –

<div class=”panel panel-default”>

<div class=”panel-body”>Onlinetutorials panel content</div>

</div>

21. How will you create a Bootstrap panel with heading?

Ans. In order to create a panel with heading, “panel-heading” class is added to an HTML element. For example.,

<div class=”panel panel-default”>

<div class=”panel-heading”>Online Tutorials</div>

<div class=”panel-body”>On stop solution for all your IT interview preparation</div>

</div>

22. What is a scrollspy plugin in Bootstrap?

Ans. As the name suggests, the scrollspy feature would spy/detect your scroll position in a webpage and based on that it would update page links in the navigation list about their current position in the site while the content on the viewport will change accordingly.

To create scrollspy, add data-spy= “scroll” to the <body> then to make sure that the navbar is connected with the scrollable area, add data-target with a value of the id or the class name of the navigation bar.

23. What is the work of the affix plugin in Bootstrap?

Ans. Many a time you would want to pin or fix a certain element your website that would go off once scrolled like social media icons, ads, services, etc. The plugin affix.js provides you this feature with its class called “affix” that comes with 2 modifier classes namely affix-top, and affix-bottom.

Firstly, affix-top or affix-bottom class indicates the element’s position; top-most or bottom-most, respectively.

Once the element scrolling goes beyond the offset limit provided by the data-offset attribute, the plugin would replace the affix-top or affix-bottom class with the affix class to trigger the actual pinning.

Finally, a proper CSS with top or bottom property is needed to fix the position of affix element on the page.

24. What is the grid system in Bootstrap?

Ans. In the Bootstrap grid system, a page is considered to be divided into 12 columns which can be clubbed together to make wider columns. These columns will re-arrange automatically according to the device’s screen size. The grid system has four classes to work across multiple devices:

xs for smart phones, sm for tablets, md for bigger tablets and smaller laptops and lg for regular laptops and desktops.

25. What are Grid classes in the Bootstrap?

Ans. Bootstrap 4 onwards the grid system has five classes:

i) col for extra small devices with screen width < 576pixels like portrait phones.

ii) col-sm for small devices with screen width >= 576pixels like landscape smartphones.

iii) col-md for medium devices with screen width >= 768pixels like tablets.

iv) col-lg for large devices with screen width >= 992pixels like compact laptops.

v) col-xl for extra-large devices with screen width >=1200pixels like regular size laptops and desktops.

26. What are global styles that are used in Bootstrap Default Typography?

Ans. Bootstrap 4 onwards the default values/global styles for different typography properties are as follows: –

* font-size = 16pixels

* line-height = 1.5

* font-family = “Helvetica Neue”, Helvetica, Arial, sans-serif.

* <p> – margin-top: 0 and margin-bottom:16pixels

27. What dependencies does Bootstrap require to work properly?

Ans. Below are the 3 main dependency required for Bootstrap to work well:-

i) CSS: – <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css”>

ii) jQuery Library: – <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”></script>

iii) JavaScript: –

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>

28. Explain what the below code will do?

Ans. <div class=”progress”>

<div class=”progress-bar progress-bar-success” style=”width: 55%”>

<span class=”sr-only”>55% completed</span>

</div>

<div class=”progress-bar progress-bar-warning” style=”width: 35%”>

<span class=”sr-only”>35% competed</span>

</div>

<div class=”progress-bar progress-bar-danger” style=”width: 10%”>

<span class=”sr-only”>10% failed</span>

</div>

</div>

Ans. As the parent element “progress” is same, Bootstrap will stack all of them into a single progress bar. As the sum of the progress bar widths is 100%, the progress bar will be full width and fully populated.

29. What are the two codes that are used for code display in Bootstrap?

Ans. <code> and <pre> are required to display snippets of code on a page.

30. What is the difference between Bootstrap and Foundation?

Ans. Ans. Following are the major differences between Bootstrap and Foundation:-

i) CSS Preprocessors: – Bootstrap uses Less & Sass; Foundation uses only Sass.

ii) Grid system: – Bootstrap works on Flexbox grid; Foundation works on the Floated grid.

iii) Design: – Bootstrap is highly customizable into a variety of designs; Foundation is not that appealing.

iv) Inline forms: – Bootstrap can create Inline forms; Foundation doesn’t support Inline forms.

31. What are Glyphicons in Bootstrap?

Ans. Glyphicons are the symbols or icons used to represent a text graphically. Bootstrap includes 250 glyphicons from the Glyphicons Halflings set.

Syntax: –

<span class=”glyphicon glyphicon-name”></span>

here, the word “name” will be replaced by a proper glyphicon name like glyphicon-envelope, glyphicon-cutlery, glyphicon-credit-card, glyphicon-earphone, glyphicon-camera, etc.

32. What is a transition plugin in Bootstrap?

Ans. Transition plugin is used to include some transitioning effects in a component like fading in and fading out of a pop-up/modal. Example of use: –

<div id=”newModal” class=”modal fade” role=”dialog”> …

33. Explain the concept of creating a vertical or basic form in Bootstrap.

Ans. Forms are an essential part of a webpage to take user inputs. It becomes a hectic job to style these forms with CSS. Bootstrap provides three types of form layouts to help us simplify this viz.,

i) Vertical Forms.

ii) Horizontal Forms.

iii) Inline Forms.

Following are the basic rules to be followed while creating an of these three types of forms: –

* Wrap form controls and labels in <div class=”form-group”> for optimal spacing between form components.

** Add “form-control” class to <input>,<textarea> and <select> elements

Creating a form: –

By default, the form would be a vertical form that means the input box will be placed below the label.

Whereas,

# To create an Inline Form, you would need to add class “form-inline” to the <form> element, and

# To create Horizontal Form, add “form-horizontal” to the <form> element and “control-label” to all <label> elements.

34. How to integrate bootstrap with angularjs?

Ans. – To integrate AngularJS with Bootstrap include below dependency to the HTML that already contains Bootstrap dependencies mentioned in Question no. 27.

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

Don’t add the full jQuery library when building the Angular project as jQlite is already included in the package. It is important to understand as including jQuery into your Angular project will make it difficult to fully utilize the dynamism of Angular and its data-binding properties.

35. How to integrate bootstrap with vue js?

Ans. To integrate Vue js with Bootstrap import below dependency to the HTML that already contains Bootstrap dependencies mentioned in Question no. 27.

<script src=”https://unpkg.com/vue@2.5.17/dist/vue.min.js”></script>

It is slightly complex to use Bootstrap with Vue because Bootstrap’s dynamic components have a dependency on jQuery. Meanwhile, there are some good projects to overcome this issue such as Bootstrap-Vue and VueStrap.

36. How to integrate bootstrap with react js?

Ans. To integrate Reactjs with Bootstrap import below dependency to the HTML that already contains Bootstrap dependencies mentioned in Question no. 27.

<script type=”text/js” src=”node_modules/react/dist/react.min.js”></script>

<script type=”text/js” src=”node_modules/react-dom/dist/react-dom.min.js”></script>

Another way to do this is by using a package that has Bootstrap components built with React components. There are several such packages available in the npm repository, react-bootstrap is the popular one.

37. What will the below code do?

<div class=”alert success”>

<strong>Success!</strong>

</div>

Ans. This will simply print “Success!” in bold without displaying the green color background feature of success alert as there is no modifier class called success in Bootstrap. It should be “alert alert-success”.

38. What will be the output?

<div class=”row”>

<div class=”col-sm-8″>large coloumn</div>

<div class=”col-sm-4″>small column</div>

</div>

Ans. This will convert the 12-column grid system of Bootstrap, for a hand-held device like Tablet, into two columns of given widths ie., 8 and 4.

The columns will automatically stack on top of each other when the screen goes below 768 pixels.

39. What will be the result of below code snippet?

<div class=”container”>

<a href=”#” data-toggle=”tooltip” title=”Good Luck!”>Get started with your interview preparations</a>

</div>

<script>

$(document).ready(function(){

$(‘[data-toggle=”tooltip”]’).tooltip();

});

</script>

Ans. It will display the message “Get started with your interview preparations” and a small pop-up box with “Good Luck!” would appear when the user moves the mouse pointer over the message.

40. Explain the output of below code:-

<button type=”button” class=”btn btn-info” data-toggle=”collapse” data-target=”#demo”>See You Again</button>

<div id=”demo” class=”collapse in”>

We frequently update our site with the latest and most popular interview questions. Please visit us again. We hope you do well in your interview. All the best.

</div>

Ans. This will create a button called “See You Again” with the given message visible below it. When you click the button, the message will hide.

By default, the content is hidden but as the modifier class “in” is added with “collapse”, it overrides the default property and switches the visibility on.

admin

admin

Leave a Reply

Your email address will not be published. Required fields are marked *