© ARC Tutorials

Bootstrap
Top 55 Interview
Questions Answers
With Explanations
 About ARC Tutorials
ARC Tutorials is a leading Technology content publishing house and has a strong community
over 50k patrons.

We specialize in Web Development, Testing, DevOps and Many more latest technologies.

All the EBooks can be found at https://arctutorials.gumroad.com

Official Channel: https://youtube.com/arctutorials

Disclaimer
All the content is protected by copyright laws. None of the contents of the book can be copied,
circulated or published without copyright information. Legal actions will be initiated against
anyone found guilty and all costs will be beared by the violator.
 Bootstrap 5 Full Tutorials
Bootstrap 5 Complete Tutorial Playlist
Around 40 hands-on tutorials and live examples

https://www.youtube.com/playlist?list=PLp50dWW_m40UvCxL8K83_DotLYiG4mDcM

Subscribe and Ask your doubts in comments section

 Contact Details
If you have any feedback or need any help, training or job support, please write to the
founder directly

https://www.youtube.com/arctutorials

write to me at: [email protected]

Subscribe and Ask your doubts in comments section
 © ARC Tutorials
What is Bootstrap?

Bootstrap is a HTML, CSS, and JS framework for building the rich web
applications with minimal effort.

Bootstrap is a front-end framework that is used for creating HTML, CSS, and
JS web applications. Its layout is very responsive, easy and fast to use.

It mostly focuses on building a mobile first application with having design

components for creating UI like Dropdown, Forms, Buttons, Alerts Tab, etc.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Why use Bootstrap?
● Free and open-source.
● Compatible with almost all modern browsers like Google Chrome, Firefox, Safari,
Opera, and Internet Explorer.
● Responsive features.
● Easy to use.
● Lightweight.
● Consists of several components and utilities.
● Support for jQuery plugins.
● Easily customizable.
● Mobile-friendliness. Get the Interview Questions Answers as PDF copy at
● Simple integration. https://arctutorials.gumroad.com
● Good documentation support.
● Availability of a large number of templates, themes, and plugins.
 © ARC Tutorials
List some of the features in Bootstrap?

The key components of Bootstrap are

• CSS Utilities: It comes with plenty of CSS files
• Scaffolding: It provides a basic structure with Grid system , link styles and
background
• Layout: Fluid and Fixed Layouts
• Components: Tables, Buttons, Forms, Accordions, Links, Headers, Cards and much
more
• JavaScript Plugins: It contains many jQuery and JavaScript plugins
• Customize: To get your own version of framework you can customize your
components

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What are the key Components of © ARC Tutorials

Bootstrap?
Some of the components that require JavaScript are shown in the below list:

● Alerts – To close alerts

● Buttons – To toggle buttons
● Checkbox – For checkbox functionality
● Radio button – For radio button functionality
● Carousels – For sliding behaviour of carousels
● Dropdowns – For displaying and positioning dropdowns
● Modals – For displaying, positioning, and scrolling modals
● Navbar – To extend collapse plugin to implement responsive behaviour
● Toasts – For displaying and dismissing toasts
● Tooltips – For displaying and positioning tooltips
● Popovers – For displaying and positioning popovers
● Scrollspy – For scrolling behaviour and navigation updates

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What are the different options for © ARC Tutorials

adding Bootstrap to your project?

There are several options to add Bootstrap to your project.

They are:

● Using ready-to-use compiled CSS and JS code.

● Using source files.
● Installing via Bootstrap CDN.
● Installing via package managers such as NPM, Yarn, RubyGems, Composer, etc.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
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.

Containers are the most fundamental components in Bootstrap.

It behaves like a container where you can put HTML code, and it is a part within the page
where the content of the site can be placed to make it responsive and fast.

The advantage of the bootstrap .container is that it is responsive and will place all our
other HTML code.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What are the types of layout available © ARC Tutorials

in Bootstrap?
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
BootStrap

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Define Fluid Layout?

Fluid Layout is useful when you need to make an app which involves the full width of the
screen i.e. Fluid Layout adjusts itself according to the browser size.

The fluid layout will auto-adjust based on responsive screen resolutions.

The .container-fluid class provides a full width container, spanning the entire width of the
viewport

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Define Fixed Layout.

Fixed layout is responsive but cannot adjust itself according to the browser size.

Fixed Layout should be 940 px in most cases.

The .container class provides a responsive fixed width container

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain Typography 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.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
What is Bootstrap Grid System?

The Bootstrap Grid System is a mobile-first, responsive grid system that scales up to 12 columns as
the device or viewport size grows.

Predefined classes for quick layout options and powerful mix-ins for creating successful semantic
layouts are included in the system.

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you
customize. The six default grid tiers are as follows:
● Extra small (xs) -> col-xs
● Small (sm) -> col-sm
● Medium (md) -> col-md
● Large (lg) -> col-lg
● Extra large (xl) -> col--xl
● Extra extra large (xxl) -> col-xxl
Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com
 © ARC Tutorials
What are offset columns in Bootstrap?

Column Offsetting: Column offsetting is used to move or push a column from its
original position to a specified width or space.

To implement column offsetting we use the ‘.col-md-n’ class with ‘.offset-md-n’ class
which pushes column by n columns.
<div class="container text-center">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com
 © ARC Tutorials
What is column ordering in Bootstrap?

Column ordering classes (order-first, order-last, order-1 to 6) in Bootstrap helps to

change the order of our grid system based on different screen sizes eg: desktop, mobile,
tablet, smartwatches.

We can arrange the visual order of the content. For responsive, we can use order-md-1
<div class="container text-center">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com
</div>
 How can you display code in © ARC Tutorials

Bootstrap?
You can display code in two ways.

They are:

● Using the <code> tag – This method is used to display code as inline code.
● Using the <pre> tag – This method is used to display code as a standalone block.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 Name the contextual classes that are © ARC Tutorials

used for background color

The contextual classes used for background color are as follows:

● The .bg-primary class

● The .bg-secondary class
● The .bg-success class
● The .bg-danger class
● The .bg-warning class
● The .bg-info class
● The .bg-white class
● The .bg-light class
● The .bg-dark class

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What are the default Bootstrap text © ARC Tutorials

settings?
The default font size in Bootstrap 4 is 16px, with a line-height of 1.5.

The default font family is "Helvetica Neue," which includes Helvetica, Arial, and other
sans-serif fonts.

Margin-top: 0 and margin-bottom: 1rem are also set on all <p> elements (16px by
default).

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 Which are the classes used for © ARC Tutorials

pagination in Bootstrap?
The classes used for pagination are the
• .pagination
• .page-item
• .page-link
• .pagination-sm
• .pagination-lg
• .active
• .disabled
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com
 © ARC Tutorials
Explain input groups in Bootstrap

There are 2 types of input groups in Bootstrap

1. Prepend
2. Append

We can prepend and append addons elements to a .form-control in front of or behind

text inputs by using the .input-group-prepend class and the .input-group-append class
respectively.

Further, you can use the .input-group-sm class to make a small input group and the
.input-group-lg class to make a large input group.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 How can you create a tabbed © ARC Tutorials

navigation menu?

We can create a tabbed navigation menu by making a basic unordered list with the .nav
base class and the .nav-tabs class.
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain briefly how a navbar works.

• A navbar is an eminent feature to make a responsive meta component that works as

navigation headers for your application and site.

• In the mobile view, the navbar collapses and becomes horizontal as the available
viewport width increases.

• There are various types of navbars available in Bootstrap

• fixed-top
• fixed-bottom
• Default
• sticky-top
<nav class="navbar navbar-expand-lg bg-light">

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What is a Button Group, and what is the © ARC Tutorials

class for a basic Button Group?

Group a series of buttons together on a single line or stack them in a vertical column.

Multiple buttons can be placed together on a single line using button groups. You can
use this to group objects together, such as alignment buttons.

The .btn-group class is used for basic button groups.

<div class="btn-group" role="group" aria-label="Basic example">

<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com
 © ARC Tutorials
What is breadcrumb?

• Breadcrumb is an efficient way to show hierarchy-based information for a site.

• This can show the information like published date, categories or tags in a blog, etc.
• It may also tell the user about the current page location within a navigational
hierarchy.
• We can use the .breadcrumb class to create a breadcrumb and .breadcrum-item for
creating the items inside the breadcrumb.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
What are badges in Bootstrap?

• Badges can be used as part of links or buttons to provide a counter.

• Badges are small count and labelling components.
• We use the .badge class and a contextual class (.badge-*) to create a badge.

<button type="button" class="btn btn-primary">

Notifications <span class="badge text-bg-secondary">4</span>

</button>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 How can we make an image responsive © ARC Tutorials

in Bootstrap?
• Add the .img-fluid class to the <img> tag to make an image responsive.
• It applies the styles, .max-width: 100% and height: auto.
• So it can match nicely with the parent element.

<img src="..." class="img-fluid" alt="...">

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
What is a scrollspy in Bootstrap?

Automatically update Bootstrap navigation or list group components based on scroll

position to indicate which link is currently active in the viewport.

<a class="nav-link" href="#scrollspyHeading1">First</a>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
What is a scrollspy in Bootstrap?

Automatically update Bootstrap navigation or list group components based on scroll

position to indicate which link is currently active in the viewport.

<a class="nav-link" href="#scrollspyHeading1">First</a>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
What is a Toast in Bootstrap?

Push notifications to your visitors with a toast, a lightweight and easily customizable
alert message.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
How can one create an alert in Bootstrap?

Create a wrapper <div> and add a class of .alert and one of the contextual classes to
create a basic alert (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger,
.alert-primary, .alert-secondary, .alert-light or .alert-dark).

<div class="alert alert-primary" role="alert">

A simple primary alert—check it out!

</div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What is a bootstrap card and how would © ARC Tutorials
you create one?
In Bootstrap, a card is a bordered box with padding surrounding its content.

It has options for headers, footers, content, and colors, among other things.
<div class="card" style="width: 18rem;">

<img src="..." class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

</div>

</div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What are the two types of spinners that © ARC Tutorials

you can create using Bootstrap?

We can create 2 types of spinners in Bootstrap

1. Spinner Border
2. Spinner Grow
Use the .spinner-border class to make a spinner/loader.

<div class= "spinner-border" ></div>

If you want the spinner/loader to grow instead of "spin", use the .spinner-grow class.

<div class= "spinner-grow" ></div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain Input Groups in Bootstrap

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom
selects, and custom file inputs.

<div class="input-group mb-3">

<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 Bootstrap table and various classes that © ARC Tutorials
can change the appearance of the table.
● A basic Bootstrap table features horizontal divisions and light padding.
● The .table class gives a table some basic styling.
● The .table-striped class gives zebra stripes to the table.
● The .table-bordered class adds borders to the table and cells on all sides.
● On table rows, the .table-hover class adds a hover effect (grey background color).
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
</tr>
</thead>
<tbody>
<tr> Get the Interview Questions Answers as PDF copy at
<th scope="row">1</th>
<td>Mark</td> https://arctutorials.gumroad.com
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
 How can you implement Media Queries © ARC Tutorials

in Bootstrap?
To implement custom media queries in Bootstrap we can implement the below code:

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)

Get the Interview Questions Answers as PDF copy at
@media (min-width: 768px) { ... } https://arctutorials.gumroad.com
// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)

@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)

@media (min-width: 1400px) { ... }

 © ARC Tutorials
Name some alternatives to Bootstrap.

There are lots of alternatives. Some of them are shown in the below list.

● Foundation
● Bulma
● Materialize
● Material Design Lite
● Skeleton
● Pure CSS
● Semantic UI
● Uikit

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What are the different button styles in © ARC Tutorials

Bootstrap?

In bootstrap there are seven styles which we can use with the bootstrap button.
● .btn-default.
● .btn-primary
● .btn-success
● .btn-info
● .btn-warning.
● .btn-danger.
● .btn-link.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
What is a progress bar in bootstrap?

Progress bar is used with HTML tag style in HTML element using progress keyword.

In bootstrap we used html5 progress with CSS classes that have special features in
bootstrap, that is only made for the progress bar.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 Explain contextual classes that are used © ARC Tutorials
with the progressive bar in bootstrap?

The contextual classes used with progressive bar are as follows.

● Progress-success
● Progress-info
● Progress-warning
● Progress-danger

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain Collapse in Bootstrap?

• Toggle the visibility of content across your project with a few classes and our
JavaScript plugins.
• Acts like accordion style collapse / show or hide
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false"
aria-controls="collapseExample">

Button with data-bs-target

</button>

<div class="collapse" id="collapseExample">

<div class="card card-body">

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

</div>

</div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain Gutters in Bootstrap?

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap
grid system.

Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical
gutters, and all gutters

Horizontal gutters -> gx-

Vertical Gutters -> gy

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 What are the default Bootstrap text © ARC Tutorials

settings?
The default font size in Bootstrap 4 is 16px, with a line-height of 1.5.

The default font family is "Helvetica Neue," which includes Helvetica, Arial, and other
sans-serif fonts.

Margin-top: 0 and margin-bottom: 1rem are also set on all <p> elements (16px by
default).

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 Explain types of lists supported by © ARC Tutorials

Bootstrap.

Bootstrap supports three types of lists such as:

1. Ordered lists − An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.
2. 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.
3. 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>.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 How will you create a tabbed, pills, and
© ARC Tutorials
vertical pills navigation menu in
Bootstrap?
1. For creating a tabbed navigation menu

a. Start with a basic unordered list with the .nav base class

b. Now, add the .nav-tabs class

2. For creating a pills navigation menu

a. Start with a basic unordered list with the .nav base class

b. Now, add the .nav-pills class

3. For creating a vertical pills navigation menu

a. Stack the pills vertically using the .nav-stacked class

b. Now, add the .nav and .nav-pills classes

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com
 © ARC Tutorials
Explain Floating Labels in Bootstrap?

Create beautifully simple form labels that float over your input fields.

<div class="form-floating mb-3">

<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">

<label for="floatingInput">Email address</label>

</div>

<div class="form-floating">

<input type="password" class="form-control" id="floatingPassword" placeholder="Password">

<label for="floatingPassword">Password</label>

</div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain Validations in Bootstrap Forms?

• Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default

behaviors or custom styles and JavaScript.

• HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>,
<select>, and <textarea> elements.
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</form>
Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com
 © ARC Tutorials
Explain Range in Bootstrap Forms?

• Use our custom range inputs for consistent cross-browser styling and built-in customization.

• Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the

value) are both styled to appear the same across browsers

<label for="customRange1" class="form-label">Example range</label>

<input type="range" class="form-range" id="customRange1">

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain Figure in Bootstrap?

• Anytime you need to display a piece of content—like an image with an optional caption, consider using a

<figure>

• Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the

HTML5 <figure> and <figcaption> elements

<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain z-index in Bootstrap?

• While not a part of Bootstrap’s grid system, z-indexes play an important part in how our components overlay

and interact with one another.

• To bring components on top of other components we use z-index property

• To handle overlapping borders within components (e.g., buttons and inputs in input groups), Bootstrap use

low single digit z-index values of 1, 2, and 3 for default, hover, and active states.

• On hover/focus/active, Bootstrap bring a particular element to the forefront with a higher z-index value to

show their border over the sibling elements.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain offcanvas in Bootstrap?

• Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our

JavaScript plugin.

• Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or

bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements

you toggle, and data attributes are used to invoke our JavaScript.

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain placeholders in Bootstrap?

• We can use loading placeholders for your components or pages to indicate something may still be loading.

• We will use the class .placeholder-glow

<div class="card" aria-hidden="true">

<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain clearfix in Bootstrap?

• Quickly and easily clear floated content within a container by adding a clearfix utility.

• Easily clear floats by adding .clearfix to the parent element. Can also be used as a mixin.

<div class="clearfix">...</div>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain Text truncation in Bootstrap?

• Truncate long strings of text with an ellipsis.

• We will use the class .text-truncate for the same

<!-- Block level -->

<div class="row">
<div class="col-2 text-truncate">
This text is quite long, and will be truncated once displayed.
</div>
</div>

<!-- Inline level -->

<span class="d-inline-block text-truncate" style="max-width: 150px;">
This text is quite long, and will be truncated once displayed.
</span>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials
Explain Tooltips in Bootstrap?

• Tooltips rely on the third party library Popper for positioning. You must include popper.min.js before
bootstrap.js, or use one bootstrap.bundle.min.js which contains Popper.
• Tooltips are opt-in for performance reasons, so you must initialize them yourself.
• Tooltips with zero-length titles are never displayed.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">

Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on
right">
Tooltip on right
</button>

Get the Interview Questions Answers as PDF copy at https://arctutorials.gumroad.com

 © ARC Tutorials

Bootstrap
Thank you. All the best.
Get PDF copy at https://arctutorials.gumroad.com