Bootstrap Descriptive Question for exam and interview

1.What is Twitter Bootstrap? Explain what is Bootstrap?

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier webdevelopment. Ituses HTML, CSS and JavaScript.

2.Why use Bootstrap?/ Explain why to choose Bootstrap for building the websites?

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.

3.What does Bootstrap package includes? /What are the key components of Bootstrap?

·Scaffolding− Bootstrap provides a basic structure with Grid System, link styles, background. This 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− We can customize Bootstrap's components, LESS variables, and jQuery plugins to get your very

own version.

4.What are Contextual classes of table in Bootstrap?

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

5.WhatareBootstrap media queries?

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

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

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

7.Show a basic grid structure in Bootstrap?

Following is basic structure of Bootstrap grid −

</div>

</div>

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

8.How can you order columns in Bootstrap?

Wecan easily change the order of built-in grid columns with col-md-push-* andcol-md-pull-* modifier classes where * range from 1 to 11.

9.How do you make images responsive?

Bootstrap 3 allows us tomake 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.

10.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-baseattributes as the typographic

base

·Link styles− Sets the global link color via attribute @link-colorand apply link underlines only on :hover

11.What is Lead Body?

To add some emphasis to a paragraph, add class = "lead". This will give you larger font size, lighter weight, and a

taller line height

12.Explain types of lists supported by Bootstrap?

1.Ordered lists

2.Unordered lists.

3.Definition lists.

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

14.How do you use Glyphicons?

To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.<span class = "glyphiconglyphicon-search"></span>

15.What is a Modal Plugin?

A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a

separate source that can have some interaction without leaving the parent window. Child windows can provide

information, interaction, or more.

16.What is Bootstrap carousel?

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.

17.What is button group?

Button groups allow multiple buttons to be stacked together on a single line. This is useful when you want to place

items like alignment buttonstogether.

18.Which class is used for basic button group?

.btn-group class is used for a basic button group. Wrap a series of buttons with class .btn in .btn-group.

19.Which class is used to draw a toolbar of buttons?

.btn-toolbar helps to combine sets of <div class = "btn-group"> into a <div class = "btn-toolbar"> for more complex

components.

20.Which classes can be applied to button group instead of resizing each button?

.btn-group-lg,.btn-group-sm, btn-group-xs classes can be applied to button group instead ofresizing each button.

21.Which class make a set of buttons appear vertically stacked rather than horizontally?

.btn-group-vertical class make a set of buttons appear vertically stacked rather than horizontally.

22.How will you create a tabbed navigation menu?

To create a tabbed navigation menu −

·Start with a basic unordered list with the base class of .nav.

·Add class .nav-tabs.

23.How will you create a pills navigation menu?

To create a pills navigation menu −

·Start with a basic unordered list with the base class of .nav.

·Add class .nav-pills.

24.How will you create a vertical pills navigation menu?

You can stack the pills vertically using the class .nav-stacked along with the classes: .nav, .nav-pills.

25.How to create a navbar in bootstrap?

To create a default navbar −

·Add the classes .navbar, .navbar-default to the <nav> tag.

·Add role = "navigation" to the above element, to help with accessibility.

·Add a header class .navbar-header to the <div> element. Include an <a> element with class navbar-brand.

This will give thetext a slightly larger size.

·To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.

26.Which class is used for basic pagination?

.pagination class is uesed to add the pagination on a page.

27.How will you customize linksof pagination?

You can customize links by using .disabled for unclickable links and .active to indicate the current page.

28.What are bootstrap labels?

Bootstrap labels are great for offering counts, tips, or other markup for pages. Use class .label to disp

lay labels.

29.What are bootstrap badges?

Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new or unread items. To use badges just add <span class = "badge"> to links, Bootstrap navs, and more.

30.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 −

·Create a container <div> with the class of .jumbotron.

·In addition to a larger <h1>, the font-weight is reduced to 200px.

31.How to create thumbnails using Bootstrap ?

To create thumbnails using Bootstrap −

·Add an <a> tag with the class of .thumbnail around an image.

·This adds four pixels of padding and a gray border.

·On hover, an animated glow outlines the image.

32.What are bootstrap alerts?

Bootstrap Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.You can add an optional close icon to alert.

33.How will you create a bootstrap alert?

You can add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual

classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

34. How will you create a progress bar using bootstrap?

To create a basic progress bar −

 Add a <div> with a class of .progress.

 Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

 Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

35. What are bootstrap panels?

Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element.

36. How will you create a bootstrap panel with heading?

Here are two ways to add panel heading −

 Use .panel-heading class to easily add a heading container to your panel.

 Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

37. What is Scrollspy plugin?

The Scrollspy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position

About blackcat

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.