Bootstrap Interview Questions


Question 1:

What is responsive design?

Responsive design means creating a single website which responds to different screen sizes desktop browsers, small tablet screen size and smaller mobile devices perfectly. Responsive website responds to all size screen devices based on user viewport.

Question 2:

What are the responsive design patterns?

Responsive design patterns provide a consistent look and feel and responsiveness across desktop, tablet and mobile devices

There are following patterns for responsive design. These patterns are originally defined by Luke Wroblewski

  • Column drop pattern
  • Mostly fluid pattern
  • Layout shifter pattern
  • Tiny tweaks
  • Off canvas
Question 3:

Explain Mostly fluid pattern for creating responsive design

In mostly fluid pattern a web page with the multi-column layout structure doesn't change its core layout until the smallest visual breakpoint occurs. The core structure of web page remains same at large, medium and small devices. The structure of page changes at the smallest device and multi-column layout web page's column stacked vertically down.

Mostly fluid pattern

In above diagram web page starts with 3 column structure. Web page structure remains same for large, medium and small devices. The structure changes at smallest screen size and column stacked vertically down.

Question 4:

Explain Column drop pattern.

In column Drop pattern a web page with multi-column layout drops a column after each visual breakpoint occurs or screen size gets smaller. Dropped column start stacking down and web page ends with single column layout and other columns stacked vertically down.

Column Drop pattern

In above diagram web page starts with 3 column structure. As the screen size gets smaller the column starts dropping and results into 2 column structure and finally in 1 column structure.

Question 5:

What is layout shifter pattern to create a responsive design?

In this pattern, different layouts are used for different screen sizes. A multi-column layout at looks different in large screens and different in small devices. Below is the structure of this type of layout. Left navigation shifts to the top as the size of the screen gets smaller.

Layout shifter pattten


Question 6:

What is Tiny Tweaks design pattern?

This pattern is simplest pattern to implement. This pattern consists of single column structure with least functionality. This pattern's structure remains same throughout all devices. This pattern is helpful in creating simple informative websites.

Tiny tweak pattern

Question 7:

What is Bootstrap?

Bootstrap is HTML, CSS and JavaScript framework for developing responsive, mobile first websites. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Features:

  • Open Source and Free
  • Easy to learn and implement
  • Fully responsive
  • Supports Sess and Less preprocessors
  • Single framework for all devices

Watch below video to learn more about bootstrap.

Question 8:

How to get bootstrap?

Bootstrap is open source and freely available for download. Bootstrap may be downloaded using below link

http://getbootstrap.com/getting-started/#download

You can directly use bootstrap from CDN. Include below links directly in your project

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Question 9:

What is included in bootstrap download package?

Bootstrap provide 3 types of packages to download

Compiled package

Bootstrap download package includes following

  • Compiled and minified CSS
  • JavaScript
  • Fonts

Download Compiled bootstrap

Source Code

Source code package includes following

  • Source Less
  • JavaScript
  • Font files
  • Docs

Download Source

Requires a Less compiler.

Sass package

Download Sass Package

 

Question 10:

What are the components of Bootstrap?

Bootstrap provides dozens of components which are helpful to create modern and responsive web pages. Bootstrap components are itself responsive.

Major components  provided by bootstrap are listed below

  • Glyphicons
  • Navigation bar
  • Breadcrumbs
  • Pagination
  • Badges
  • Dropdown
  • Thumbnails
  • Alerts
  • Progress bars
  • List groups
  • Panels
  • Tabs
  • Tooltip
  • Carousel
  • Model popup
Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media