Before you read all the Bootstrap questions and answers, let’s discuss how can you crack the Bootstrap interview.
How to crack Bootstrap interview?
Bootstrap Interview Questions:
Question: What is Bootstrap?
Question: Why use Bootstrap?
Answer: It is very flexible and provides a mobile-friendly interface. It adjusts the content of the page according to the device display, that’s why many developers prefer to choose bootstrap for their front-end. Now every browser has extensive support for Bootstrap and with little knowledge of HTML and CSS, we can design a very interactive web page. It also has well-organized documentation with a bunch of examples so instead of writing code by ourselves, we can copy and paste.
Question: What are the main components of Bootstrap?
Answer: Bootstrap has 4 main components:
Question: What are Fixed and Fluid in bootstrap?
Answer: Fluid and Fixed are the two types of layouts we have in Bootstrap. We use fluid layout when we want our content to cover all the display width with 100% value. The fixed layout provides a standard screen with 940 px.
Question: Explain Jumbotron.
Answer: A jumbotron is a class that is used to create a container, which provides a heroic style to all its tags. It increases the size of headings, texts, and also provides a margin to its content.
Question: Explain Classloader.
Answer: The class loader is related to Java Runtime Environment, in bootstrap it covert the class name to equivalent binary form at the client-side.
Question: What does offset columns do in Bootstrap?
Answer: Offset provides extra features to the columns by pushing columns over they can provide more spacing in the cell.
Question: What are columns Ordering in bootstrap and how can we achieve it.
Answer: Columns ordering is a feature in bootstrap by which we can show the columns in any order we want, apart from how we have written it with the Html tags. To do thins we have two CSS selectors “.col-md.push-*” and .”col-md-pull-*”.
Question: Which class can we use to wrap content?
Answer: There are many tags in bootstrap which can wrap the content for a specific block, the most famous class is the container.
Question: What is pagination and conventionally where we use it?
Answer: Pagination is a collection of list items, in bootstrap, we have pagination which could be a list of either ordered or unordered lists.
Conventionally we use pagination to represent the page number of the web page.
Question: What are the tags we can use to display code on the web page?
Answer: To display a code in a web-page we have two tags:
- <code> ………… </code>
- <pre> ………..</pre>
Question: What is the major difference between <code> and <pre> tags?
- The <code> tag render its content in-inline
- The <pre> tag can show code for multiple lines.
Question: How can we show an animated loading bar?
Answer: Bootstrap uses the html5 <process> tag and use some of its class to show an animated progress bar.
Question: What are the contextual class in bootstrap?
Answer: Contextual classes provide a special meaning to their tags by changing its color. There is 4 contextual class in Bootstrap.
Question: Give some difference between Bootstrap and Foundation:
|Bootstrap has an insane number of User interface components||Foundation has a limited number of UI components.|
|Bootstrap uses px(pixels) as a value unit||Foundation uses REMs as a value unit.|
|Bootstrap is compatible with both mobile and desktop.||Foundation is more about Mobile-devices.|
|Bootstrap uses LESS as its Preprocessor||Foundation uses Sass and Compass as its pre-processor.|
Question: What are breadcrumbs in bootstrap?
Answer: Breadcrumbs are similar to navbars, but they provide a hierarchical structure by separating the parent vs child content.
Question: What are alerts in Bootstrap?
Answer: Alerts are the messages and feedbacks given to the user after an action performed. In bootstrap we have an alert to provides different types of messages by changing their color, for example, if we want to tell the user that the action has been performed successfully, we would provide the success alert.
<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div>
Question: What is collapsing elements in Bootstrap?
The class we use to collapse the content is .collapse.
Question: What are carousel plugins in Bootstrap?
Answer: With carousels, we can create sliders on our web page. It provides interactive sliders and we can move them left or right directions.
To create the sliders in our web page we can use .carousel class and it has many properties such as:
- .carousel (options)
- .carousel (‘pause’)
- .carousel (‘prev’)
- .carousel (‘next’)
- .carousel (‘number’)
- .carousel (‘cycle’)
Question: What are media objects in Bootstrap?
Answer: With bootstrap, we can add, video, audio, and images on our web page and can align those wherever we wish, with the help of media objects. To create a media object we can use .media class and specified our media source.
Question: How can we create Navbars using bootstrap?
Answer: There are many methods of creating a navbar, we can directly create a navbar using <nav> tag along with .navbar class or we can also use the <div> tag along with navbar attribute to create a navbar. In bootstrap, we have different types of navbars and we can also customize them by adding more links and changing the color of the navbar.
<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav>
Question: Which class can we use to create basic vertical forms?
Answer: We can use .form-group class to create a vertical form, and the class should be an attribute of <div> tag. The <div> tag which contain the form-group class should be inside the main <form> tag.
<form> <div class="form-group"> </div> </form>
Question: What is the List group in Bootstrap?
Answer: List-group is a class used along with the list, to display a series of content interactively.
<ul class="list-group"> <li class="list-group-item">A</li> <li class="list-group-item">B</li> <li class="list-group-item">C</li> <li class="list-group-item">D</li> <li class="list-group-item">E</li> </ul>
Question: Why do we use badges in Bootstrap?
Answer: We use badges to label something, which is similar to provide some extra information about that content.
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
Question: How can we add a badge inside a list?
Answer: We can add them along with the list items or <li> tags.
Question: What is well in Bootstrap?
Answer: It is a container similar to the jumbotron, but it converts the content to sunken style.
Question: What are media queries in Bootstrap?
Ans: With media queries, we have more access over the media we are showing on our web page, with media queries we can hide, show and move media content according to the display size.
Question: What is typography?
Answer: In typography apart from the standard content look, we can change the content font and size using the same tags.
<p class="h1">h1. Bootstrap heading</p>
Ques: What are glyph icons in bootstrap?
Answer: Glyphicons are the icons we use for everyday design works, to add a glyphicons we use the .glyphicon class.
<span class = "glyphicon glyphicon-search"></span>
Question: What is Modal Plugin in Bootstrap?
Answer: If we have two different contents to display, one of those is a parent and another is child class there we can use model plugins.
The child content would be treated as a model and layered over the parent window.
Question: What are button groups in Bootstrap?
Answer: With button groups, we can create a list of inline buttons, and provide different links to each one. To create a group of buttons we can use the .btn-group class.
div class="btn-group" role="group" aria-label="Basic example">> <button type="button" class="btn ">1</button> <button type="button" class="btn ">2</button> <button type="button" class="btn ">3</button> <button type="button" class="btn ">4</button> </div>
Question: How can we change the button size with the bootstrap class?
Answer: We can use the .btn-group-lg for large buttons and .btn-groups-sm class for small buttons.
Question: Which class we can use to create pill navigations?
Answer: class = ‘nav-pills’
Question: What are the input groups in Bootstrap?
Answer: Input groups used along with forms to take input from the user, with input groups we can add the functionality of prepending and append text or buttons to the text base inputs.
<div class="input-group flex-nowrap"><div class="input-group-prepend"> <span class="input-group-text" id="addon-wrapping">#</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping"> </div>
Question: How does navbar works?
Answer: Navbars are generally used to set meta component at the top of the application display, so the navigation between the application page could be done quickly.
Bootstrap provides responsive navbars, which means if your application is opened on a big screen such as desktop, then all the component will be shown on the screen. If the page is opened on the mobile device, then all the components will collapse and provide a glyphicon to show all the elements in the horizontal viewport.
Question: Explain labels.
Answer: If we want to provide additional information about any tag or element related content then we can use labels. It is a class represented by
.lable, and can be used for 6 different contextual information.
<span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-info">Info Label</span> <span class="label label-warning">Warning Label</span> <span class="label label-danger">Danger Label</span>
Question: How can we make images more responsive using bootstrap?
Answer: Bootstrap provides a special class called
.img-fluid to render responsive images, which fit on the user display according to the user device.
<img src="..." class="img-fluid" alt="Responsive image">
Question: What is normalize.css in Bootstrap?
Answer: It is a CSS file which is used to solve the problem of browser-specific render problems. However, it comes pre-built with bootstrap, you can also download it separately by using Node Package Manager (npm).
npm commands to use normalize.css.
npm install normalize.css
Question: What do panels do in Bootstraps?
Answer: Panels are the classes used along with the <div> tag to bind all the DOM component in a box. Panels make it easy for DOM objects to retrieve their body elements.
<div class = "panel panel-default"> <div class = "panel-body"> Block of the panel </div> </div>
Question: How can we give heading to a panel?
Answer: Bootstrap provides us with two ways to add a panel heading:
- We can either use
<div class = "panel panel-default"> <div class = "panel-heading"> Panel heading wiht panel-heading class </div> <div class = "panel-body"> Panel body </div> </div> <div class = "panel panel-default"> <div class = "panel-heading"> <h3 class = "panel-title"> Panel title </h3> </div> <div class = "panel-body"> Panel body </div> </div>
Question: What is Scrollspy in Bootstrap?
Answer: It is a plugin which is used to update the navigation list current position as we continue to scroll the body of the web page.
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0"> <h4 id="one">About</h4> <p>About the page........</p> <h4 id="creators">Creators</h4> <p>Creators......</p> <h4 id="summary">Summary</h4> <p>page summary</p> </div>
Question: What is the Affix plugin in Bootstrap?
Answer: Affix plugins are used to fix an HTML element on the display viewport. It often used with navbars, so no matter how the user scroll the pages, the navbar will be fixed at the top of the display.
<div data-spy="affix" data-offset-top="200"> </div> or <nav data-spy="affix" data-offset-top ="190"> navbar body... </nav>
Question: Explain the grid system of Bootstrap.
Answer: Bootstrap use the grid system to place elements on the screen, it divides the complete screen into multiple with 12 columns. Using these grids, you can put 12 different frames in a single row, if you want you can also merge multiple columns of the grid to form a single unit.
div class="row"> <div class="col">Column1</div> <div class="col">Column2</div> <div class="col">Column3</div> <div class="col">Column4</div> <div class="col">Column5</div> <div class="col">Column6</div> <div class="col">Column7</div> <div class="col">Column8</div> <div class="col">Column9</div> <div class="col">Column10</div> <div class="col">Column11</div> <div class="col">Column12</div> </div>
Question: Name all the classes used in the Bootstrap grid system.
Answer: Grid classes are used to make the bootstrap more responsive in various devices.
- xs: This grid class is used for mobile devices with less than 786px wide display.
- sm: This grid class is used for mobile devices like templates with 786px wide display.
- md: This grid class is used for Laptops with 992px wide display.
- lg: This grid class is used for desktop with 1200px wide display.
Question: What is the default font setting for bootstrap 4?
Answer: By default Bootstrap4 use font-size of 16px with line-height of 1.5. The default font-family is “Helvetica Neue” which is a combination of Helvetica, Arial, sans-and serif.
Question: Explain the use of toast class.
Answer: Toast class is similar to the alert box. We can use toast to show a message which will be a pop up on the screen. Toast often used with buttons and submit form icons, to provide a feedback message to the user.
<div class="toast"> <div class="toast-header"> Toast Head </div> <div class="toast-body"> message...... </div> </div>
Question: What do pagers in bootstrap?
Answer: Pagers are the part of the pagination, they are used to provide the next and previous button to pagination indexing.
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
Question: How can we change the form input size?
Answer: Bootstrap comes with two input classes
.input-sm. These two classes can change alter the size of the input text.
<input class="form-control input-lg" type="text"> <input class="form-control input-sm" type="text">
Question: Explain the tooltip of Bootstrap.
Answer: Tooltip is a plugin which work is similar to alt attribute. Tooltip can be used to show additional popup information about the element content if the mouse hovers over the element.
<a href="#" data-toggle="tooltip" title="Extra info about link">Link</a>
Question: What does popover do in bootstrap?
Answer: popover is similar to the tooltip plugin, but here instead of hovering over the element, we need to click the element to see the additional information.
<a href="#" data-toggle="popover" title="head" data-content="Additoinal information">Click</a>
Question: What can a readonly attribute do in form inputs?
Answer: If we put the
readonlyattribute in a form then the user will not be able to fill the form input. Readonly attribute can be used when we do not want to allow the user to fill the input box up to a period.
<input class="form-control" type="text" placeholder="place holder a value" readonly>
All the questions we have provided here can help you to crack the interview, so before you appear in the interview please go through these questions first. It’s not necessary that in the interview you will face the exact same questions we have mentioned here. These questions are designed to give you an underlying idea about what kind of Bootstrap questions you can expect during the interview.
If you like this article or have any suggestion, please let us know by commenting down below.
You may also interested in:
- Best Front End Developer Interview Questions
- CSS Interview Questions
- Web Development Frameworks
- NodeJS Frameworks
- Front End Frameworks
- Angular Interview Questions
- HTML Interview Questions
- Core Java Interview Questions
- PHP Interview Questions
- Python Interview Questions
- Infosys Interview Questions