Top 50 Bootstrap Interview Question and Answers

  • Nikita Bhakre

Top 50 Bootstrap Interview Questions and Answers

Bootstrap Interview Question and Answer
Bootstrap Interview Question and Answer

Q1)What is Bootstrap?

Bootstrap is the most popular front-end, CSS framework used for creating responsive and mobile-first web applications. The responsiveness of the framework makes it easy and fast to use. With the help of bootstrap, now mobile applications can have UI designs like Dropdown, Forms, Buttons, Tab, Alerts, etc.

Bootstrap 5 is the latest version of bootstrap.

Q2)What are the features of  Bootstrap?

  1. Responsive design
  2. Customizable
  3. Easy and fast to use.
  4. Various Components (for ex.- Drop-down, Buttons, Alerts, Badges, Progress Bar)
  5. Grid and Flexbox system
  6. Advanced card components
  7. Compatibility with all browsers.

Q3)Why use Bootstrap?

  1. Very easy to use.
  2. Facilitates users to develop a responsive website.
  3. Offers a lot of helper classes that will be useful for the development of responsive websites easier and faster.

Q4)What do you understand by Containers?

Bootstrap containers are used to wrap some content inside them to make them responsive and fast. The container will also create boxed content.

In bootstrap there are two types of container classes available:

  • Fixed Container:- The fixed container class provides a container of fixed width. By using the .container class a fixed-width container can be formed.
  • Fluid Container:- The fluid container class provides a container of full width. By using the .container-fluid class a full width container(over an entire width (100%)) can be formed.

Q5)What do you mean by Bootstrap Grid System?

  • The bootstrap grid system is used for responsive layouts. The grid is nothing but a grouping of columns and rows.
  • Bootstrap allows 12 columns for a row.

Q6)Give an example of a basic grid structure in bootstrap.

The following example will create a basic grid structure on our website.

<div class =“container”>
    <div class =“row”>
       <div class =“col-*-*”></div>
       <div class =“col-*-*”></div>
    </div>
<div class =“row”>
   <div class =“col-*-*”></div>
   <div class =“col-*-*”></div>
< div>
</div>

Q7)What is the div class?

  • The < div > element is used to define a division or a section in a page.
  • The div tag can be easily styled with the help of CSS by using the class or id attributes.

Q8)What are the various contextual classes available in bootstrap?

With the help of contextual classes, we can change the color of table rows.

Bootstrap has the following various contextual classes:

.active – This applies the hover effect.

.success – This indicates a successful action.

.info – This indicates an informative action.

.warning – This indicates a warning which might require attention.

.danger – This indicates a dangerous action.

Q9)What are the different button styles in bootstrap?

In bootstrap we can have a button in following different styles:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Q10)What is pagination in bootstrap?

Bootstrap pagination is used to define a list of pages present on a website. The .pagination class with the < ul > element will be used to create such a list.

Q11)What is the use of Jumbotron in Bootstrap?

  • A jumbotron is used to create a big grey colored highlighted box having rounded corners.
  • A jumbotron box highlights some special content or information.
  • The .jumbotron class will be used. Jumbotron can be of full width (across the page) by using the .jumbotron-fluid

Q12)What are the two ways to display the code in bootstrap?

There are two ways to display code in bootstrap:

  • By using the < code > tag we can display the code inline.
  • By using the < pre > tag, the code can be displayed as a block.

Note: The < pre > tag is used when we have multiple lines of code.

Q13)How to make an image responsive?

Bootstrap allows to make an image responsive by using a class .img-responsive with the < img > tag. The .img-responsive class will scale the image to its max-width to 100% and height to auto.

Q14)What is a thumbnail image in bootstrap?

The thumbnail gives an image a look of a bordered image. The .img-thumbnail class is used to create such bordered image.

Q15)What are glyphicons?

Glyphicons are the icon fonts that can be very useful to make your website more attractive by using such icons. Glyphicon can be used with the span class to create an icon.

< span class = “glyphicon glyphicon-search” >…</ span >

Q16)What are bootstrap alerts?

Alerts are used to create alert messages. Alerts can be created by using .alert class. Bootstrap allows to style such alert messages by using the contextual classes. And these contextual classes are .alert-success, .alert-primary, .alert-secondary, .alert-info, .alert-warning, .alert-danger, .alert-light, .alert-dark.

Q17)How to create closing alerts?

To create closing alerts the .alert-dismissible class will be used. And to close alerts we have to add class=” close” and data-dismiss=” alert” to a button or a link.

Q18)What is Bootstrap well?

Bootstrap well is a container having a rounded border around it and a grey background color with some padding.

The basic well can be created by using the .well class.

Q19)What is the button group in Bootstrap?

Button group allows creating multiple buttons together on a single line.

The .btn-group class is used to create a button group with the .btn class.

The sizing of button can be changed with the help of .btn-group-sm, .btn-group-lg, .btn-group-xs classes.

Q20)How to create a set of buttons vertically?

The .btn-group-vertical class will be used to create vertically stacked buttons.

Q21)What are input groups?

By using input groups the additional inputs like text or buttons can be appended to input fields.

The additional inputs can be append or prepend with the help of the .form-control class.

Then we have to use .input-group class with a < div > element.

To add some addons the .input-group-addon class will be used.

Q22)How to create a tabbed navigation menu in bootstrap?

To create a tabbed navigation menu we have to use .nav-tabs class with the base class .nav

Q23)How will you create the navigation pills menu & how can you align it vertically?

The .nav-pills class will be used for creating a navigation pills menu with the base class .nav

To create a navigation pills menu vertically stacked we have to use the .nav-stacked class.

Q24)What is a navbar & how to create a basic navbar in bootstrap?

Navbars are nothing but the navigation headers used in an application or website.

In bootstrap, to create navbar we have to add the following classes:

.navbar class with the < nav > tag.

role=”navigation” again with the < nav > tag.

To add headers the .navbar-header class with the < div > element will be used. And to add a brand name in the navigation menu we have to use .navbar-brand with an < a > element.

And to add links to the navbar, the .navbar-nav class can be used with < ul > element. Then the .nav-item and .nav-link classes have to be added with an < li > element.

Q25)What are bootstrap labels?

Bootstrap labels are used to provide some additional information.

To create such labels the .label class is used. With the help of various contextual classes, labels can be created in different styles.

Q26)What are bootstrap badges?

Badges are used to indicate a numerical value. Mostly badges are used for showing notifications in the mail, messages, etc. The .badge class is used to create a badge within < span > element.

Q27)How do you create a dropdown menu in bootstrap?

A Dropdown menu can be created by using the following classes.

The .dropdown class is used to indicate a dropdown menu.

The .dropdown-toggle class and the attribute data-toggle=” dropdown” are used to open the dropdown menu.

And to actually create the dropdown menu the .dropdown-menu class with the < div > element will be used. And to add some items to dropdown the .dropdown-item class will be used.

Q28)What is a progress bar in bootstrap & which class is used to create a progress bar?

A progress bar is used to show the progress of a process. And the .progress class to the container element and the .progress-bar class to the child elements are used to create a basic progress bar.

Q29)Which class is used to create a striped progress bar?

The .progress-bar-striped class is used to create a striped progress bar.

Q30)What are the different contextual classes are available to style the progress bar?

Following classes are used to create a progress bar of different styles:

  • Progress-success
  • Progress-info
  • Progress-warning
  • Progress-danger

Q31)How will you create a panel with the heading in bootstrap?

 Panel headings can be created by using two ways.

  1. We can use the .panel-heading class directly.
  2. We can use the heading tags for example < h1 > to < h6 > and then .panel-title class to give more styling to the heading.

Q32)Explain what will be the output of the below code?

< a href=”#” >Messages< span class=”badge” >10</ span></ a >

The output will be the link of Messages with an inline badge of value 10 to indicate the notification to the user.

Q33)What is a bootstrap carousel?

The carousel plugin is used for adding slideshow in a website for multiple elements.

Q34)How to create a carousel?

To create a carousel we have to add the following classes.

.carousel class is used to create a carousel.

.carousel-indicators class is used to add the indicators. Indicators are used to indicate the number of slides present in the carousel.

.carousel-inner class is used to add slides to the carousel.

.carousel-item is used to specifying the content of each slide.

.carousel-control-prev and .carousel-control-next these classes are used to add previous and next buttons to the carousel. And the .carousel-control-prev-icon and .carousel-control-next-icon these classes are used to add icons for the previous and next buttons to the carousel.

.slide class is optional, if someone wants to add some CSS animations or style this class will be used. 

Q35)How will you create a basic collapsible element?

To create a collapsible element following classes will be used.

  • The .collapse class will indicate a collapsible element.
  • To control such collapsible element we have to use the data-toggle=” collapse”
  • The data-target=”#id” attribute is used to connect a button or link with collapsible content.

Q36)What is a Bootstrap card?

The bootstrap card is a flexible content container with various styles and options. In the card, we can add headers and footers, content with various contextual background colors.

The .card class is used to create a basic card and to add some content to it the .card-body will be used.

Q37)What is a modal plugin used for in Bootstrap?

The Modal plugin is used to popup or displays some important information to the user. It is a popup or dialog box which will be displayed on top of the page.

Q38)How do you create a basic Modal component?

The following example will show how to create the modal component.

<div class="container mt-3" style="font-size: large; font-weight: bold; background-color: rgb(212, 192, 165);">
        <h2>Modal</h2>
        <!-- Button to Open the Modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            Open modal
        </button>

        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        Modal body..
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>

    </div>

Q39) Explain what media object in Bootstrap is and what are their types?

In Bootstrap media objects like images or videos can be aligned together with content.

The .media class is used to create media objects and to add a body inside it the .media-body class is used.

They are of two types:

  • .media
  • .media-list

Q40)What is the use of flexbox container in Bootstrap?

The flexbox container provides flex classes to control the layout of Bootstrap components. It creates a flexible responsive layout structure without using float or positioning elements.

The d-flex class is used to create a flexbox container.

Q41)What are the various flex classes available to create responsive components in bootstrap?

.d-*-flex – used to create flexbox container for different screens according to their sizes.

.d-*-inline-flex – used to create an inline flexbox container.

.flex-*-row – used to display flex items in a single row (horizontally)

.flex-*-row-reverse – used to display flex items horizontally in a reverse direction (right-aligned)

.flex-*-column – used to display flex items in a column (vertically)

.flex-*-column-reverse – used to display flex items vertically in a reverse direction

 

Q42)What do you mean by scrollspy in Bootstrap & which classes will be used to create scrollspy?

Scrollspy is used to update links in a navigation menu automatically according to scroll position.

The following classes are used to automatically update navigation links on scroll position.

data-spy=”scroll” with the < body > tag.

The data-target attribute with the navigation bar ( .navbar) to ensure that the navbar is connected with the scrollable area.

And the id of the links of the navigation menu should match with the scrollable elements.

Table of Contents