Bootstrap Interview Preparation Guide

Download PDF

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.

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

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.

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.

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

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.

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.

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

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

Bootstrap container is a class which is useful and creates a centered 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.

By placing multiple bars under the same .progress parent element, Bootstrap will stack them into one single progress bar. Since the sum of the progress bar is 100%, the progress bar will be full width and fully populated.

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.

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.

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.

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

☛ Plenty of CSS files
☛ Scaffolding
☛ List of layout components
☛ JavaScript Plugins
☛ Customize your components

☛ Fluid Layout
☛ Fixed Layout

☛ HTML
☛ CSS
☛ LESS
☛ Sass
☛ JavaScript

Bootstrap is used for building websites for the following reasons,

☛ 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.
☛ 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 that are easy to customize. It also provides web based customization.

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.

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

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.

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 −

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

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

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) { ... }