BOOTSTRAP Interview Questions and Answers

Bootstrap is a free and open source front end Web framework for developing responsive, mobile-first projects on the web. It contains HTML, CSS and Javascript based design templates for typography, forms, buttons etc.It contains powerful plugins built on jQuery..


1) Why use Bootstrap?

  1. Mobile first approach − Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
  2. Browser Support − It is supported by all popular browsers.
  3. Easy to get started − With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.
  4. Responsive design − Bootstrap's responsive CSS adjusts to Desktops,Tablets and Mobiles.


2) What are the key components of Bootstrap?

The key components of Bootstrap are

  1. CSS : It comes with plenty of CSS files
  2. Scaffolding : It provides a basic structure with Grid system , link styles and background
  3. Layout Components : List of layout components
  4. JavaScript Plugins: It contains many jQuery and JavaScript plugins
  5. Customize: To get your own version of framework you can customize your components.


3) What is Bootstrap Grid System?

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.


4) What are Bootstrap media queries?

Media Queries in Bootstrap allow you to move, show and hide content based on viewport size.


5) Show a basic grid structure in Bootstrap.

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>      
   </div>
   <div class = "row">...</div>
</div>
<div class = "container">....


6) How do you make images responsive?

Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.


7) Explain the typography and links in Bootstrap.

Bootstrap sets a basic global display (background), typography, and link styles −

  1. Basic Global display − Sets background-color: #fff; on the <body>element.

  2. Typography − Uses the 
    font-family-base

    font-size-base
    , and 
    line-height-base
     attributes as the typographic base

  3. Link styles − Sets the global link color via attribute 
    link-color
     and apply link underlines only on :hover.


8) What are glyphicons?

Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.


9) What is Bootstrap caraousel?

The Bootstrap carousel is a flexible, responsive way to add a slider to your site. In addition to being responsive, the content is flexible enough to allow images, iframes, videos, or just about any type of content that you might want.


10) What is Bootstrap Jumbotron?

As the name suggest this component can optionally increase the size of headings and add a lot of margin for landing page content. To use the Jumbotron −

  1. Create a container <div> with the class of .jumbotron.
  2. In addition to a larger <h1>, the font-weight is reduced to 200px.