Top 20 Bootstrap interview questions | Bootstrap

Top 20 Bootstrap interview questions | Bootstrap

1. What is Bootstrap?

Bootstrap is a framework for front-end development. It has templates for various designs, buttons, forms, typography, and other interface components based on CSS, JavaScript, and JQuery which come pr- written with Bootstrap. This makes responsiveness for webpage very much easy that is why it is quite favorable for mobile web applications.

2. What are the main features of Bootstrap?

Responsive designs.

Open Source

Compatible with all browsers

Easy and fast because of plugins

3. What do you mean by contextual classes?

Contextual classes are used to provide background colors to some elements such as cells of the table, buttons, and many more.

There are some classes

• • • .active: Applies the hover color
    • .success: Indicates a successful or positive actions
    • .warning: it means that attention is required here
    • .danger: Indicates a danger or potentially negative action

4. State the types of layout available in Bootstrap

• • • Fluid Layout (.container-fluid)
    • Fixed layout (.container)

5. Define fixed and fluid layout

Fluid Layout:  Fluid Layout is useful when you need to make an app that involves the full width of the screen. This layout is necessary for creating an app that is 100 % wider and covers all the screen width.

Fixed Layout: A fixed layout is responsive and easy to use but just like the fluid layout, it cannot adjust itself according to the browser size. It is used by the screen size of 940px which is a standard size. To create a responsive design we can use this layout as well as the fluid layout.

6. What is the grid system in Bootstrap?

The Bootstrap grid system uses a series of containers having rows and columns where the columns in each row can scale up to 12 columns when the size of the device increases. The full responsiveness is observed because it is built with a flexbox. It includes predefined classes to make more different layout in the grid system. It also includes powerful mixins for generating more semantic layouts.

7. Show an example of a basic grid structure.

<div class = "container">

<div class = "row">

<div class = "col-*-*"></div>

<div class = "col-*-*"></div>

<div class = "col-*-*"></div>

</div>


<div class = "row">...</div>

</div>

<div class = "container">....

8. Name the code(s) used for displaying coding in Bootstrap.

• • • <code> Tag
    • <pre> Tag

9. What is the progress bar and what are the contextual classes used in it?

In HTML element using the <progress> keyword we can implement the progress bar. In bootstrap, we put several CSS classes to the html5 <progress> keyword because these classes have special features in bootstrap, specially made for the progress bar.

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

10. How do you make an image responsive in Bootstrap?

Bootstrap allows making images responsive by allowing classes to the <img> tags.  The class of .img-responsive is used for this to implement the features like max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

11. What is the affix plugin?

To make an element to affixed (locked) to an area on the page the Affix plugin is used. Mostly this is used with navigation menus or social icon buttons, to make them "fixed" at a specific area while scrolling up and down the page. A common example of this is a fixed sidebar. They will start in a location, but as the page hits a certain mark, the <div> will be locked in place and will stop scrolling with the rest of the page.

12. What are Glyphicons in Bootstrap?

Glyphicons are icon fonts which you can use in your web projects. At any point in the code, we can add the icons very easily.

13. What is the Button group in Bootstrap and what is the class used for it?

The button group is used to stack all the buttons together in a line.  The .btn-group class is used for this.

14. What is Media object in bootstrap?

This object is used to put media such as images, videos, audio, etc repetitively in a responsive manner. To make this happen only two classes are required—the wrapping .media and the .media-body around the content. 

15. What dependencies are required by the bootstrap to perform properly?

The jQuery is the only dependency required by the bootstrap to work properly. Moreover, this is the only JavaScript plugin in Bootstrap.

16. What do you mean by media queries in Bootstrap?

Media queries are used to deliver or show different styles at different widths or on different devices. The Bootstrap uses media queries known as breakpoints. Media Queries in Bootstrap allow you to move, show, and hide content based on viewport size.

There are several breakpoints used to make it more responsive easily.

Example:

// Extra small devices (portrait phones, less than 576px)

// No media query for `xs` since this is the default in Bootstrap




// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) { ... }




// Medium devices (tablets, 768px and up)

@media (min-width: 768px) { ... }




// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }




// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

17. Give the steps to create a progress bar in Bootstrap.

To create a basic progress bar −

• • • Add a class of .progress inside a div element.
    • Next, add an empty <div> with a class of .progress-bar , inside the above <div>.
    • Add a style attribute with the width expressed as a percentage. Say, for example, style = "50%"; indicates that the progress bar was at 50%.

18. Define the grid classes of Bootstrap.

 There are four grid classes in Bootstrap.

They are:

• • • For phone screens less than 786px wide) -> xs
    • For the tablet screens which are greater than 786px wide -> sm
    • For small laptop screen of size equal to or greater than 992px wide -> md
    • For laptop and desktop screens which are equal to greater than 1200px wide ->lg

19. What is a bootstrap container?

This is a class used in Bootstrap. It created a fixed layout. It gives a responsive layout by having all the elements inside this in the center with an auto margin in the left and right direction.

20. What is Bootstrap navbar and give an example code for it.

One of the prominent features of Bootstrap sites is the navbar. Navbars are responsive 'meta' components that serve as navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes some basic styling for site names and navigation.

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
   <a class="navbar-brand" href="#">Navbar</a>  
   <button class="navbar-toggler" type="button" 
   data-toggle="collapse" data-target="#navbarNav" 
   aria-controls="navbarNav" aria-expanded="false" 
   aria-label="Toggle navigation">    
     <span class="navbar-toggler-icon">
     </span>  
   </button>  
   <div class="collapse navbar-collapse" id="navbarNav">    
     <ul class="navbar-nav">     
      <li class="nav-item active">        
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>      
      <li class="nav-item">        
         <a class="nav-link" href="#">Features</a>      
      </li>      
      <li class="nav-item">        
         <a class="nav-link" href="#">Pricing</a>      
      </li>      
      <li class="nav-item">        
         <a class="nav-link disabled" href="#">Disabled</a>      
      </li>    
     </ul>  
   </div>
</nav>