Bootstrap



1. What is Bootstrap?  

Bootstrap is a CSS framework which has several predefined CSS classes using which we can design our Website or web application very easily and with a good look and feel. It also provides some JavaScript Components which are very useful, easy to integrate and completes almost all the need of designing and developing a professional looking website or web application.

Bootstrap also provides inbuilt CSS classes to design responsive (for mobiles, tablets) websites. With latest bootstrap it has mobile first approach and with choice we can make it non-responsive.

It has a very good documentation reading which we can easily understand the use and implementation of bootstrap.



2. What is Twitter Bootstrap?  

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.



3. Why use Bootstrap?  

Bootstrap can be used as -

  • Mobile first approach - Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
  • Browser Support - It is supported by all popular browsers.

  • 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.
  • Responsive design - Bootstrap's responsive CSS adjusts to Desktops,Tablets and Mobiles.
  • Provides a clean and uniform solution for building an interface for developers.
  • It contains beautiful and functional built-in components which are easy to customize.
  • It also provides web based customization.
  • And best of all it is an open source.


4. What are the key components of Bootstrap?  

The key components of Bootstrap are

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



5. Who developed the Bootstrap?  

Mark Otto and Jacob Thornton at Twitter



6. What does Bootstrap package includes?  

Bootstrap package includes -

  • Scaffolding - Bootstrap provides a basic structure with Grid System, link styles, background. This is is covered in detail in the section Bootstrap Basic Structure
  • CSS - Bootstrap comes with feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.
  • Components - Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section Layout Components.
  • JavaScript Plugins - Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in details in the section Bootstrap Plugins.
  • Customize - You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.


7. Explain what are class loaders in Bootstrap?  

Class loader is a part of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also does the process of converting a named class into its equivalent binary form.



8. What are the types of layout available in Bootstrap?  

In Bootstrap there are two types of Layout available

* Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen
* Fixed Layout: For a standard screen you will use fixed layout (940 px) option



9. What is Contextual classes of table in Bootstrap?  

The Contextual classes allow you to change the background color of your table rows or individual cells.

Class Description
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action


10. 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.



11. Show a basic grid structure in Bootstrap?  

Following is basic structure of Bootstrap grid -

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


12. What are Offset columns?  

Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more spacing, for example. The .col-xs = * classes don't support offsets, but they are easily replicated by using an empty cell.



13. What is column ordering in Bootstrap?  

Column ordering is one of the feature available in bootstrap and you can easily write columns in an order and show them in another one. With .col-md-push-* and
.col-md-pull-*

the order of the column can be easily changed.



14. 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.



15. Explain the typography and links in Bootstrap?  

Bootstrap sets a basic global display (background), typography, and link styles -
  • Basic Global display - Sets background-color: #fff; on the <body> element.
  • Typography − Uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base
  • Link styles − Sets the global link color via attribute @link-color and apply link underlines only on :hover.


16. Explain what pagination in bootstrap is and how they are classified?  

Pagination is the handling of an unordered list by bootstrap. To handle pagination bootstrap provides following classes

  • .pagination: To get pagination on your page you have to add this class
  • .disabled, .active: Customize links by .disabled for unclickable links and .active to indicate the current page
  • .pagination-Ig, .pagination-sm: Use these classes to get different size item


17. What is the use of Jumbotron in Bootstrap?  

In bootstrap, Jumbotron is generally used for content that you want to highlight like some slogan or marketing headline etc. in other words it is used to enlarge the size of the headings and to add a margin for landing page content

To use the Jumbotron in Bootstrap-
* Create a container <div> with the class of .jumbotron



18. What is Normalize in Bootstrap?  

Bootstrap uses Normalize to establish cross browser consistency.
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.



19. Explain types of lists supported by Bootstrap?  

Bootstrap supports ordered lists, unordered lists, and definition lists.

  • Ordered lists - An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.
  • Unordered lists - An unordered list is a list that doesn't have any particular order and is traditionally styled with bullets. If you do not want the bullets to appear then you can remove the styling by using the class .list-unstyled. You can also place all list items on a single line using the class .list-inline.
  • Definition lists - In this type of list, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for definition term, and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, the <dd> is the definition of the <dt>.

    You can make terms and descriptions in <dl> line up side-by-side using class dl-horizontal.


20. What is the difference between Bootstrap and Foundation?  

Bootstrap Foundation
- Bootstrap offers unlimited number of UI elements - In Foundation UI element options are very limited in numbers
- Bootstraps uses pixels - Foundation use REMs
- Bootstrap encourages to design for both desktop and mobile. - Foundation encourages to design mobile first
- Bootstrap support LESS as its preprocessor - Foundation support Sass and Compass as its preprocessor


Java Interview Question

.Net Interview Question

PHP Interview Question

AngularJS Interview Questions