What is Twitter Bootstrap?
Bootstrap is an HTML, CSS, and JS framework for building rich web applications with minimal effort. This framework emphasis more on building mobile web applications. Bootstrap is a front-end framework that is used for creating HTML, CSS, and JS web applications. Its layout is very responsive, easy, and fast to use. It mostly focuses on building a mobile application with having design templates for creating UI like Dropdown, Forms, Buttons, Alerts Tab, etc.Explain why to choose Bootstrap for building the websites?
Answer :
There are a few reasons why we choose Bootstrap for building websites Mobile Support: For mobile devices, it provides full support in one single file rather than in a separate file. It supports the responsive design including adjusting the CSS based on the different types of devices, size of the screen, etc. It reduces the extra effort for developers. Easy to learn: Writing an 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.What are the key components of Bootstrap?
Answer :
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 the framework you can customize your components.What are the types of layouts available in Bootstrap?
Answer :
In Bootstrap there are two types of Layout available Fluid Layout: Fluid layout is used when you want to create an 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) optionWhat is the use of Jumbotron in Bootstrap?
Answer :
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 containerExplain what is Bootstrap well?
Answer :
Bootstrap well is a containerWhat are responsive utility classes in Bootstrap?
Answer :
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”, hidesExplain the uses of the carousel plugin in Bootstrap.
Answer :
The carousel plugin in bootstrap is used to make sliders in the web pages or your site. Several carousel plugins 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’).Explain input group in Bootstrap.
Answer :
Input groups in bootstrap are put out from controls. By using an input group, we can easily add prepended and appended text or buttons to the text-based inputs. We can prepend and append elements to a .form-control by taking all the elements in under a class .input-group. After that, place your extra content inside and in the same by using class .input-group-addon after this, you can place the element either before or after the input element.What is Bootstrap breadcrumb?
Answer :
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.What are Grid classes in Bootstrap?
Answer :
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 tablet screens that are greater than 786px wide). MD (It is for a 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).Why use Bootstrap?
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,o the Bootstrap official site has good documentation. Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablet,s, 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 open-source.What does the Bootstrap package include?
Bootstrap package includes − 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 the 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 sectionWhat is are the Contextual classes of the table in Bootstrap?
The Contextual classes allow you to change the background color of your table rows or individual cells.| Sr.No. | Class & Description |
|---|---|
| 1 | .active Applies the hover color to a particular row or cell |
| 2 | .success Indicates a successful or positive action |
| 3 | .warning Indicates a warning that might need attention |
| 4 | .danger Indicates a dangerous or potentially negative action |
What is Bootstrap Grid System?
Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.What are Bootstrap media queries?
Media Queries in Bootstrap allow you to move, show and hide content based on viewport size.Show a basic grid structure in Bootstrap.
Following is basic structure of Bootstrap grid − <div class = "container"> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> <div class = "row">...</div> </div> <div class = "container">....What are Offset columns?
Offsets are a useful feature for more specialized layouts. They can be used to push columns over for more spacing, for example. The .col-xs = * classes don't support offsets, but they are easily replicated by using an empty cell.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.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.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.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.What is Lead Body Copy?
To add some emphasis to a paragraph, add class = "lead". This will give you a larger font size, lighter weight, and a taller line-heightExplain types of lists supported by Bootstrap.
Bootstrap supports ordered lists, unordered lists, and definition lists.What are glyphicons?
Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however,r their creator has made them available for Bootstrap projects free of cost.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>What is a transition plugin?
The transition plugin provides simple transition effects such as Sliding or fading in modals.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.How do you use the Dropdown plugin?
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()What is Bootstrapcarousell?
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.What is a 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.Which class is used for the basic button group?
.btn-group class is used for a basic button group. Wrap a series of buttons with class .btn in .btn-group.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.Which classes can be applied to the 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.Which class makes a set of buttons appear vertically stacked rather than horizontally?
The .btn-group-vertical class makes a set of buttons appear vertically stacked rather than horizontally.What are input groups?
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.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.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.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-pillsWhat is a 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.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 the text a slightly larger size. To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.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).Which class is used for basic pagination?
.pagination class is used to add the pagination on a page.How will you customize links of pagination?
You can customize links by using .disabled for unclickable links and .active to indicate the current page.What are bootstrap labels?
Bootstrap labels are great for offering counts, tips, or other markups for pages. Use class .label to display labels.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.What is Bootstrap Jumbotron?
As the name suggests, 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.What is the the 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.How to create thumbnails using Bootstrap?
To create thumbnails using Bootstrap − Addan <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.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.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.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).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.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%.How will you create an 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. Sa,y, for example, style = "60%"; indicates that the progress bar was at 60%.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. Sa,y, for example, style = "60%"; indicates that the progress bar was at 60%.How will you create and an 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%.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.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 markups.What is the purpose of .media class in bootstrap?
This class allows floating a media object (images, video, and audio) to the left or right of a content block.What is the purpose of the .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.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. Als,o add class .panel-default to this element.How will you create a bootstrap panel with a heading?
here are two ways to add panel heading − Use the .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.How will you create a bootstrap panel with a footer?
You can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.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.Can you put a table within the 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.Can you put a list group within the bootstrap panel?
Yes! You can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Als,o add class .panel-default to this element. Now within this panel include your list groups.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.What is the 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.What is an affix plugin?
The affix plugin allows a <div> to become affixed to a location on the page. You can also toggle its pinning on and off using this plugin. A common example of this is 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.Why Bootstrap is used for Mobile Web Development?
It is used for Mobile Web development because it has responsive designs and templates which is easy to use.
Explain the features of Bootstrap.
Open Source for use
Compatibility with all browsers.
Responsive designs
Easy to use and fast.
Name the contextual classes that are used with the progress bar in bootstrap.
The contextual classes used with the progress bar are as follows.
Progress-success
Progress-info
Progress-warning
Progress-danger
What 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”, hides
Explain the 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 add different functionalities to the users.
Model windows are created with the help of the modal plugin.
What 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.
Explain the uses of the carousel plugin in Bootstrap.
The carousel plugin in bootstrap is used to make sliders in the web pages or your site. Several carousel plugins 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’).
Explain input group in Bootstrap.
Input groups in bootstrap are put out from controls. By using an input group, we can easily add prepended and appended text or buttons to the text-based inputs.
We can prepend and append elements to a .form-control by taking all the elements in a class .input-group. After that, place your extra content inside and in same
How 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 mobile view, the navbar collapses and becomes horizontal as the available viewport width increases.
What 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.
What is the work of the affix plugin in Bootstrap?
This plugin allows a
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 in place and will stop the scrolling for the rest of the page.
What are Grid classes in Bootstrap?
xs (It is used for phone screens less than 786px wide).
sm (It is used for tablet screens that are greater than 786px wide).
MD (It is for a 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).
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.
What 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.
AngularJS Technical Interview Questions Answers
Android Development Technical Interview