Q1 : What is Bootstrap?
A : Bootstrap is an HTML, CSS, and JS framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.
Q2 : What is Bootstrap Grid System?
A : 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.
Q3 : Define UI Bootstrap?
A : 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.
Q4 : What are Bootstrap Alerts?
A : Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users.
There are four classes that are used within <div> element for alerts.
- .alert-success
- .alert-info
- .alert-warning
- .alert-danger
Q5 : What are the key components of Bootstrap?
A : 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
Q6 : What are Bootstrap Form Rules?
A :
- Always use <form role=”form”> (helps improve accessibility for people using screen readers)
- Wrap labels and form controls in <div class=”form-group”> (needed for optimum spacing)
- Add class .form-control to all textual <input>, <textarea>, and <select> elements
Q7 : What are the types of layout available in Bootstrap?
A : 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) option
Q8 : What are offset columns in Bootstrap?
A : 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
Q9 : What is the use of Jumbotron in Bootstrap?
A : 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
Q10 : In Bootstrap what are the two ways you can display the code?
A : 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
Q11 : What is Bootstrap collapsing elements?
A : 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’)
Q12 : What are the steps for creating basic or vertical forms?
A : 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
Q13 : What is list group in Bootstrap and what is the use of it?
A : 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.
Q14 : What is Bootstrap well?
A : 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.
Q15 : How you can create Nav elements in Bootstrap?
A : 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
Q16 : How you can add badge to list group in Bootstrap?
A : To add badge to list group in Bootstrap you have to simply add <span class = “badge”> within the <li> element.
Q17 : What is Bootstrap pager?
A : The bootstrap pager is a form of pagination. It is used to create previous and next buttons (links). The “.pager” class is used within the <ul> element to create the previous/next buttons.
Q18 : Define Kickstrap?
A : 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.
Q19 : What are Bootstrap Plugins?
A : Bootstrap comes bundled with 12 jQuery plugins that extend the features and can add more interaction to your site. To get started with Bootstrap’s JavaScript plugins, you don’t need to be an advanced JavaScript developer. By utilizing Bootstrap Data API, most of the plugins can be triggered without writing a single line of code.
Q20 : What are Glyphicons?
A : 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.