Explore topic-wise InterviewSolutions in .

This section includes InterviewSolutions, each offering curated multiple-choice questions to sharpen your knowledge and support exam preparation. Choose a topic below to get started.

1.

Flexbox - Bootstrap

Answer»

The main difference between Bootstrap 3 and Bootstrap 4 & 5 is that Bootstrap 5 now uses flexbox, instead of floats, to handle the layout.

Bootstrap 5 provides us with classes to let us use flexbox easily.

flex-*-column flex column to display content vertically (top to bottom). Responsive variations are sm,md,lg,xl. <div class="d-flex flex-column"> <!--default size-->

<div class="d-flex flex-sm-column">...</div>
flex-*-column-reversereverse the order of display of columns. <div class="d-flex flex-column-reverse">
flex-*-row display content horizontally one after the other (side-by-side). Responsive variations are sm,md,lg,xl. <div class="d-flex flex-row">

<div class="d-flex flex-md-row">...</div>
flex-*-row-reversereverse the order of display of rows. <div class="d-flex flex-row-reverse">

<div class="d-flex flex-lg-row-reverse">...</div>
flex-*-nowrap default setting to display text in the flex container. <div class="d-flex flex-nowrap">..</div>
flex-*-wrap add wrap functionality. Responsive variations – sm, ml, lg, xl <div class="d-flex flex-wrap"> ... </div>

<div class="d-flex flex-xl-wrap"> ... </div>
flex-*-wrap-reversereverse order display. <div class="d-flex flex-wrap-reverse"> ... </div>

<div class="d-flex flex-xl-wrap-reverse"> ... </div>
flex-fill fill the background with different colors – primary, secondary, info etc… <div class="p-2 flex-fill bg-*">Flex item</div>
flex-*-grow-1 lets the specified element take the entire available space. <div class="p-2 flex-grow-1 bg-primary">Flex grow</div>
flex-*-grow-0 don’t let the items grow on different screens <div class="p-2 flex-grow-0 bg-info">dont let me grow</div>
flex-*-shrink-1 lets the item shrink. <div class="p-2 flex-shrink-1 bg-danger">Flex shrink</div>
flex-*-shrink-0 no shrinking on different screens. <div class="p-2 flex-shrink-1 bg-danger">Flex shrink</div
justify-content-*-startchange the alignment of the items (justify to left). <div class="d-flex justify-content-start">

<div class="d-flex justify-content-sm-start">...</div>
justify-content-*-end justify to the end (right). <div class="d-flex justify-content-end">

<div class="d-flex justify-content-sm-end">...</div>
justify-content-*-center center justify the items. <div class="d-flex justify-content-center">

<div class="d-flex justify-content-sm-center">...</div>
justify-content-*-between justify between the items. <div class="d-flex justify-content-between">

<div class="d-flex justify-content-sm-between">...</div>
justify-content-*-around justify space around the items. <div class="d-flex justify-content-around">

<div class="d-flex justify-content-sm-around">...</div>
align-content-*-startcontrol vertical alignment to start (default). <div class="d-flex flex-wrap align-content-start">

<div class="d-flex align-content-sm-start">...</div>
align-content-*-endalign content to end. <div class="d-flex flex-wrap align-content-end">

<div class="d-flex align-content-sm-end">...</div>
align-content-*-centeralign content to the center. <div class="d-flex flex-wrap align-content-center">

<div class="d-flex align-content-sm-center">...</div>
align-content-*-around align space around items. <div class="d-flex flex-wrap align-content-around">

<div class="d-flex align-content-sm-around">...</div>
align-content-*-stretch stretch individual flexbox items. <div class="d-flex flex-wrap align-content-stretch">

<div class="d-flex align-content-sm-stretch">...</div>
align-items-*-baselinealign-items with respect to baseline. <div class="d-flex flex-wrap align-items-baseline">

<div class="d-flex align-items-sm-baseline">...</div>
align-items-*-stretchstretch items to the full width of the flex container. <div class="d-flex align-items-stretch">

<div class="d-flex align-items-sm-stretch">...</div>
align-self-*-startself-align individual flex items to start (default). <div class="align-self-start">flex item align</div>

<div class="align-self-md-start">...</div>
align-self-*-end self-align individual flex item to end. <div class="align-self-end">flex item align</div>

<div class="align-self-md-end">...</div>
align-self-*-centerself-align individual flex item to centre. <div class="align-self-center">flex item align</div>

<div class="align-self-md-center">...</div>
align-self-*-baselineself-align individual flex item to baseline. <div class="align-self-baseline">flex item align</div>

<div class="align-self-md-baseline">...</div>
align-self-*-stretch stretch to full width <div class="align-self-stretch">flex item align</div>

<div class="align-self-md-stretch">...</div>
order-*-#change the order of display of particular flex items from 0-12. <div class="order-12">first item</div> <!--will be displayed 12th-->

<div class="order-sm-3">ordered flex item</div>
Conclusion:

In this bootstrap cheat sheet, you can find all the information you need while learning HTML and front-end development. Furthermore, it can be used as a reference when building a project using the popular HTML framework.

  • Refer Interview Preparation Guides
Discussion
2.

Spacing - Bootstrap

Answer»

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

m-1 / m-*-# spaced div tags with margin on all sides; star ranges from 0 space to 6 spaces. <div class="m-4 bg-success d-inline-block">div with 4 spaces</div>
mt-1 / mt-*-# the margin on top. <div class="mt-3 bg-warning d-inline-block">Spaced top margin</div>
mr-1 / mr-*-# the margin on right. <div class="mr-3 bg-warning d-inline-block">Spaced right margin</div>
mb-1 / mb-*-# bottom margin. <div class="mb-3 bg-warning d-inline-block">Spaced bottom margin</div>
ml-1 / ml-*-# left margin. <div class="mx-3 bg-primary d-inline-block">Spaced x axis margin</div>
mx-1 / mx-*-# left and right (x-axis) margin. <div class="mx-3 bg-primary d-inline-block">Spaced x axis margin</div>
my-1 / my-*-#top and bottom (y-axis) margin. <div class="my-3 bg-primary d-inline-block">Spaced y axis margin</div>
m-n1 / m-*-n# negative spacing (change of direction) – can be any of the above – left, right, top, bottom, x, y. <div class="m-n5 bg-primary d-inline-block">Negative spacing</div>
p-1 / p-*-# padding on all sides. <div class="pt-3 bg-danger d-inline-block">Padding on top with box size 3</div>
pt-1 / pt-*-# padding on top. <div class="pt-3 bg-danger d-inline-block">Padding on top with box size 3</div>
pr-1 / pr-*-# padding on right. <div class="pr-3 bg-danger d-inline-block">Padding on right with box size 3</div>
pb-1 / pb-*-# padding on bottom. <div class="pb-3 bg-danger d-inline-block">Padding on bottom with box size 3</div>
pl-1 / pl-*-# padding on left. <div class="pl-3 bg-danger d-inline-block">Padding on left with box size 3</div>
px-1 / px-*-# padding on left and right (x-axis). <div class="px-3 bg-danger d-inline-block">Padding on left and right with box size 3</div>
py-1 / py-*-#padding on top and bottom (y-axis). <div class="py-3 bg-danger d-inline-block">Padding on top and bottom with box size 3</div>
Discussion
3.

Sizing - Bootstrap

Answer»

With width and height utilities, you can easily make an element as wide or tall as its parent.

w-* Utility class that makes an element's width a percentage of its parent's width. <div class="w-25 p-3" style="background-color: blue">Width is 25%, size is 3</div>
h-* It provides customized height for the div tag. <div class="h-50 d-inline-block" style="background-color: red">Height= 50%</div>
mw-* It provides a maximum width. <div class="mw-100 bg-success">Maximum Width=100%</div>
mh-*It provides maximum height. <div class="mw-75 bg-success">Maximum height=75%</div>
Discussion
4.

Colors - Bootstrap

Answer»

Use a handful of colour utility classes to convey meaning through color.Supports styling links with hover states, too.

Example:

bg-primaryIt is used to add a blue background. <div class="bg-primary text-white">text is white and background is blue</div>
bg-secondaryIt is used to add a grey background. <div class="bg-secondary"> background is grey</div>
bg-successIt is used to add a green background. <div class="bg-success"> background is green</div>
bg-infoIt is used to add a light blue background. <div class="bg-info"> background is light blue</div>
bg-warningIt is used to add a yellow background. <div class="bg-warning"> background is yellow</div>
bg-danger  It is used to add a red background. <div class="bg-danger"> background is red</div>
bg-light It is used to add a light (white or light grey) background. <div class="bg-light"> background is white/light grey</div>
bg-darkIt is used to add a black (dark) background. <div class="bg-dark"> background is black</div>
bg-white It is used to add a white background. <div class="bg-white"> background is white</div>
text-* Specific colours for the text are used. There are different types of values: primary, secondary, info,  success, danger, warning,  white, light, dark. <p class="text-primary">Text color is blue</p>
<p class="text-success">Text color is green</p>
Discussion
5.

Display - Bootstrap

Answer»

We can quickly Quickly and responsively toggle the display value of components and more with the help of display utilities.

d-*-blockdisplay block with a specific styling. <span class="d-block bg-primary">display block</span>

<span class="d-sm-block bg-success">display small block</span>
d-*-flex display flex items with a specific styling. <div class="d-flex bg-secondary">...</div>

<span class="d-md-flex bg-info">...</span>
d-*-inlineinline display with a specific styling. <div class="d-inline bg-secondary">...</div>
d-*-inline-block display inline-block. <div class="d-inline-block bg-secondary">...</div>

<div class="d-lg-inline-block bg-info">...</div>
d-*-inline-flex styling for inline flex. <div class="d-inline-flex bg-secondary">...</div>

<div class="d-lg-inline-flex bg-info">...</div>
d-*-none hide display for certain elements (same as display: none). <div class="d-none">...</div>

<div class="d-lg-none">...</div>
d-*-tabledisplay styling for the table. <div class="d-table">...</div>

<div class="d-lg-table">...</div>
d-*-table-cell styling for a table cell. <div class="d-table-cell">...</div>

<div class="d-lg-table-cell">...</div>
d-print-...controls how elements have to be displayed while printing. Value can be none, block, inline, inline-block, table, table-row,table-cell, flex, inline-flex. <div class="d-print-block">Display content as block on print</div>
Discussion
6.

Border Utilities - Bootstrap

Answer»

You can quickly style an element's border and border-radius by using border utilities. These are great for images, buttons, or any other element.

Example:

 

border  Used to add a border. <span class="border border-dark">Border bootstrap</span>
border-*-0 It represents no border. Variations – border-top-0 represents no border on top, in similar way bottom, right and left are possible. <span class="p-1 border border-primary border-0">Border bootstrap</span>

<span class="p-1 border border-primary border-right-0">Border bootstrap</span>
border-* It allows you to add/remove borders on a side as well as change the colour of the borders.border-(light, dark primary, secondary, transparent, white, warning, success, info, danger, 0, top-0, right-0, left-0, bottom-0). <span class="border border-primary">Border bootstrap</span>
roundedrounded refers to the rounded image border. <img class="rounded" src="/images/myimg.png">
rounded-sm rounded-sm refers to small rounded edges. <img class="rounded-sm" src="/images/myimg.png">
rounded-lgrounded-lg refers to large rounded edges. <img class="rounded-lg" src="/images/myimg.png">
rounded-circle rounded-circle refers to a rounded circular image. <img class="rounded-circle" src="/images/myimg.png">
rounded-0  rounded-0 refers tono rounding (sharp edges). <img class="rounded-0" src="/images/footer-bootstrap.png">
Discussion
7.

Tables - Bootstrap

Answer»

Using tables in bootstrap, you can aggregate a huge amount of data and present it in a clear, logical manner.

You just need to add the base class .table, then extend with custom styles or modifier classes.

Example:

Basic Table bootstrap 4

The .table class is used to add basic styling (light padding and only horizontal dividers) to a table:

FirstnameLastnameEmail
Lavishmaliklavishmalik28@gmail.com
Johndellingerjogndellinger01@gmail.com
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table bootstrap 4</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lavish </td>
<td>malik</td>
<td>lavishmalik28@gmail.com</td>
</tr>
<tr>
<td>John</td>
<td>dellinger</td>
<td>jogndellinger01@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
tableThe table is used for adding a basic table. <table class="table">...table bootstrap</table>
thead-lightProvides a light header background for the table header. <thead class="thead-light">
thead-darkProvides a dark header background for the table header. <thead class="thead-dark">
table-striped Used for alternate dark and light table backgrounds. <table class="table table-striped">
table-borderedruled table. <table class="table table-bordered">
table-borderlessRemove borders. <table class="table table-borderless">
table-hover The .table-hover class is used to add a hover effect on table rows. <table class="table table-hover">
table-sm Table with a small size. <table class="table table-sm">
table-*-responsive Makes a table responsive by cropping a wide table and making it scrollable horizontally.Can be sm,md,lg or xl. <table class="table table-sm-responsive"><!-- ... table content --></table>
table-secondary(bootstrap table styles)It adds blue background to table. <tr class="table-primary">
table-success(bootstrap table styles)It adds specific colour background to the table. <tr class="table-primary">
table-info (bootstrap table styles)It adds blue background to the table. <tr class="table-info">
table-warning(bootstrap table styles)It adds yellow colour background to table. <tr class="table-warning">
table-danger (bootstrap table styles)It adds red/pink background to table. (bootstrap table styles)It adds red/pink background to table
table-light (bootstrap table styles)It adds light background to table. <tr class="table-light">
table-dark (bootstrap table styles)It adds dark (grey/black) background to table.  <tr cl<tr class="table-light">
Discussion
8.

Navbar - Bootstrap

Answer»

  • The navigation bar is a header that appears at the top of the page.

  • The .navbar should be wrapped in .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bootstrap Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
navbar A header is placed at the top of a webpage to navigate to different elements. <ul class="navbar-nav">
navbar-brand Navbar-brand is used to highlight a brand, main project or logo of the page. <a class="navbar-brand" href="#">InterviewBit</a>
navbar with form navbar with form is used to add form controls in a navigation bar at the top of the webpage. <nav class="navbar navbar-expand-md bg-primary navbar-dark"> <form class="form-inline">
navbar-text For navbar text. <span class="navbar-text">
navbar-dark bg-dark Used to add navigation bar with the dark background; Primary, secondary, success, light, warning, danger, and info are other possibilities. <nav class="navbar navbar-dark bg-dark">
navbar-light Used to add navigation bar with light background. <nav class="navbar navbar-light"></nav>
navbar fixed-topnavbar fixed-top fixes navbar at the top. <nav class="navbar fixed-top navbar-dark">
navbar fixed-bottomFixes navbar at the bottom. <nav class="navbar fixed-bottom navbar-light">
navbar sticky-topNavbar sticks to the top of the page when scrolled over. <nav class="navbar sticky-top navbar-light">
collapse navbar-collapsecollapse navbar-collapse collapse navigation bars. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
navbar-togglerNavbar-toggler is used to add expand/collapse functionality to the navbar. <button class="navbar-toggler" type="button"
Discussion
9.

Jumbotron - Bootstrap

Answer»

This component can increase the size of headings and add a lot of margin for landing page content. For using Jumbotron:  simply create a container with the class of .jumbotron.  


  • A jumbotron was introduced in Bootstrap 3 as a big padded box used to draw attention to special content or information.

  • Jumbotrons are no longer supported in Bootstrap 5.

  • For the same effect, you can use a <div> element with special helper classes combined with a colour class:

JumbotronUsing a jumbotron a big box was created to give focus on some special information. <div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Bootstrap Jumbotron</h1>
<p>Lorem ipsum...</p>
</div>
Discussion
10.

Grid System - Bootstrap

Answer»

  • Bootstrap Grids can be used to build layouts of all shapes and sizes.

  • Bootstrap’s grid system uses a series of containers, rows, and columns to layout and aligns content. It’s built with a flexbox and is fully responsive.

  • The grid system can adapt across all 6 default breakpoints, and any breakpoints you customize. The six default grid tiers are:

    • Extra small (xs)

    • Small (sm)

    • Medium (md)

    • Large (lg)

    • Extra large (xl)

    • Extra extra large (xxl)



container container for the grid. <div class="container">content</div>
container-fluid fluid container for full-width. <div class="container-fluid">full-width container</div>
rowrow elements of the grid. <div class="row">
... column elements for the row
</div>
col-# ( <576px)a column with specified width. <div class="col-2">
<div class="col-4">
<div class="col-8">
col-sm-# ( ≥576px) small columns with specified width. <div class="col-sm-2"> <div class="col-sm-4">
<div class="col-sm-8">
col-md-# ( ≥768px) medium column. <div class="col-md-2">
<div class="col-md-4">
col-lg-# ( ≥992px) large column <div class="col-lg-2">
<div class="col-lg-4">
<div class="col-lg-8">
col-xl-# ( ≥1200px) extra large column. <div class="col-xl-2">
<div class="col-xl-4">
<div class="col-xl-8">
col equal size column. <div class="col">
col-*equal width columns – col-sm, col-md, col-lg, col-xl. <div class="col-xl">
no-guttersremove horizontal padding between columns and margins between rows. <div class="row no-gutters">... column definitions</div>
offset-*-# small, medium, large or extra large offsets with size. <div class="col-3 offset-6"><div class="col-md-3 offset-md-6">
order-# order in which the column should appear. <div class="col order-md-2">Ordered column</div><div class="col order-1">
nested columnscolumns inside column. <div class="row">
<div class="col-sm-10"> Level 1: small column with 10 <div class="row"> <div class="col-8 col-sm-3"> Nested column </div>
<div class="col-4 col-sm-3"> Nested column </div> </div> </div></div>
Discussion
11.

Forms - Bootstrap

Answer»

A form is a common tool of HTML which is used to collect data from the user.Bootstrap allows us to style forms.

Example:

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
form-group When added as a wrapper around each input type or form control, it creates a stacked form with proper margins. <div class="form-group">
form-inline All elements are inline in the form along with left margins <form class="form-inline" action="someactionpage.jsp">
form using the grid uses rows and columns  <form> <div class="row"> <div class="col"> <input type="text" class="form-control" id="login id" placeholder="Enter login id" name="login"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Enter password" name="pwd"> </div></div></form>
form-control form-control is the default class for styling <input>, <select> and <textarea> elements. <input type="password" class="form-control" ....
form-control-lglarge size <input type="password" class="form-control-lg" ....
form-control-sm small size  <input type="password" class="form-control-sm" ....
form-control-file form-control-file is used to upload a file <input type="file" class="form-control-file" id="formcontrolfileupload">
form-control-plaintext to have read only contents in the form without losing the styling. <input type="text" readonly class="form-control-plaintext" id="defaulttext" value="someexample@gmail.com">
form-control-range Form-control-range is used to include range element. <input type="range" class="form-control-range">
form-checkForm-check is used for creating a checkbox input. <div class="form-group form-check">
<input class="form-check-input" type="checkbox" name = "Agree">
disabled items disabled items add items that cannot be clicked. <fieldset disabled> <div class="form-group">
readonlyReadonly adds read only text. <input class="form-control" type="text" placeholder="I am a read only text" readonly>
Discussion
12.

Dropdowns - Bootstrap

Answer»

Dropdowns are toggleable, contextual overlays that display lists of links and more. They allow the user to choose one value from a predefined list.

Example:



Dropdown button for bootstrap


Bootstrap cheatsheet
Bootstrap 5 cheatsheet
Bootstrap 4 cheatsheet

 

 <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button for bootstrap
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Bootstrap cheatsheet</a>
<a class="dropdown-item" href="#">Bootstrap 5 cheatsheet</a>
<a class="dropdown-item" href="#">Bootstrap 4 cheatsheet</a>
</div>
</div>
dropdown Using this class, you can add a dropdown to the navbar, tabs, and pills so that you can display additional navigation. <div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="1″ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bootstrap Dropdown Button</button><div class="dropdown-menu" aria-labelledby="1″><a class="dropdown-item" href="#!">Bootstrap Link1</a><a class="dropdown-item" href="#!">Bootstrap Link2</a></div></div>
dropright dropright is used to display the dropdown menu on the right side. <div class="dropdown dropright">
dropleft dropleft is used to display the dropdown menu on the left side.  <div class="dropdown dropleft">
dropdown-header Dropdown-header is used to add headers inside the dropdown menu. <li class="dropdown-header">Dropdown header A</li>
dropdown-divider Dropdown-divider creates a thin horizontal border between links to separate them.  <div class="dropdown-divider"></div>
dropdown-menu-rightAdds the default styles for the dropdown menu container. <div class="dropdown-menu dropdown-menu-right">
Discussion
13.

Collapse - Bootstrap

Answer»

With  JavaScript plugins, you can change the visibility of content across your project with the help of collapse.

Example:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>collapse in bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
<h2>collapse in bootstrap</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Learn bootstrap
</div>
</div>

</body>
</html>
collapseDisplay and hide content whenever needed. <p> <a class="btn btn-primary" data-toggle="collapse" href="#expandcollapse" aria-expanded="false" aria-controls="expandcollapse"> Collapse in bootstrap</a></p><div class="collapse" id="expandcollapse"> <div class="card card-body"> collapse in bootstrap</div></div>
Accordion bootstrap 4Used to Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#item1">
Item #1 </a> </div> <div id="item1" class="collapse show" data-parent="#accordion"> <div class="card-body"> text for expand/collapse </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#item2">
Item #2 </a> </div> <div id="item2" class="collapse" data-parent="#accordion"> <div class="card-body"> Collapse in bootstrap </div> </div></div></div>
Discussion
14.

Carousel- Bootstrap

Answer»

A slideshow component that cycles through elements - images or slides of text - like a carousel.

carousel slide Carousel slide adds animation and CSS transition effect. <div class="carousel slide" data-ride="carousel">
carousel-fade Carousel-fade is used to animate the slide transition with a crossfade instead of a slide. <div class="carousel slide carousel-fade" data-ride="carousel">
carousel-innerCarousel-inner contains individual slides to the carousel. <div class="carousel-inner">
carousel-itemThe wrapper class is applied to each individual carousel item in the div. <div class="carousel-inner">
carousel-captionCarousel-caption adds caption for individual slides (carousel-item). <div class="carousel-caption">
Discussion
15.

Pagination - Bootstrap

Answer»

Pagination helps to display the different page numbers of a website. With the help of paginators, we can jump to any page of the website.

pagination Add basic pagination to display only certain records on one page. <ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
page-item disabled To disable a particular page number or item from being clicked. <li class="page-item disabled">
<a class="page-link" href="#!" tabindex="-1">Previous</a> </li>
page-item activeTo indicate the currently active page item. <li class="page-item active"><a class="page-link" href="#">3</a></li>
pagination-lg Display larger size pagination blocks. <ul class="pagination pagination-lg">
pagination-smDisplay smaller size pagination blocks. <ul class="pagination pagination-lg">
Discussion
16.

Cards - Bootstrap

Answer»

We have cards in Bootstrap that are simple containers that can hold images and descriptions. Below are some of the functions associated with a card.

card Inside the div, each card is wrapped inside the card class. <div class="card">
card-body card-body holds the content of the card. <div class="card-body">InterviewBit</div>
card-title Card-title holds the title of the card. <h2 class="card-title">InterviewBit</h2>
card-subtitle Card-subtitle is used for adding subtitles. <h6 class="card-subtitle"> InterviewBit</h6>
card-text card text class wraps the container around card text. <p class="card-text">InterviewBit</p>
card-link card-link is used for adding a link to a card. <a href="#!" class="card-link">InterviewBit</a>
card-img-topThe main card image is shown on the top. <a href="#!" class="card-link">InterviewBit</a>
middle image No need to specify the card image class as top or bottom when displaying an image in the middle, just add the image tag. <img src="myimpimage.png">
card-img-bottom Image is displayed after card content. <img class="card-img-bottom" src="bootstrap-container-class.png">
card-img-overlayFor displaying image in the background. <div class="card-img-overlay"><p class="card-text">Welcome to InterviewBit</p> </div>
card-header card-header is used to add header bootstrap for a card. <div class="card"> <div class="card-header"> Head </div> <div class="card-block"><h4 class="card-title">Title</h4><p class="card-text">Welcome to InterviewBit</p></div></div>
card-footer Footer bootstrap for the card. <div class="card"><div class="card-body">
<h5 class="card-title">Welcome to InterviewBit</h5> <p class="card-text">Welcome to InterviewBit</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> text </div></div>
card-columns To the wrapping div of the masonry-like collection of cards, the .card-columns class is added. <div class="card-columns"> card i card ii </div>
card bg-... text-...It is used to style the cards by formatting with different colors. <div class = "card text-<color> bg-<color>"></div>
Discussion
17.

Badges - Bootstrap

Answer»

Bootstrap badges are used for adding additional information.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
<h2>Badges</h2>
<h1>Welcome to InterviewBit<span class="badge bg-secondary">New</span></h1>
</div>

</body>
</html>
Tag NameDescriptionCode
badgeAdd a badge of the same size as the previous parent element. <h1>Heading text <span class="badge badge-secondary">Welcome to InterviewBit</span></h1>
badge-pillBadge-pill is used for making badges more rounded. <span class="badge badge-pill badge-light">Welcome to InterviewBit</span>
badge-primaryBadge-primary is used to add a batch to the primary message. <span class="badge badge-primary">Welcome to InterviewBit</span>
badge-secondaryBadge-secondary is used to add a batch to the secondary message. <span class="badge badge-badge-secondary">Welcome to InterviewBit</span>
badge-successTo display a badge indicating success. <span class="badge bg-success">Welcome to InterviewBit</span>
badge-warningBadge style to indicate a warning. <span <span class="badge bg-success">Welcome to InterviewBit</span>
Badge dangerBadge style to indicate danger. <span class="badge bg-danger">Welcome to InterviewBit</span>
badge-lightBadge style to indicate light background. <span class="badge bg-light text-dark">Welcome to InterviewBit</span>
badge-darkBadge style to indicate dark background. <span c<span class="badge bg-light text-dark">Welcome to InterviewBit</span>
Discussion
18.

Breadcrumb - Bootstrap

Answer»

  • Breadcrumbs help users navigate from one page to another without getting lost and let them return to a previous page if they get lost.

  • Breadcrumb navigation provides links back to each previous page the user navigated through and shows the user's current location in a website.

BreadcrumbBreadcrumb is used for indicating the current page's location within a navigational hierarchy. <nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page"> InterviewBit</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"> InterviewBit</a></li>
<li class="breadcrumb-item active" aria-current="page"> Welcome to InterviewBit</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"> InterviewBit</a></li>
<li class="breadcrumb-item"><a href="#"> Welcome to InterviewBit</a></li>
<li class="breadcrumb-item active" aria-current="page">Text</li>
</ol>
</nav>
Discussion
19.

Buttons - Bootstrap

Answer»

Responsive buttons can be built with the latest bootstrap 5.

Example:


Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link

 

btnBtn is used for setting the size and spacing of the button. <button type="button" class="btn">Welcome to InterviewBit</button>
btn-primaryBtn-primary is used to display buttons with a particular style for each class, for example, primary displays buttons with blue background. <button type="button" class="btn">InterviewBit</button>
btn-secondaryBtn-secondary is used to displays buttons with a grey background. <button type="button" class="btn-secondary">InterviewBit</button>
btn-successBtn-success displays button with green background. <button type="button" class="btn-success">InterviewBit</button>
btn-infoUsed for information on a topic like terms and conditions. <button type="button" class="btn-info">InterviewBit</button>
btn-warningBtn-warning is for the yellow background button. <button type="button" class="btn-warning">InterviewBit</button>
btn-dangerBtn-danger is for the red background button. <button type="button" class="btn-danger">InterviewBit</button>
btn-lightBtn-light is a light coloured button. <button type="button" class="btn-light">InterviewBit</button>
btn-darkBtn-dark is a dark coloured button (black). <button type="button" class="btn-dark">InterviewBit </button>
btn-linkBtn-link removes the outer border while maintaining the spacing set by the .btn class. <button type="button" class="btn-link">InterviewBit</button>
btn-outline-primaryA button variation to have outlined buttons instead of a solid background. <button type="button" class="btn-outline-primary">InterviewBit</button>
btn-outline-secondaryA button variation to have outlined buttons instead of a solid background. <button type="button" class="btn-outline-secondary">InterviewBit</button>
btn-outline-successA button variation to have outlined buttons instead of a solid background. <button type="button" class="btn-outline- success ">InterviewBit</button>
btn-outline-infoA button variation to have outlined buttons instead of a solid background. <button type="button" class="btn-outline- info ">InterviewBit</button>
btn-outline-warningA button variation to have outlined buttons instead of a solid background. <button type="button" class="btn-outline- warning "> InterviewBit</button>
btn-outline-dangerA button variation to have outlined buttons instead of a solid background. <button type="button" class="btn-outline- danger "> InterviewBit</button>
btn-outline-lightA button variation to have outlined buttons instead of a solid background. <button type="button" class="btn-outline-light">InterviewBit<button type="button" class="btn-outline-light">InterviewBit</button>outline</button>
btn-outline-darkA button variation to have outlined buttons instead of a solid background. <button type="button" class="btn-outline-light">InterviewBit</button>outline</button>
Discussion
20.

Alerts - Bootstrap

Answer»

  • A bootstrap alert is a message sent to users when something goes wrong.

  • In the case of typos such as incorrect email addresses or credit card numbers, the user will receive an error alert message that prompts them to make corrections.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success! alert</strong>
</div>
<div class="alert alert-info">
<strong>Info! alert</strong>
</div>
<div class="alert alert-warning">
<strong>Warning! alert</strong>
</div>
<div class="alert alert-danger">
<strong>Danger! alert</strong>
</div>
</div>
</body>
</html>

 

Tag NameDescriptionCode
Alert-primary Light blue coloured alerts can be created using alert-primary. <div class="alert alert-primary" role="alert">
InterviewBit
</div>
Alert-secondary Light grey coloured alerts can be created using alert-primary. <div class="alert alert-secondary" role="alert">
InterviewBit
</div>
Alert-SuccessFor successful actions. <div class="alert alert-secondary" role="alert">
InterviewBit
</div>
Alert-DangerFor warning messages. <div class="alert alert-danger" role="alert">
InterviewBit
</div>
Alert-warningSimilar to a warning alert, a danger alert is issued in response to more negative actions (e.g., being locked out after too many password failures). <div class="alert alert-warning" role="alert">
InterviewBit
</div>
Alert-headingAlert-heading is used for adding heading to your alert. <div class="alert alert-info">
<h4 class="alert-heading"><i class="fa fa-info"></i></h4>
</div>
Alert-LightAlert-Light is used to display alerts in a light colour. <div class="alert alert-light" role="alert">
InterviewBit
</div>
Alert-DarkAlert-dark is used to display alerts in dark colours. <div class="alert alert-dark" role="alert">
InterviewBit
</div>
Alert-LinkAlert-link class can be added to any links inside the alert box to create "matching coloured links. <div class="alert alert-primary" role="alert">
WELCOME TO INTERVIEWBIT<a href="#" class="alert-link">Bootstrap link for alert</a>. Give it a click if you like.
</div>
Alert-DismissibleAlert-dismissible is used to close the alert after reading. <div class="alert alert-warning alert-dismissible fade show" role="alert">
InterviewBit
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Discussion
21.

Features of Bootstrap

Answer»

  • Bootstrap is compatible with all modern browsers.

  • Bootstrap is the 3rd highest starred open project on GitHub.

  • Bootstrap provides a powerful grid system

  • Bootstrap provides simple integration

  • Bootstrap has good community support as well as documentation documentation

  • Bootstrap has pre-styled components

  • Bootstrap is easy to learn and use as anybody with just basic knowledge of HTML and CSS can start using Bootstrap.

  • Bootstrap uses a cache system in which we do not have to install it on our computer. After connecting to the internet once, it makes a cache of its files and stores them in the web browser.
Discussion
22.

Uses of Bootstrap

Answer»

  • Bootstrap has built-in classes, so you don't have to create most elements from scratch.

  • It’s open-source.

  • It's very flexible and can be used to create any type of website in no time at all.

  • Websites made with bootstrap are faster, more responsive, and mobile-friendly.

  • Bootstrap supports JavaScript plugins.
Discussion
23.

Bootstrap Skeleton

Answer»
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins, or just specific files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Discussion