Are you preparing to become Frond-end developer?
Here is the list TOP 30+ Bootstrap Interview Questions and Answers. These questions will help both freshers and experienced candidates.
So let’s gets started!
Bootstrap Interview Questions and Answers
1. What is Bootstrap?
The current and Latest version of Bootstrap is BootStrap4.
2. Why Bootstrap?
3. Why is Bootstrap used in Mobile Web Development?
- Responsive Grid System
- Easy to use
- Cross-Browser Compatible
- Ease of Customization
- Open Source
- Community Support
4. What are the main components of Bootstrap?
Ans. A Bootstrap Package originally includes the following components
- Layout Components
5. What are Bootstrap Tables?
Ans. Bootstrap consists of various kinds of table structures. These tables are Responsive and allow tables to fit well mobile devices with ease. Using Bootstrap to HTML tables significantly increases the appearance of the table.
6. How many types of tables are available in Bootstrap? Explain with Examples
Ans. Here is the list of Bootstrap tables with examples.
- Bootstrap Basic Table
- Striped Rows Table
- Bordered Table
- Hover Rows Table
- Condensed Table
1. Bootstrap Basic Table
A basic table in Bootstrap has a light padding and consists of especially horizontal dividers.
The class name .table used to style the table
2. Striped Rows Table
The class name .table-striped used to add zebra-stripes to a table
3. Bordered Table
The class name .table-bordered used to add borders on all sides of a table.
4. Hover Rows Table
The class name .table-hover used to add a grey background color (hover effect) to table rows.
5. Condensed Table
The class name .table-condensed used to make the table more compact by reducing half of the cell padding.
7. Explain Contextual Classes of Table in Bootstrap Development
Ans. Bootstrap contains some predefined contextual classes; these used to change the color of rows <tr>, columns and each cell <td> in the table.
- .active – Enables the hover colour to a specified row or cell
- .warning – Shows a warning any cell that valuable attention
- .success – Enables a positive or successful action
- .info – Shows a neutral informative action or change
- .danger – Indicates a potential or a dangerous adverse action
8. What is Bootstrap Grid System?
Bootstrap grid system consists of a 12 column system, Sass variables & mixins, five default responsive tiers, and multiple predefined classes.
9. Explain basis grid structure in Bootstrap (with code)
Ans. Basic grid system of Bootstrap
<div class="container"> <div class="row"> <div class="col-sm"> One column out of 3 columns </div> <div class="col-sm"> One column out of 3 columns </div> <div class="col-sm"> One column out of 3 columns </div> </div> </div>
10. What type of grid classes available in Bootstrap?
Ans. Bootstrap Grid System contains four classes
- xs – for mobiles – view screen < 768px wide
- sm – for tablets – view screen >= 768px wide
- md – for small laptops – view screen >= 992px wide
- lg – for desktops & laptops – view screen >= 1200px wide
11. What type of system rules available in Bootstrap? Explain Grid Options
Ans. Bootstrap uses rems or ems for defining most sizes. px size used for grid container widths and breakpoints. Because viewport width is in pixels and it won’t change the font size.
Below image shows how the bootstrap grid system works across various devices.
12. How to make images responsive?
Ans. The class name “.img-responsive” to the image tag <img>. Then image behaves responsively with their parent element.
13. What is Lead Body Copy?
Ans. Lead Body Copy in Bootstrap used to emphasis on a paragraph. The class defined as “lead” is to give you lighter weight, larger font size, and taller line-height.
14. What are the types of lists supported by Bootstrap?
Ans. Bootstrap supports definition lists, unordered lists and ordered lists
15. Explain the term “Glyphicons”
Ans. Glyphicons are defined as monochromatic icons and symbols. If you want to use, you need a license. Perhaps these are available free of cost for BootStrap projects.
Use Glyphicons in buttons, toolbars, navigation, text, forms.
16. What is Bootstrap Carousel?
The carousel consists of 3 parts
1. Carousel Part
2. Indicators Part
3. Wrapper for Slides Part
1. Carousel Part
The class named “carousel” in <div> contains a carousel.
The class named “.slide” helps to add CSS animation effect and transition.
2. Indicators Part
Indicators are navigation icons just placed at the bottom of the carousel.
The class name called .carousel-indicators used to enable indicators at the bottom section of the carousel.
3. Wrapper for Slides Part
The class name “.carousel-inner”
The .active class needs to be added to carousel; otherwise, it will not be shown or visible.
17. Explain about Bootstrap Icons
Ans. Bootstrap has tons of icons. These Icons are specially designed to work with Components in Bootstrap. Basically Bootstrap icons are in SVG format, for this they are easily styled with any kind of CSS. Finally Icon library open sources by MIT. So you’re free to download and use it for any commercial purpose.
18. How to display the code in Bootstrap?
- <code> tag
- <pre> tag
19. What is the progress bar in Bootstrap?
Ans. A progress bar plays a vital role in the user experience. It is used to show a process & how much completed with graphical visualization.
The class “.progress” used to <div> element to build a default progress bar.
Progress bar with 65% Complete
20. How many types of progress bars in Bootstrap development? and how to create those
Ans. There are 5 types of Progress bars available in Bootstrap. They are mentioned below.
21. Creating a basis progress bar using Bootstrap
Ans. The class “.progress” used a <div> element to build a default progress bar.
22. How to create an alternative progress bar using bootstrap?
23. Types of Layouts in Bootstrap
- Fluid Layout
- Fixed Layout
24. Explain bootstrap media objects
25. How many types of navigation menus are available in Bootstrap?
- Vertical Pills
26. What are the features of Bootstrap?
More questions will update soon, stay tuned!
Explain the button group in Bootstrap
Explain the class is used for basic button group
Which button is actually used to draw a toolbar of buttons in Bootstrap development?
Explain Input groups in Bootstrap Development
How to create a tabbed navigation menu in Bootstrap?
How to create a Pills navigation menu in Bootstrap?
What are Offset columns?
Describe the Bootstrap navbar in Mobile web development
How to create navbar in Bootstrap?
What is Bootstrap breadcrumb?
What are the Bootstrap labels and badges?
Explain the term “Jumbotron” in Bootstrap development
What is the Bootstrap page header?
How to generate thumbnails using bootstrap? How to customize it
Explain the bootstrap alerts & How to create it?