Bootstrap is a widely used open-source front-end framework for web development, providing a collection of HTML, CSS, and JavaScript components and tools that enable developers to build responsive, mobile-first websites with ease.
Bootstrap Interview Questions And Answers
In this article, we will discuss some questions that are commonly asked in a Bootstrap Interview.
Commonly Asked TypeScript Interview Questions
Q1. What is Bootstrap?
Bootstrap is a free and open-source tool collection used for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is used for creating tables, forms, buttons, carousels, navigation bars, and images.
Q2. What are the features of Bootstrap?
Bootstrap’s features are:
- It is open-source and free to use.
- All browsers are compatible with Bootstrap.
- Its designs are responsive.
- Quick and simple to use
Bootstrap has 2 major layouts:
- Fluid: This layout is required for generating a 100 percent broader app that spans the entire screen width.
- Fixed: It is only used for a normal display. Both of these layouts can be combined to make a responsive design.
Basic grid structure:
<div class="container">
<div class="row">
<div class="col-lg">
column-1
</div>
<div class="col-lg">
Column-2
</div>
</div>
</div>
A progress bar is used to display the progress of a process on a computer. It displays the range of completion of progress. The progress bar can be added to a web page using inbuilt bootstrap classes. Bootstrap has many types of progress bars. For Ex: .bg-success, .bg-info, bg-warning etc.
Q6. Why Bootstrap is preferred for website development over any other platform?
When compared to other web development platforms, Bootstrap provides more functionalities. It has significant browser support for practically all popular browsers, like Chrome, Firefox, Safari, etc. Web creation with Bootstrap is simple if you are familiar with CSS and HTML.
- Bootstrap supports the SASS properties but it is actually built using LESS, which implies that Bootstrap uses both LESS & SASS. While Foundation contains its specific CLI i.e. it only implements the SASS property.
- Bootstrap contains a fixed-width grid layout. While Foundation contains a fluid layout.
- Bootstrap comprehends 12 JavaScript plugins. Whereas the Foundation framework holds 16 JS plugins.
- Bootstrap permits inline forms but Foundation doesn’t.
When the user clicks or hovers over the element then it shows data called Collapsing Element. This is the modern way to show a large amount of data to the user. We can also create our own collapsing element by using HTML, CSS, and JS. It makes the website very clean by collapsing the data while hovering or clicking on it. But Bootstrap facilitates the collapsing element property in its components. Bootstrap facilitates the collapsing element property
There are 3 types of lists supported by Bootstrap are:
- Unordered Lists: In Unordered lists, items are marked with bullets.
- Ordered Lists: In Ordered lists items are marked with numerical bullets such as 1,2, i, ii, etc.
- Definition Lists: In Definition lists, items are defined with their description.
Bootstrap media objects such as images or videos can be easily and efficiently aligned to the left or right of some content. Bootstrap media objects are used to place some data next to content to create complex and repetitive content components.
The media object classes available are:
A jumbotron is a big grey box used to indicate some text which requires extra attention. Any text that seems to be important can be written inside a jumbotron to make it appear big and noticeable.
Steps to add a jumbotron:
- Use a jumbotron class inside a div element.
- Write any text inside the div tag.
- Close the div element.
Carousel is the slideshow component of bootstrap that is widely used for slideshow or cycling through different elements of an HTML document especially image containers or texts. The major use of the carousel plugin is to implement a slider or a slideshow of images. The HTML div containing images can also contain text.
By adding the class .img-responsive to the <img> tag in Bootstrap, images may be made responsive. This class gives the picture max-width: 100%; and height: auto; so that it scales well with the parent element.
Bootstrap Navbar is a navigation header that is located at the top of the webpage and can be extended or collapsed, depending on the screen size. Responsive navigation of our website is created by the bootstrap navbar.We can create a standard navigation bar with <nav class=” navbar navbar-default”>.
Navbar variations:
- navbars with drop-down menus
- search boxes
- a fixed navbar with minimal effort.
Bootstrap Containers are the most basic layout element and are very essential for basic building blocks of bootstrap that wrap a page’s content. By using container we can align content according to the viewport or given device. We can define container within the container class (.container). In other words, we can also say that containers are established the width for the layout to give the content. All the elements and content are added within the container.
Bootstrap Grid System divides up to 12 columns across the page. You can use each of them individually or also can be merge together for wider columns. You can use 12 columns each of width 1 or use 4 columns each of width 3 or any other combination.
Q18. What are the key components of Bootstrap?
- CSS: It is made up of several CSS files.
- Scaffolding: It gives a basic framework with a grid system, link styles, and backdrop.
- Layout Components: This displays a list of layout elements.
- JavaScript Plugins: Many jQuery and JavaScript plugins are included.
- Customization: You can customize your components to create your own version of the framework.
Icon fonts which can be used in web application are called Glyphicons. Bootstrap includes 260 glyphicons. These glyphicons are used for web projects from Bootstrap Glyphicons Halflings Set. Glyphicons Halflings are not available to free of cost, but their creator has made them available for Bootstrap free of cost.
For using the Glyphicons icon in Bootstrap, you can add the following code just about anywhere in your code. We can also leave a space for proper padding in between the icon and text:
<span class = "glyphicon glyphicon-search"></span>
Forms are the most important and basic template of the website which is used for creating table, signup, login and feedback etc. Thus the availability of form templates in bootstrap has made it easy and we can directly use form templates from bootstrap.
Step 1: Include the Bootstrap CDN links in the code in order to use Bootstrap.
Step 2: Now you can use bootstrap forms with the input fields whatever you want in the forms inside the body tag.
A bootstrap well is something like a bootstrap panel with round borders and padding around it. This is used to create some attention towards some content of the webpage. The .well class adds a rounded border around the element with a gray background color and some padding. But we can change the text color and padding with the help of CSS.
Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs.
Basic input groups: The following classes are the base classes that are used to add the groups to either side of the input boxes.
- The .input-group-prepend class is used to add groups to the front of the input.
- The .input-group-append class is used to add it behind the input.
- The .input-group-text class is used to style the text that is displayed inside the group.
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy.
<ol class="breadcrumb">
<li class="breadcrumb-item"> Content .. </li>
</ol>
Bootstrap Alerts are a technique for styling user messages. They send contextual feedback messages in response to common user behaviors. To alert, you can add an optional close icon. Create a wrapper <div> and add a class of .alert and one of the four contextual classes to create a basic alert.
To create a progress bar:
- Use class progress inside a div class.
- Inside the already made div class, add another div tag with a class .progress-bar.
- Mention the progress of the bar under a style attribute using the width as a percentage. For eg- style=”width:50%
- Bootstrap 4 has 5 levels (xs, sm, md, lg, xl). And Bootsstrap 5 has 6 levels (xs, sm, md, lg, xl, xxl).
- Bootstrap 4 has jquery and all related plugins. But in Bootstrap 5, jquery is removed and switched to vanilla JS with some working plugins.
- We cannot modify utilities in bootstrap 4. But Bootstrap 5 gave us the freedom to modify and also create our own utility.
- Bootstrap 4 doesn’t have its own SVG icons, we have to use font-awesome for icons. Whereas Bootstrap 5 has its own SVG icons.
- Bootstrap 4 supports jumbotron. While Bootstrap 5 doesn’t.
Q27. How is the tooltip different from the popover?
When the user hover the element through mouse-pointer, the Tooltip component appears as a little pop-up box. The Popover component shows as a pop-up box when the user clicks on an element. More info might be stored in the popover.
The popover will show on the right side of the element by default, while the tooltip will appear on the top.
Column ordering classes in Bootstrap help to change the order of our grid system based on different screen sizes eg: desktop, mobile, tablet, and smartwatches. This makes the website more responsive to different screen sizes.
We use a handful of media queries for delivering different style sheets to different devices, to create sensible breakpoints for our layouts and interfaces. Most of the breakpoints are based on the minimum viewport width and allow the element to resize as the viewport changes.
Bootstrap uses the following media query ranges or breakpoints in Sass source files for layouts, grid systems and components by default.
Q30. What is Normalize in Bootstrap?
Bootstrap provides cross-browser uniformity by using normalize. CSS resets have been replaced by normalize.css, a modern, HTML5-ready alternative. By default styling, it improves cross browser uniformity in HTML element.
To display the code on our webpage, bootstrap has some tags that can be used to display the code.
Method 1: The inline snippet of code wrapped in <code> tag. Inline code should be wrapped in <code> tags. The text which will be displayed is fixed-width and of red font color.
Method 2: Code block using <pre> tag to display the code as a standalone block element. For displaying multiple lines of code we can use this tag.
A panel is a rectangular component of Bootstrap, typically used to add content to the website. It can also have a header or footer, or both. Bootstrap also provides various classes to add padding to the content or multiple colors to make it more attractive.
CDN Link: First, include the style sheet in the code to use Bootstrap for creating the panel.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
Add the following syntax to have a panel with the heading. The panel-heading class enables us to have a heading for our panel.
Scrollspy works according to the scroll position or the position at which the user is currently seeing.It targets the navigation bar contents automatically on scrolling the area. Scrollspy can be implemented in two ways:
- Horizontal scrollspy
- Vertical scrollspy
Q34. Why do we use the affix plugin in Bootstrap?
For affixing a <div> to a certain area on a webpage, we utilize the affix plugin in Bootstrap. The plugin also lets you toggle pinning for the attached <div> on and off. The most common application of the affix plugin in Bootstrap is social icons.
The attached <div> starts at a specific point on the page and scrolls with it. However, beyond a certain point, it will be stuck in place, preventing the remainder of the webpage from scrolling.
Button groups allow you to stack several buttons on a single line. You can use this to group objects together, such as alignment buttons.
For the basic button groups we can use .btn-group. You can use the class .btn to wrap a bunch of buttons in the .btn-group.
- Faster and Easier Web Development.
- It creates Platform-independent web pages.
- It creates Responsive Web-pages.
- It is mobile web application.
Step-by-step guide for the implementation:
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
Step 2: Add <div> tag in the HTML body with class row. In that <div> create four div sections to create four images.
Step 3: Add “col-sm-6” and “col-md-3” to four div sections which creates a webpage responsive.
Step 4: Add <a> tag with class value thumbnail to define the link of the image in the next line.
<a href="#" class="thumbnail">
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. It replaces the use of panels, wells, and thumbnails. All of it can be used in a single container called card.
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
Bootstrap provides various classes for creating different styles of “spinner” to display the loading state of projects. These classes are inbuilt with HTML and CSS so no need to write any JavaScript to create them. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap.
Types of Spinner:
- Border spinner: We can create a lightweight bordered spinner using the .spinner-border class as given below.
- Growing spinner: We can create a growing spinner by using the .spinner-grow class of Bootstrap. It displays as repeatedly grows.
Pagination is used to enable navigation between pages on a website. The pagination used in Bootstrap has a large block of connected links that are hard to miss and easily scalable. To manage pagination we can add these classes:
- .pagination: This class must be added to your page to enable pagination.
- .disabled, .active: Customize links with .disabled for non-clickable links and .active for active links.
- .pagination-Ig, .pagination-sm: Use these classes to get items of various sizes.
Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive.
- .table class is used to create a simple Bootstrap table. This class name is used with the <table> tag to create a table.
- .table-stripped class is used to create alternate dark and light rows. For creating striped table we can use the combination of table and table-stripped classes within the <table> tag.
- .table-bordered class is used to add borders on all sides of the table and cell. Use the combination of table and table-bordered classes within the <table> tag to create a bordered table.
- .table-hover class is used to add the hover effect on table rows. Use the combination of table and table-hover classes within the <table> tag to create a hover rows table.
Q42. Write the HTML code to create a basic toast.
Toast is used to create something like an alert box which is shown for a short time like a couple of seconds when something happens. Like when the user clicks on a button or submits a form and many other actions.
<div class="toast">
<div class="toast-header">
<--Toast Header-->
</div>
<div class="toast-body">
<--Toast Body-->
</div>
</div>
Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that they have more rounded corners.
The .badge-pill class is used to make the badges more rounded.
Step By Step Guide to Animate Progress Bar
Step 1: Add Bootstrap and jQuery CDN inside the <head> tag before the other stylesheets.
Step 2: Add a HTML <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped. Inside the <div> add an empty <div> with a class of .progress-bar and .progress-bar-success. Using CSS attribute specify the width for progress bar.
Step 3: Add jQuery in <script> tag to animate progress bar to show progress.
The modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked. However, clicking on the modal’s backdrop automatically closes the modal. Also, it must be kept in mind that Bootstrap doesn’t support nested modals as they create a bad UI experience for the user. Therefore, only one modal window is supported at a time.
Q46. What will be the output of the below code and why?
<div class="progress">
<div class="progress-bar bg-success" style="width: 65%">
<span class="sr-only">75% successfully completed</span>
</div>
<div class="progress-bar bg-warning" style="width: 20%">
<span class="sr-only">30% completed with warnings</span>
</div>
<div class="progress-bar bg-danger" style="width: 15%">
<span class="sr-only">15% did not complete</span>
</div>
</div>
If we use the same .progress parent element for numerous bars, Bootstrap will combine them into a single progress bar. The sum of the progress bar in Bootstrap is 100 percent, as we all know. As a result, the progress bar will display the full width and fully populated result.
List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way.
- Wrap the child elements inside a .dropdown class.
- We can use either a button or an anchor tag for toggling. For toggling we need to use the .dropdown-toggle class and add data-bs-toggle =” dropdown” element to the parent class.
- For making the dropdown menu items use the .dropdown-menu class. Use .dropdown-item class with each item names.
Q49. Define lead body copy in Bootstrap.
Lead Body Copy is used to add emphasis to a paragraph in a body tag. The paragraph tags are inside the Body tags. This gives us a lightweight, large font size and a tall line height. This feature can be used using the pre-defined class “.lead” and see its functionality.
Q50. Name some alternatives to Bootstrap.
- Foundation
- Bulma
- Materialize
- Material Design Lite
- Skeleton
- Pure CSS
- Semantic UI
- UIKit
Share your thoughts in the comments
Please Login to comment...