Bootstrap



21. What is Fluid Layout in Bootstrap?  

Fluid layout adapts itself to different browser. Means design automatic adjust according to browser size.



22. What is Fixed Layout in Bootstrap?  

Fixed layout doesn't adapts itself to different browser but it can be responsive.



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



24. What is difference between Fluid Layout and responsive Layout?  

Fluid layout adapts itself to different browser window sizes, all the values used are calculated proportionally to the viewport size, so when resizing, all the columns are resized.

Responsive layout is able to adapt itself to different sizes as well. When resizing, the number of columns changes according to the available space.




25. What function you can use to wrap a page content?  

 .container  


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


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


28. What are glyphicons?  

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.



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


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



31. What is Bootstrap caraousel?  

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.



32. Explain what are the steps for creating basic or vertical forms?  

The steps for creating basic or vertical forms are

(i) Add a role form to the parent <form> element
(ii) Wrap labels and controls in a <div> with class .form-group. To achieve optimum spacing this is needed
(iii) Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements



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



34. Explain 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.



35. Explain 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')



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

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



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


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



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


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



.Net Interview Question

PHP Interview Question

Java Interview Question

AngularJS Interview Questions