1) Explain what is Bootstrap?
Bootstrap is a framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.
2) Explain why to choose Bootstrap for building the websites?
There are few reason why we choose Bootstrap for building websites
The key components of Bootstrap are
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
6) 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.
7) 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
8) 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.
9) 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.
10) Explain 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
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
13) In Bootstrap what are the two ways you can display the code?
In bootstrap you can display code in two ways
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
15) 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.
16) 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.
17) 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’)
18) 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.
19) 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.
20) 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
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.
22) 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
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
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.
25) What is responsive layout?
Responsive layout which is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space.
26) Describe Bootstrap Panel?
Whenever there is a need of putting the contents in a bordered box with some padding around, panel components are used. They can be created with the .panel class and content inside the panel has a .panel-body class. For creating a basic panel, add class .panel to the <div> element and add class .panel-default to this element.
27) Could you describe Bootstrap caraousel?
We can add a slider to our web site using Bootstrap carousel. It is a flexible, handy and responsive way to add a caraousal or slideshow to our site. Carousel plugin is a component which is used for the same.
28) Can you explain about bootstrap alerts and how to create them?
We can create style messages for users with the help of Bootstrap Alerts. They provide feedback in the form of context message against specific user actions. Basic alerts can be created through a wrapper <div> and adding a class of .alert following by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger.
29) Would you tell me something about Glyphicons and how are they written in our code?
Glyphicons are symbols and icon fonts which are created for providing simplicity and easy orientation in your web projects. Glyphicons Halflings are normally not available for free use and they require licensing but their creator has made them cost free for Bootstrap projects. Bootstrap includes more than 250 glyphs from the Glyphicon Halflings set. To use the icons, we need to write <span class = "glyphicon glyphicon-search"></span> code anywhere in our program.
30) 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.
Bootstrap is a framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.
2) 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.
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
- 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.
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
6) 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.
7) 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
8) 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.
9) 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.
10) Explain 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
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
| 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 |
13) 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
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
15) 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.
16) 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.
17) 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’)
18) 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.
19) 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.
20) 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
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.
22) 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
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’)
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.
25) What is responsive layout?
Responsive layout which is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space.
26) Describe Bootstrap Panel?
Whenever there is a need of putting the contents in a bordered box with some padding around, panel components are used. They can be created with the .panel class and content inside the panel has a .panel-body class. For creating a basic panel, add class .panel to the <div> element and add class .panel-default to this element.
27) Could you describe Bootstrap caraousel?
We can add a slider to our web site using Bootstrap carousel. It is a flexible, handy and responsive way to add a caraousal or slideshow to our site. Carousel plugin is a component which is used for the same.
28) Can you explain about bootstrap alerts and how to create them?
We can create style messages for users with the help of Bootstrap Alerts. They provide feedback in the form of context message against specific user actions. Basic alerts can be created through a wrapper <div> and adding a class of .alert following by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger.
29) Would you tell me something about Glyphicons and how are they written in our code?
Glyphicons are symbols and icon fonts which are created for providing simplicity and easy orientation in your web projects. Glyphicons Halflings are normally not available for free use and they require licensing but their creator has made them cost free for Bootstrap projects. Bootstrap includes more than 250 glyphs from the Glyphicon Halflings set. To use the icons, we need to write <span class = "glyphicon glyphicon-search"></span> code anywhere in our program.
30) 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.
Post a Comment