Here are Bootstrap interview questions and answers for freshers as well as experienced Front End Developer candidates to get their dream job.
Q1. What is Bootstrap?
Bootstrap is a platform for web development based on a front-end framework. It is used to create exceptional responsive designs using HTML, and CSS. These templates are used for forms, tables, buttons, typography, models, tables, navigation, carousels and images. Bootstrap also has Javascript plugins, which are optional. Bootstrap is mostly preferred for developing mobile web applications.
Q2. Explain why Bootstrap is preferred for website development.
Bootstrap has better features as compared to other web development platforms. It provides extensive browser support for almost every known browser such as Opera, Chrome, Firefox, Safari, etc. If you are well-acquainted with CSS and HTML, web development becomes easy on Bootstrap.
Also, it supports mobile applications with the help of responsive design and can adjust CSS as per the device, screen size, etc. Instead of creating multiple files, it creates only a single file reducing the work of a developer.
Q3. What are the key components of Bootstrap?
The key components of Bootstrap include:
- CSS: It consists of various CSS files
- Scaffolding: It provides a basic structure with the Grid system, link styles, and background
- Layout Components: This gives the 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
Q4. List some features of Bootstrap.
Some of the features of Bootstrap are:
- It provides an open-source for use
- Bootstrap has Compatibility with all browsers
- It has Responsive designs
- Easy to use and fast
Q5. What are Class loaders in Bootstrap?
A class loader is a part of JRE or Java Runtime Environment which loads Java class into Java virtual environment. Class loaders also perform the process of converting a named class into its equivalent binary form.
Q6. What is Contextual classes of table in Bootstrap?
| Class | Description |
| .active | Applies the hover color to a particular row or cell |
| .success | Indicates a successful or positive action |
| .warning | Identifies a warning that might need attention |
| .danger | Indicates a dangerous or potentially negative action |
Q7. How many types of layout are available in Bootstrap?
There are two major layouts for Bootstrap:
- Fluid Layout- This layout is necessary for creating an app that is 100 % wider and covers all the screen width.
- Fixed Layout- It is used only for a standard screen (940px). Both layouts can be used for creating a responsive design.
Q8. 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.
Q9. Give an example of a basic grid structure in Bootstrap.
Example of a basic grid structure:
<divclass= "container"><divclass= "row"><divclass= "col-*-*"></div><divclass= "col-*-*"></div></div><divclass= "row">...</div></div><divclass= "container">.... |
Q10. Why do we use Jumbotron in Bootstrap?
Jumbotron is used for highlighting content in bootstrap. It could either be a slogan or probably a headline. It increases the heading size and gives a margin for the content of the landing page. To implement Jumbotron in a Bootstrap, you have to use:
Create a container <div> with the class of .jumbotron
For example, use <div class=”container”> if you don’t want Jumbotron to reach the screen’s edge.
Q11. What are the two codes used for code display in Bootstrap?
There are two simple ways to display code in Bootstrap:
- <code> tag: This tag is used to display an inline code.
- <pre> tag: If you have a code with several lines or even a block element, you can display it using this.
Q12. Explain the typography and links in Bootstrap.
Bootstrap sets a basic global display (background), typography, and link styles.
- Basic Global display − It sets background-color: #fff; on the <body> element.
- Typography − This uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base
- Link styles − It sets the global link color via attribute @link-color and applies link underlines only on :hover.
Q13. What 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, that is only made for the progress bar.
Q14. How do you make images responsive?
Bootstrap 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.
Q15. What is the difference between Bootstrap and Foundation?
| Bootstrap | Foundation |
| Bootstrap offers an unlimited number of UI elementsBootstraps uses pixelsIt encourages to design for both desktop and mobileBootstrap support LESS as its preprocessor | In Foundation UI element options are very limited in numbersFoundation use REMsFoundation encourages to design mobile firstIt supports Sass and Compass as its preprocessor |
Q16. What are the steps for creating basic or vertical forms?
The steps for creating basic or vertical forms include:
- Add a role form to the parent <form> element
- Wrap labels and controls in a <div> with class .form-group. This is required to achieve optimum spacing
- Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements
Q17. What is Bootstrap collapsing elements?
Bootstrap collapsing elements enable you to collapse any particular element without writing any JavaScript code or the accordion markup. To apply collapsing elements in bootstrap, you need to add data-toggle= “collapse” to the controller element along with a data-target or href to automatically assign control of a collapsible element. Also, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’) for the same.
Q18. Explain types of lists supported by Bootstrap.
Bootstrap supports three types of lists such as:
- Ordered lists − An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.
- Unordered lists − An unordered list is a list that doesn’t have any particular order and is traditionally styled with bullets. If you do not want the bullets to appear then you can remove the styling by using the class .list-unstyled.
- Definition lists − In this type of list, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for definition term. Subsequently, the <dd> is the definition of the <dt>.
Q19. What is media object in Bootstrap and what are their types?
Media objects in Bootstrap help you 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.
The two types of media object are:
- .media
- .media-list
Q20. Explain the uses of 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.
Examples: .carousel(options), .carousel(‘pause’), .carousel(cycle’), .carousel(‘prev’), .carousel(‘next’).
Q21. How can you create Nav elements in Bootstrap?
Bootstrap offers various options for styling navigation elements. All of these use the same markup and base class .nav. You need to perform the following steps to create Tabular Navigation or Tabs:
- Start with a basic unordered list with the base class of .nav
- Add class .nav-tabs
Q22. What are glyphicons? How to use them?
Glyphicons are icon fonts which can be used in your web projects. Glyphicons Halflings are not free and require licensing. However, their creator has made them available for Bootstrap projects without any cost.
To use the icons, you just have to use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.
| 1 | <spanclass= "glyphicon glyphicon-search"></span> |
Q23. What are the steps to create basic or vertical forms?
The steps involved in creating vertical or basic forms are:
- Firstly, a role form can be added to the parent <form> element.
- Next, you have to add appropriate spacing by wrapping labels and control in <div> and using the function ‘class .form-group’.
- Finally, apply the function ‘class .form-control’ to different elements such as text url <input> , <textarea> and <select>
Q24. What do you mean by Bootstrap well?
Bootstrap well is nothing but a container that makes the content appear sunken. Sometimes it may also give an inset effect on the webpage. Thus, a developer can create a well and also wrap the content in the well with the help of <div> and class .well. The content would appear as per your wish.
Q25. What are the input groups in Bootstrap?
Input groups are extended Form Controls. You can easily prepend and append text or buttons to the text-based inputs with the help of input groups. Also, 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 you need to do the following:
- Wrap it in a <div> with class .input-group
- In the next step, place your extra content inside a <span> with class .input-group-addon.
- Now place this <span> either before or after the <input> element.
Q26. 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.
Q27. How to create thumbnails using Bootstrap?
To create thumbnails using Bootstrap you need to do the following:
- Add an <a> tag with the class of .thumbnail around an image.
- It will add four pixels of padding and a gray border.
- Now, on hover, an animated glow will outline the image.
Q28. What is a Bootstrap Container?
A bootstrap container is a class which is useful and creates a central 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.
