Mindmajix

Bootstrap Interview Questions

Bootstrap Interview Questions

Q. Explain what is Bootstrap?

Bootstrap is Javascript framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.


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


Q. Explain why to choose Bootstrap for building the websites?

There are few reason why we choose Bootstrap for building websites

  • Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers.
  • Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML
  • Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.

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

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


Q. What are Bootstrap media queries?

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


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

Q. Explain what is Bootstrap Grid System?

For creating page layout through a series of rows and columns that house your content Bootstrap Grid Sytem is used.


Q. What are offset columns in Bootstrap?

For more specialized layouts offsets are a useful feature. For more spacing they can be used by pushing column over.

For example, .col-xs=* classes do not support offset but they are easily replicated using an empty cell


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


Q. How can you order columns in Bootstrap?

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.


Q. What function you can use to wrap a page content?

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


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

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


Q. 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>
  • 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.

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


Q. What is Lead Body Copy

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


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


Q. 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 = “glyphicon glyphicon-search”></span>


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

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

Q. In Bootstrap what are the two ways you can display the code?

In bootstrap you can display code in two ways

  • <code> 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

Q. Explain what are the steps for creating basic or vertical forms?

The steps for creating basic or vertical forms are

  • Add a roleform 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

Q. What is a transition plugin?

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


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


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


Q. 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 buttons together.


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


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


Q. 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 of resizing each button.


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


Q. Explain what is Bootstrap Container?

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.


Q. Explain what is Bootstrap collapsing elements?

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


Q. Explain what is list group in Bootstrap and what is the use of it?

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.


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

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

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

Q. How you can add badge to list group in Bootstrap?

To add badge to list group in Bootstrap you have to simply add <span class = “badge”> within the <li> element.


Q. Explain what media object in Bootstrap is and what are their types?

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

Q. Explain what is Bootstrap well?

Bootstrap well is a container <div> that makes the content to appear sunken or an inset effect on the page. In order to create a well, wrap the content that you would like to appear in the well with a <div> containing the class of .well.


Q. What is bootstrap navbar

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.


Q. Explain how you can create Nav elements in Bootstrap?

Bootstrap offers various options for styling navigation elements all of them use the same markup and base class .nav.

To create Tabular Navigation or Tabs

  • Start with a basic unordered list with the base class of.nav
  • Then add class.nav-tabs

Q. What is bootstrap breadcrumb

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

Q. Which class is used for basic pagination

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


Q. How will you customize links of pagination

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


Q. Explain what is the use of Bootstrap Carousel plugin?

The Carousel plugin is used to add a slider to your site. It is useful in condition where you want to display huge amount of contents within a small space on the web pages. Some of the standard carousel includes

  • .carousel (options)
  • .carousel (‘cycle’)
  • .carousel (‘pause’)
  • .carousel (‘number’)
  • .carousel (‘prev’)
  • .carousel (‘next’)

Q. What are bootstrap labels

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


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


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

Q. What is Bootstrap page header

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.


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

Q. How to customize thumbnails using Bootstrap

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

  • Change the <a> tag that has a class of .thumbnail to a <div>.
  • 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.
  • If you want to group multiple images, place them in an unordered list, and each list item will be floated to the left.

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


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


Q. How will you create a Bootstrap Dismissal Alert?

To build a dismissal alert −

  • 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).
  • Also add optional .alert-dismissable to the above <div> class.
  • Add a close button.
  • Use the <button> element with the data-dismiss = “alert” data attribute.

Q. 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%.

Q. How will you create a alternate progress bar using bootstrap?

To create a progress bar with different styles −

  • Add a <div> with a class of .progress.
  • 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.
  • Add a style attribute with the width expressed as a percentage. Say for example, style = “60%”; indicates that the progress bar was at 60%.

Q. How will you create a striped progress bar using bootstrap

To create a striped progress bar −

  • Add a <div> with a class of .progress and .progress-striped.
  • 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.
  • Add a style attribute with the width expressed as a percentage. Say for example, style = “60%”; indicates that the progress bar was at 60%.

Q. How will you create a animated progress bar using bootstrap?

To create an animated progress bar −

  • Add a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped.
  • 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%.

Q. How will you create a stacked progress bar using bootstrap

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


Q. What are bootstrap media objects

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.


Q. What is the purpose of .mecia class in bootstrap?

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


Q. What is the purpose of .media-list class in bootstrap

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.


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


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

Q. How will you create a bootstrap panel with footer

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


Q. What contextual classes are available to style the panels

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.


Q. Can you put a table within bootstrap panel

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.


Q. Can you put a listgroup within bootstrap panel

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.


Q. What is bootstrap well

A well is a container in <div> that causes the content to appear sunken or an inset effect on the page. To create a well, simply wrap the content that you would like to appear in the well with a <div> containing the class of .well.


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


Q. What is affix plugin

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.


0 Responses on Bootstrap Interview Questions"

Leave a Message

Your email address will not be published. Required fields are marked *

Copy Rights Reserved © Mindmajix.com All rights reserved. Disclaimer.
Course Adviser

Fill your details, course adviser will reach you.