Bootstrap

containing the class of .well.

13) Explain what media object in Bootstrap is and what are their types?

Ans) Media objects in Bootstrap enables to put media object like image, video or audio to the left or right of the content blocks. Media element can be created using the class .media and the source is specified in using the class .media-object. Media-objects are of two types, They are of two types

.media

.media-list

14) In Bootstrap what are the two ways you can display the code?

Ans) In bootstrap you can display code in two ways

tag : If you are going to display code inline, you should use "code" tag

"pre" tag: If you want to display the code as a standalone block element or it has multiple lines then you should use "pre" tag

15) Explain what is list group in Bootstrap and what is the use of it?

Ans) List groups are components to display both simple and complex element with custom content

For example, a simple list group is created using class .list-group to address the list, and class .list-group-item to address individual item.

16) Explain what is Bootstrap collapsing elements?

Ans) Bootstrap collapsing elements enables you to collapse any particular element without writing any JavaScript code or the accordion markup. In Bootstrap to apply collapsing elements you have to add data-toggle= “collapse” to the controller element along with a data-target or href to automatically assign control of a collapsible element. Likewise, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’)

17) Explain what is Bootstrap Container?

Ans) Bootstrap container is a class which is useful and creates a centred area within the page where our site content can be put within. The advantage of the bootstrap . container is that it is responsive and will place all our other HTML code.

18) Explain what is Modal plugin used for in Bootstrap?

A modal is a child window that is layered over its parent window. Using a custom Jquery Plugin, Bootstrap Modal are created. To enrich user experience and to add functionality to users, modal windows are created with the help of Modal plugin.

19) Explain what are the steps for creating basic or vertical forms?

Ans) The steps for creating basic or vertical forms are

Add a role form to the parent "form" element

Wrap labels and controls in a "div" with class .form-group. To achieve optimum spacing this is needed

Add a class of .form-control to all texturl "input" , "textarea" , and "select" elements

20) What is the use of Jumbotron in Bootstrap?

Ans) 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

21) Explain what pagination in bootstrap is and how they are classified?

Ans) 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

22) What function you can use to wrap a page content?

Ans) To wrap a page content you can use .container and using that you can also center the content.

23) Why use Bootstrap?

Ans) 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.

Popular Browser

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.

24) What does Bootstrap package includes?

Ans)

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.

25) What is Contextual classes of table in Bootstrap?

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

.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

26) Show a basic grid structure in Bootstrap.

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

27) How can you order columns in Bootstrap?

Ans) You can easily change the order of built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes where * range from 1 to 11.

28) How do you make images responsive?

Ans) 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.

29) Explain the typography and links in Bootstrap.

Ans) 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.

30) What is Normalize in Bootstrap?

Ans) 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.

31) What is Lead Body Copy?

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

32) Explain types of lists supported by Bootstrap?

Ans) 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.

33) What is a transition plugin?

Ans) The transition plugin provides simple transition effects such as Sliding or fading in modals.

34) What are glyphicons?

Ans) 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.

35) How do you use Glyphicons?

Ans) 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 = "glyphicon glyphicon-search"></span>

36) What is a Modal Plugin?

Ans) 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.

37) How do you use the Dropdown plugin?

Ans) You can toggle the dropdown plugin's hidden content −

Via data attributes − Add data-toggle = "dropdown" to a link or button to toggle a dropdown as shown below −

<div class = "dropdown"> <a data-toggle = "dropdown" href = "#">Dropdown trigger</a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... </ul> </div> If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href="#" <div class = "dropdown"> <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> Dropdown <span class = "caret"></span> </a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... </ul> </div> Via JavaScript − To call the dropdown toggle via JavaScript, use the following method − $('.dropdown-toggle').dropdown()

38) What is button group?

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

39) Which class is used for basic button group?

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

40) Which class is used to draw a toolbar of buttons?

Ans) .btn-toolbar helps to combine sets of

<div class = "btn-group"> into a <div class = "btn-toolbar"> for more complex components.

41) Which classes can be applied to button group instead of resizing each button?

Ans) .btn-group-lg, .btn-group-sm, .btn-group-xs classes can be applied to button group instead of resizing each button.

42)Which class make a set of buttons appear vertically stacked rather than horizontally?

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

43) What are input groups?

Ans) Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs.

By adding prepended and appended content to an input field, you can add common elements to the user's input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface.

To prepend or append elements to a .form-control −

1. Wrap it in a <div> with class .input-group 2. As a next step, within that same <div> , place your extra content inside a <span> with class .input-group-addon. 3. Now place this <span> either before or after the <input> element.

43) How will you create a tabbed navigation menu?

Ans) To create a tabbed navigation menu −

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

Add class .nav-tabs.

44)How will you create a pills navigation menu?

Ans) To create a pills navigation menu −

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

Add class .nav-pills.

45)How will you create a vertical pills navigation menu?

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

46)What is bootstrap navbar?

Ans) The navbar is one of the prominent features of Bootstrap sites. 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 styling for site names and basic navigation.

47)How to create a navbar in bootstrap?

Ans) To create a default navbar −

1. Add the classes .navbar, .navbar-default to the <nav> tag. 2. Add role = "navigation" to the above element, to help with accessibility. 3. Add a header class .navbar-header to the <div> element. Include an <a> element with class navbar-brand. This will give the text a slightly larger size. 4. To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.

48) What is bootstrap breadcrumb?

Ans) Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's location within a navigational hierarchy.

A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. The separator is automatically added by CSS (bootstrap.min.css).

49 )How will you customize links of pagination?

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

50) What are bootstrap badges?

Ans) 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.

51) What is Bootstrap page header?

Ans) The page header is a nice little feature to add appropriate spacing around the headings on a page. This is particularly helpful on a web page where you may have several post titles and need a way to add distinction to each of them. To use a page header, wrap your heading in a <div> with a class of .page-header.

52)How to create thumbnails using Bootstrap?

Ans) To create thumbnails using Bootstrap −

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

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

3. On hover, an animated glow outlines the image.

53)How to customize thumbnails using Bootstrap?

Ans)it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Follow the steps below −

1. Change the <a> tag that has a class of .thumbnail to a <div>. 2. Inside of that <div>, you can add anything you need. As this is a <div>, we can use the default span-based naming convention for sizing. 3. If you want to group multiple images, place them in an unordered list, and each list item will be floated to the left.

54 )How to customize thumbnails using Bootstrap?

Ans) As I mentioned above, it's good to email people you personally know. However, some email lists might include people from bought lists or lead gen services (which you should generally avoid). We don't recommend buying lists because there are laws in place to protect people from receiving certain types of unsolicited communications.

55) What are bootstrap alerts?

Ans) 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.

56)How will you create a bootstrap alert?

Ans) 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).

57)How will you create a Bootstrap Dismissal Alert?

Ans) To build a dismissal alert −

1. 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). 2. Also add optional .alert-dismissable to the above <div> class. 3. Add a close button. 4. Use the <button> element with the data-dismiss = "alert" data attribute.

58) How will you create a progress bar using bootstrap?

Ans) To create a basic progress bar −

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

59) How will you create a alternate progress bar using bootstrap??

Ans)To create a progress bar with different styles −

1. Add a <div> with a class of .progress. 2. Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger. 3. Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

60)How will you create a striped progress bar using bootstrap?

Ans)To create a striped progress bar −

1. Add a <div> with a class of .progress and .progress-striped. 2. Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger. 3. Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

61)How will you create a animated progress bar using bootstrap?

Ans)To create an animated progress bar −

1. Add a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped. 2. Next, inside the above <div>, add an empty <div> with a class of .progress-bar. 3. Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

62) How will you create a stacked progress bar using bootstrap?

Ans)You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them.

63) What are bootstrap media objects?

Ans) These are abstract object styles for building various types of components (like blog comments, Tweets, etc.) that feature a left-aligned or right-aligned image alongside the textual content. The goal of the media object is to make the code for developing these blocks of information drastically shorter.

The goal of media objects (light markup, easy extendability) is achieved by applying classes to some of the simple markup.

64) What is the purpose of .media class in bootstrap?

Ans) This class allows to float a media object (images, video, and audio) to the left or right of a content block.

65) What is the purpose of .media-list class in bootstrap?

Ans)If you are preparing a list where the items will be part of an unordered list, use a class. useful for comment threads or articles lists.

66)How will you create a bootstrap panel with heading?

Ans)here are two ways to add panel heading −

1.Use .panel-heading class to easily add a heading container to your panel. 2.Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

67) How will you create a bootstrap panel with footer?

Ans)You can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.

68) What contextual classes are available to style the panels?

Ans)Use contextual state classes such as, panel-primary, panel-success, panel-info, panel-warning, panel-danger, to make a panel more meaningful to a particular context.

69) What are bootstrap panels?

Ans)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.

70) Can you put a table within bootstrap panel?

Ans) Yes! To get a non-bordered table within a panel, use the class .table within the panel. Suppose there is a <div> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, then the component moves from panel header to table without interruption.

71) Can you put a listgroup within bootstrap panel?

Ans)Yes! You can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also add class .panel-default to this element. Now within this panel include your list groups.

72) What is Scrollspy plugin?

Ans) 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.

73) What is affix plugin?

Ans)The affix plugin allows a <div> to become affixed to a location on the page. You can also toggle it's pinning on and off using this plugin. A common example of this are social icons. 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.

74) What is Twitter Bootstrap?

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

75) Define UI Bootstrap?

Ans)UI Bootstrap incorporates Bootstrap components written in AngularJS by the AngularUI team. It aims to provide AngularJS directives with the markup and CSS of Bootstrap. It has dependencies on AngularJS and Bootstrap CSS.

76)Define Kickstrap?

Ans)Kickstrap is a product where AngularJS is baked together with Bootstrap in conjunction with JavaScript Package Manager (JSPM). You can leverage the advantage of running an authenticated database-driven web application without the native backend. Kickstrap uses Firebase adhering to a Backend as a Service (BaaS) model.

77) What is Responsive Layout??

Ans)Responsive layout's design automatic adjusts to the browser size but when resizing, the number of columns changes according to the space available.

78) Differentiate Between Fluid Layout & Responsive Layout?

Ans) The main difference is that Fluid Layout are built using widths percentages and they are based on proportionally laying out the website so elements take up the same percent of space on different screen sizes. Responsive Layout is built on a fluid grid and here CSS Media Queries are used to present different layouts based on different screen sizes.

79) What Do You Understand By A List Group In Bootstrap And Its Use?

Ans)List group is a powerful and flexible component to display simple and complex elements together with custom contents. A simple list group is created using class .list-group to address the list with usage of <ul> element, and class .list-group-item to address individual item with usage of <li> elements.

80) What Is Normalize In Bootstrap?

Ans)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.

81) What Is Lead Body Copy?

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

82) What Is A Transition Plugin?

Ans)The transition plugin provides simple transition effects such as Sliding or fading in modals.

83) How Do You Make Images Responsive?

Ans)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.

84) What Contextual Classes Are Available To Style The Panels?

Ans)Use contextual state classes such as, panel-primary, panel-success, panel-info, panel-warning, panel-danger, to make a panel more meaningful to a particular context.

85) How Will You Customize Links Of Pagination?

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

86)Features of Bootstrap?

Ans) Easy to use

Bootstrap is very easy to use. Anyone with the basic knowledge of HTML and CSS can start development with Bootstrap.

Open Source

Bootstrap is completely free to download and use.

Browser compatibility

Bootstrap is compatible with all modern browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and Opera.

Responsive features

By using Bootstrap we can easily create responsive designs for web pages. Bootstrap's responsive CSS makes our web pages appear more appropriately on different devices as it adjusts to phones, tablets, and desktops.

87)How many different media queries are used by the Bootstrap grid system by default?

Ans) The Bootstrap grid system provides four tiers of classes: xs for phones (<768px), sm for tablets (≥768px), md for desktops (≥992px), and lg for large desktops (≥1200px). The hidden trick in this question is that there are only three media queries. Bootstrap is mobile first by design, so the default styles are for small devices, and media queries are then added on for larger screens, as follow in LESS code: /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

88) What dependencies does Bootstrap require for it to work properly?

Ans)The only dependency that Bootsrap requires to work properly is jQuery, and this is only for Bootstrap’s JavaScript plugins. At the moment, Bootsrap v3.3.4 requires jQuery v1.9.1 or later.

89) What global styles are applied as a part of Bootstrap’s default typography?

Ans) Bootstrap sets the global default font-size to 14px, with a line-height of 1.428. The default font is changed to Helvetica and Arial with sans serif fallback. All these styles are applied to the <body> and all paragraphs, with the addition that <p> (paragraphs) receive a bottom margin of half their computed line-height, which is 10px by default.

90).How Can You Enhance The Crawling Frequency By Search Engines For Your Website?

Ans)Including new, original, unique and quality content on our website more frequently enables search engines to crawl more frequently.

91) Can you put a table within bootstrap panel?

Ans) Yes! To get a non-bordered table within a panel, use the class .table within the panel. Suppose there is a <div> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, then the component moves from panel header to table without interruption.

92) What are input groups?

Ans) Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs.

93) Who developed the Bootstrap?

Ans) Mark Otto and Jacob Thornton at Twitter

94) Explain what are class loaders in Bootstrap?

Ans) 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.

95) it is possible to disable zooming on mobile device while using bootstrap?

Ans) Yes,Zoom will be disabled only if initial-scale=1, maximum-scale=1 is in meta tag with name=”viewport”

96) In Which language Bootstrap is written ?

Ans) It is written in HTML, CSS, LESS, Sass and JavaScript.

97) What If There Are More Than 12 Column Being Used In The Bootstrap Grid System? Does It Still Work?

Ans) Yes it does work and restructures the columns accordingly. each group of extra columns acts as one unit, wrap onto a new line

98) What Is The Default Gutter Width Provided In The Bootstrap 3 Grid System ?

Ans) 30px is the standard size given to all Grid layouts in Bootstrap by default (15px on each side of a column).

99) Explain The Use Of Icons In Bootstrap Framework?

Ans)There are around 250 glyphs available free of cost with Bootstrap from Glyphicon Halflings fonts set. You can select the best one from the given set of icons easily.

100) Explain The Use Of Media Queries In The Bootstrap Framework?

Ans) There are three main breakpoints that are used in Bootstrap for making it compatible to all platforms.

Small Devices (Mobiles, Smartphone, Tablets,) at 768px

Medium Devices (PC, Desktop, Laptops) at 992px and up

Large Devices (Large Screen desktops, Laptops) with 1200px and up

Max-width and Min-width are used in CSS media queries for affecting the specific device set.