1Explain what is Bootstrap?
Bootstrap is a front-end framework that is used for creating HTML, CSS, and JS web applications. Its layout is very responsive, fast and easy to use. It mostly focuses on building a mobile application with having design templates for creating UI like Dropdown, Forms, Buttons, Alerts Tab, etc.
2Why Bootstrap is used for Mobile Web development?
It is used for Mobile Web development because it has responsive designs and templates which are easy to use.
3Explain why to choose Bootstrap for building the websites?
1. 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.
2. Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML
3. Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.
4Explain the features of Bootstrap.
Its features include:
- Open source for use
- Compatibility with all browsers.
- Responsive designs
- Easy to use and fast.
5What are the key components of Bootstrap.
Its components include:
- Scaffolding: It has the grid system, background, styles.
- JS Plugins: Contains JS and jQuery plugins.
- Customize: Can customize frameworks.
- CSS: Contains CSS files.
6What do you understand by Bootstrap container?
Bootstrap container behaves like a container where you can put HTML code and it is a part within the page where the content of the site can be placed to make it responsive and fast.
7What do you mean by Bootstrap Classloader?
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.
8How many types of layouts are there 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
9Explain 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.
10How can you display code in Bootstrap?
You can display the code in two ways i.e. by using the <code> tag and by using the <pre> tag.
11When will you use <code> tag and <pre> tag?
<code> tag is used to show the code inline and <pre> tag is used to show code with multiple lines.
12What 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
13What 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.
14What is a progress bar in bootstrap?
Progress bar is used with HTML tag style in HTML element using <progress> keyword. In bootstrap, we use html5 <progress> with CSS classes that have special features in bootstrap, which is only made for the progress bar.
15Name the contextual classes that are used with the progressive bar in bootstrap.
The contextual classes used with progressive bar are as follows.
- Progress-success
- Progress-info
- Progress-warning
- Progress-danger
16What are responsive utility classes in Bootstrap?
Responsive utility classes in bootstrap are a set of classes that are used to conceal or exhibit the HTML elements based on screen resolution that discerns by media query in bootstrap.
Example: “hidden-md-down”, It hides
17What are the different button styles in Bootstrap?
In bootstrap, there are seven styles which we can use with the bootstrap button.
- .btn-default.
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning.
- .btn-danger.
- .btn-link.
18What are Bootstrap alerts?
This is used to create presume alert messages, which adds style to the messages to look more noticeable to the user.
There are four classes in alerts: .alert-success, .alert-info, .alert-warning, .alert-danger.
19Define Bootstrap thumbnails.
It is a way to use the layout images, videos, text, etc. in a grid system. We can create thumbnails by adding a tag with the class .thumbnails around the image.
This will add four pixels of padding and a grey border.
20Explain Modal plugin in Bootstrap.
A model is an inherited window that is layered over its parent window. This is used to augment the user experience and adds different functionalities to the users. Model windows are created with the help of the modal plugin.
21What 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.
22Explain 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
23Which class is used for pagination in Bootstrap?
To add pagination on the webpage we have to use the class .pagination.
24What 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
25In 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
26Explain what are the steps for creating basic or vertical forms?
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
27Explain what is Bootstrap collapsing elements.
It allows you to collapse any particular element without using any JavaScript code.
To use this feature in bootstrap you have to add data-toggle=” collapse” to the controller element along with a data target to automatically assign the control of a collapsible element. We can use this by writing .collapse(options) etc.
28What is Bootstrap Well?
Bootstrap well is a form of container which thrives or makes the content look recessed on the web page. It also wraps the content by using .well class.
29Explain the uses of the carousel plugin in Bootstrap.
Carousel plugin in bootstrap is used to make sliders in the web pages or your site. There are several carousel plugins that are used in bootstrap to display large contents within a small space by adding sliders.
Example: .carousel(options), .carousel(‘pause’), .carousel(cycle’), .carousel(‘prev’), .carousel(‘next’).
30How can we customize links of pagination in Bootstrap?
We can customize the links by using .disabled for unclickable links and .active for indicating the current page.
31Explain the input group in Bootstrap.
Input group in bootstrap is put out from controls. By using an input group, we can easily add prepended and appended text or button to the text-based inputs.
We can prepend and append elements to a .form-control by taking all the elements in a <div> under a class .input-group. After that, place your extra content inside a <span> in same <div> by using class .input-group-addon after this you can place the <span> element either before or after the input element.
32Write the ways to create a tabbed navigation menu in Bootstrap.
We can create tabbed navigation by making a basic unordered list with the base class of .nav and after this, we can add class .nav-tabs.
33In Bootstrap, how can you create a pills navigation menu?
Pills navigation menu in bootstrap is created by making an unordered list at first with the base class of .nav and after this add the class .nav-pills.
34How navbar works in Bootstrap?
In bootstrap, the navbar is an eminent feature to make a responsive meta component that works as navigation headers for your application and site. In the mobile view, the navbar collapses and becomes horizontal as the available viewport width increases.
35How we can create a navbar in Bootstrap?
To create a navbar in a bootstrap at first, we have to add the classes .navbar, .navbar-default to the <nav> tag. After this, we have to add the role=” navigation” to the above element, and this will help inaccessibility.
We have added a header class .nav-header to the <div> element, which will include an <a> element with a class navbar brand. From this, we will get a text with a larger size.
36What is Bootstrap breadcrumb?
Bootstrap breadcrumb is an efficient way to show hierarchy-based information for a site. This can show the dates of publishing, categories or tags in a blog. They also tell the user about the current page location within a navigational hierarchy.
So we can say that Bootstrap breadcrumb is simply an unordered list with a class of .breadcrumb.
37What are labels in Bootstrap?
Bootstrap labels are used for offering counts, tips or other things to provide markup on web pages. To use the label in Bootstrap we use the class .labels to indicate the labels.
38What are badges in Bootstrap?
Badges are homogeneous to labels, the main difference between them is corners are more rounded. The main work of badges in the bootstrap is to highlight new or unread items. To use badges just add <span class=”badge”> to links and bootstrap navs.
39What is a jumbotron in Bootstrap?
It is used to increase the size of headings and to add a lot of margins for landing page content. To create a jumbotron we have to create a container <div> with the class of .jumbotron.
40What 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
41In 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
42How can we make image responsive in Bootstrap?
After the updates in Bootstrap, currently the feature to make an image responsive has been added, we can do this by adding a class .img-responsive to the <img> tag. This class makes the width max-width =100%; and height=auto; to the image so that it matches nicely to the parent element.
43What do you mean by normalize in Bootstrap?
Bootstrap normalize is a small CSS file that is used to make cross-browser consistency.
44What is lead body copy in Bootstrap?
It is used to add some ascent to the paragraph if we add class=”lead”. This will enlarge the font size and taller line-height.
45What are panels in Bootstrap?
Panels are components that are used when you want to put your DOM component in a box. So, to retrieve a basic panel we just need to add class.panel to the <div> element. We can also add class.panel-default to this element.
46How will you create a Bootstrap panel with the heading?
There are two ways by which we can add panel heading.
First is, we can directly use the .panel-heading class to add heading containers in a panel and the second way is by using any heading tag like <h1> to <h6> with a .panel-title class to give more styles on the heading.
47What is a scrollspy plugin in Bootstrap?
It is an auto-updating nav plugin that allows in fetching section of the page based on the scroll position. This can be done by the .active class to the navbar based scroll position.
48What is the work of the affix plugin in Bootstrap?
This plugin allows a <div> to be attached to a location on the page.
Use of the social icon in a page is an example for this in which we see that the icons will start in a location, but when the page hits on a certain mark it will block the <div> in place and will stop the scrolling for rest of the page.
49What are Grid classes in the Bootstrap?
There are four grid classes in Bootstrap.
They are:
- xs (It is used for phone screens less than 786px wide).
- sm (It is used for the tablet screens which are greater than 786px wide).
- md (It is for small laptop screen of size equal to or greater than 992px wide).
- LG ( It is for laptop and desktop screens which are equal to greater than 1200px wide).
50What are global styles that are used in Bootstrap Default Typography?
In Bootstrap the global default font-size is 14px and the line height is 1.428. The default font changes to Helvetica and Arial are with sans-serif fallback and all these styles are applicable for both body and all paragraphs.
51 What dependencies does Bootstrap require to work properly?
jQuery is the only dependency that bootstrap requires for working properly and this is only for JavaScript plugins in bootstrap.
52Explain 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.
53How 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.
54Explain 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
55Explain 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
56What is the difference between Bootstrap and Foundation?
Bootstrap uses very fewer preprocessors as it supports less and it allows the designing and development for both mobile and desktop. On the other hand, Foundation supports sass processors and it is used only for mobile UI designing.
57What are Glyphicons in Bootstrap?
By this, we can use the icon simply anywhere in your code.
<span class=”glyphicon glyphicon-search”></span>
58What is a transition plugin in Bootstrap?
It provides simple transition effects like sliding or fading in modals.
59Explain the concept of creating a vertical or basic form in Bootstrap.
For this first we have to add a role form to the parent <form> element then we have to wrap labels and controls in a <div> with class.form-group and then we have to add a class of .form-control to all text url <input>,<textarea> and <select> elements.
60Explain what the below code will do?
<a href="#">Home <span class="badge">36</span></a>
This code will produce a link with an inline badge which will give an important notification to the user like number received, message received or the number of requests, etc.