Web Development Semester Note 6
Uploaded by
shubhamchakra8821Web Development Semester Note 6
Uploaded by
shubhamchakra8821V5
2021
Unit 3 | Bootstrap | Framework
INSTALLATION
Simple text editor such as Notepad.
Free and powerful editor by Microsoft such as VS code.
Download from browser as per OS.
BASIC OVERVIEW
[Link] Documentation Starter template copy the code
build html file paste the code open in Live Server(VS code)
[Link] Components copy & paste the other content in html file.
| What is Bootstrap |
- Bootstrap is a free front-end framework for faster and easier web development
- Bootstrap is directed to create responsive designs.
- It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons,
navigation, and other interface components.
VERSIONS
Bootstrap 3 Bootstrap 4 Bootstrap 5
2013 2018 2021
| Why Use Bootstrap |
- Easy to use and learning.
- Time saving.
- Responsive features for devices.
- Mobile-fast approach, automatically adjust layout.
- Browser compatibility.
- Open source and free.
PAGE 1
| Create the Basic Web Page with Bootstrap 5 |
<!DOCTYPE html> // HTML5 doctype – required
<html lang="en">
<head>
<title>Bootstrap 5</title>
<meta charset="utf-8">
// For Mobile-fast approach
<meta name="viewport" content="width=device-width,initial-scale=1" >
// Bootstrap’s CSS from CDN
<link href
="[Link]
rel="stylesheet" integrity="sha384-
sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
crossorigin="anonymous">
// Bootstrap’s CSS from CDN
<script
src="[Link]
[Link]" integrity="sha384-
FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
</head>
<body>
// Bootstrap 5 requires a containing element to wrap site contents is
called container.
// .container class provides a responsive fixed width container.
<div class="container">
<h1>First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container. </p>
</div>
// .container-fluid class provides a fixed width container, covering the
entire width of the viewport.
PAGE 2
<div class="container-fluid">
<h1>First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a fixed width container, covering
the entire width of the viewport. </p>
</div>
</body>
</html>
PAGE 3
| Bootstrap Grids |
The Bootstrap grid is a powerful, mobile-first, flexbox-based (layout) system for building responsive
layouts using a 12-column structure.
It works by using a series of containers, rows, and columns.
Key Concepts
Containers: Content must be placed within a .container (fixed width with padding)
or .container-fluid (full width) for proper alignment and padding.
Rows: Rows (.row) are covers for columns and use the columns' padding.
Columns: Content is placed within columns (.col-*). A row can contain up to 12 columns.
Column widths are set in percentages and adapt to the screen size.
The Bootstrap 5 grid system has six classes:
Class Screen Width Suitable for
.col- <576px Extra small devices
.col-sm- ≥576px Small devices
.col-md- ≥768px Medium devices
.col-lg- ≥992px Large devices
.col-xl- ≥1200px Extra large devices
.col-xxl- ≥1400px Extra extra large devices
Example :
<div class="container">
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>
PAGE 4
| Bootstrap Table |
Tables automatically adjust to different screen sizes.
Allows showing/hiding specific columns, headers, and footers, and applying various styling
options like striped rows, borders, and hover effects.
Supports multiple languages.
Includes simple column sorting, single/multiple row selection (with radio or checkboxes), and
searching/filtering capabilities.
A basic Bootstrap 5 table has a light padding and horizontal dividers.
The .table class adds basic styling (light padding and horizontal dividers) to a table.
Example :
<div class="container mt-3">
<h2>Basic Table</h2>
<p>The .table class adds basic styling to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Boot</td>
<td>strap</td>
<td>Bs@[Link]</td>
</tr>
<tr>
<td>Java</td>
<td>Script</td>
<td>js@[Link]</td>
</tr>
</tbody>
</table>
PAGE 5
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Example :
<div class="container mt-3">
<h2>Basic Table</h2>
<p>The .table class adds basic styling to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Boot</td>
<td>strap</td>
<td>Bs@[Link]</td>
</tr>
<tr>
<td>Java</td>
<td>Script</td>
<td>js@[Link]</td>
</tr>
</tbody>
</table>
Hover rows
Add .table-hover class adds a hover effect (grey background color) on table rows, to enable a hover
state on table rows within a <tbody>.
Border Table and Cells
The .table-bordered class adds borders on all sides of the table and the cells.
Dark Table
The .table-dark class adds a black background to the table.
Combine .table-dark and .table-striped to create a dark, striped table.
PAGE 6
Borderless Table
Add .table-borderless for a table without borders.
Table Color
It can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>).
.table-primary Blue: important action
.table-success Green: positive action
.table-danger Red: dangerous or potentially negative change
.table-info Light blue: neutral informative change
.table-warning Orange: warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background
Example :
<div class="container mt-3">
<h2>Basic Table Color</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr class = “table-danger”>
<td>Boot</td>
<td>strap</td>
</tr>
<tr class=”table-success”>
<td>Java</td>
<td>Script</td>
</tr>
</tbody> </table>
PAGE 7
Responsive Table
The .table-responsive class allows to be scrolled horizontally when needed (when it is too long
horizontally).
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px
Example :
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
PAGE 8
| Responsive Images |
Images adapt gracefully to different screen sizes, resolutions, and device capabilities.
Responsive images automatically adjust to fit the size of the screen.
Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height:
auto; to the image so that it scales with the parent element.
This means the image will never be wider than its container, and its height will adjust proportionally.
Example : <img src="..." class="img-fluid" alt="...">
Combine .img-fluid with other classes for enhanced styling and layout control:
Class Name Description
.rounded Adds slightly rounded corners.
.rounded-circle Clips the image into a circular shape.
.img-thumbnail Adds a 1px border and padding, creating a thumbnail
effect.
.float-start Floats the image to the left.
.float-end Floats the image to the right.
.d-block and .mx- Used together to center a block-level image horizontally.
auto
Example :
<img src="path/to/[Link]" class="img-fluid rounded mx-auto d-block" alt="...">
PAGE 9
| Jumbotron |
The jumbotron is a built-in, lightweight, flexible component for showcasing highlight style content.
To grab the user's attention immediately with a large, padded box, often containing a headline, a brief
description, and a call-to-action button.
It indicates a big box for calling extra attention to some special content or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text
inside it.
Use inside <div> with class .jumbotron . To make it full-width without rounded corners,
the .jumbotron-fluid class is used.
.jumbotron-fluid This is a modified jumbotron that occupies the entire horizontal space of its
parent.
Example :
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire
horizontal space of its parent.</p>
</div>
</div>
| Page Header |
To provide a simple section divider for page headings, adding extra space around the heading and a
subtle horizontal line below it.
It was a lightweight styling that primarily affected the spacing and appearance of an <h1> tag within a
container.
The .page-header class adds a horizontal line under the heading (adds some extra space around the
element).
Use inside <div> with class .page-header.
PAGE 10
Example :
<div class="container">
<div class="page-header">
<h1>Page Header</h1>
</div>
<p>This is first text.</p>
<p>This is second text.</p>
</div>
| Buttons |
Bootstrap provides a set of predefined classes for creating stylish, responsive, and functional buttons.
All Bootstrap buttons require a base class, .btn, combined with a modifier class that defines the visual
style, or size.
The button classes can be used on an <a>, <button>, or <input> element.
Button Color :
.btn-primary Blue: Primary action button
.btn-secondary Grey: secondary action button
.btn-danger Red: dangerous or negative action
.btn-success Successful or Positive action (Green)
.btn-info Light blue: informational alert
.btn-warning Yellow / Orange: Warning action
.btn-link Button that looks like a link
.btn-light Light grey button
.btn-dark Dark grey button
Example :
PAGE 11
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-danger" type="submit">Button</button>
<input class="btn btn-warning" type="button" value="Input">
<input class="btn btn-dark" type="submit" value="Submit">
<input class="btn btn-light" type="reset" value="Reset">
Button Outline
class : .btn-outline-* remove all background images and colors on any button.
Example : <button type="button" class="btn btn-outline-primary">Primary</button>
Button Sizes
Bootstrap button provide four sizes;
i. Large .btn-lg
ii. Normal
iii. Small .btn-sm
iv. XSmall .btn-xs
Example:
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Block Level Buttons
It spans the full width of a parent—by adding .btn-block.
Example :
<button type="button" class="btn btn-primary btn-block">ButtonBlock</button>
Active/Disabled Buttons
PAGE 12
An active button appears pressed (with a darker background, border, and an inset shadow).
A disabled button is un-clickable and appears visually inactive (usually grayed out).
For <button> elements :
class .active and the attribute aria-pressed="true" or “false” (for a select/deselect button, or
active/inactive button).
Example :
<button type="button" class="btn btn-primary active" aria-pressed="true">Active
Button</button>
<button type="button" class="btn btn-primary disabled" aria-
pressed="true">Disabled Button</button>
For <a> elements :
class .active and the attribute role=”button” , aria-pressed="true" or “false” (for a select/deselect
button, or active/inactive button).
Example:
<a href="#" class= "btn btn-success" role="button">Success Link</a>
| Button Groups |
A Bootstrap button group is used to group a series of buttons together on a single line or, stack them
vertically.
It is used with class .btn-group within <div> tag to create a button group.
Also it can add class .btn-group-* to size all buttons in a button group.
Example 1 :
<div class="btn-group">
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS</button>
<button type="button" class="btn btn-primary">JavaScript</button>
</div>
Example 2 :
PAGE 13
<div class="btn-group btn-group-sm" >
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS</button>
<button type="button" class="btn btn-primary">JavaScript</button>
</div>
For Vertical button groups: It is used the .btn-group-vertical class instead of .btn-group to
stack buttons in a vertical column.
Example 3 :
<div class="btn-group-vertical" >
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS</button>
<button type="button" class="btn btn-primary">JavaScript</button>
</div>
For Justified button groups: To span the entire width of the screen, It is used the
.btn-group-justified class.
Example 4 :
<div class="btn-group btn-group-justified" >
<div class="btn-group >
<button type="button" class="btn btn-primary">HTML</button>
</div>
<div class="btn-group >
<button type="button" class="btn btn-primary">CSS</button>
</div>
</div>
PAGE 14
Checkbox and Radio Button Groups :
Bootstrap's button styles can be used to create checkbox or radio-style toggling behavior.
This typically requires adding <input type="checkbox"> or <input type="radio"> elements
within <label> elements, and utilizing specific classes like .btn-check in combination with JavaScript
for the toggling functionality.
Example 5 :
<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">Indian</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">Hindu</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-primary" for="btncheck3">Odisha</label>
</div>
Example 6 :
<div class="btn-group" role="group">
<input type="radio" class="btn-check" id="btnradio1">
<label class="btn btn-outline-primary" for="btncheck1">Indian</label>
<input type="radio" class="btn-check" id=" btnradio2">
<label class="btn btn-outline-primary" for="btncheck2">Hindu</label>
<input type="radio" class="btn-check" id=" btnradio3">
<label class="btn btn-outline-primary" for="btncheck3">Odisha</label>
</div>
PAGE 15
| Dropdown Menus |
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined
list.
1. The structure for a basic dropdown involves the menu within an element that has
the .dropdown class within <div> tag.
2. Contains a button or link with .dropdown-toggle class.
3. <ul> with .dropdown-menu class that holds the menu items (<li> with .dropdown-item).
4. It can also include separators using .dropdown-divider class.
5. data-bs-toggle="dropdown" Attribute to activate JavaScript functionality.
Example :
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu"
data-bs-toggle="dropdown" >
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li><a class="dropdown-item" href="#">Google</a></li>
<li><a class="dropdown-item" href="#">Chrome</a></li>
<li><a class="dropdown-item" href="#">Safari</a></li>
</ul>
</div>
| Badges |
Bootstrap badges are small, highly customizable visual components.
It used to display an indicator or count a number, such as the number of unread notifications, new
items, or a status label.
To create a basic badge, .badge class is used.
The badge will automatically scale to match the font size of its parent element.
Example 1:
<h1> heading 1 <span class="badge bg-secondary">New</span></h1>
<h2> heading 2 <span class="badge bg-secondary">New</span></h2>
<h3> heading 3 <span class="badge bg-secondary">New</span></h3>
PAGE 16
Badges can be used as part of links or buttons to provide a counter.
Example 2:
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
A .badge is used to modify and position it in the corner of a link or button.
Example 3 :`
<button type="button" class="btn btn-primary position-relative" >
Notifications <span class="badge position-absoulte bg-secondary">99+
<span class="badge position-absoulte bg-secondary">unread</span>
</span>
</button>
| Labels |
Labels are used to provide additional informations.
.label class is used with following classes; .label-default, .label-primary, .label-success, .label-info, .label-
warning or .label-danger, within a <span> element to create a label.
Example :
<h1> heading 1 <span class="label label-default">New</span></h1>
<h2> heading 2 <span class=" label label-primary">New</span></h2>
<h3> heading 3 <span class=" label label-warning">New</span></h3>
PAGE 17
| List |
The most basic list group is an unordered list with list items and the proper classes.
An <ul> element with class .list-group, and <li> elements with class .list-group-item.
Example 1:
<ul class="list-group">
<li class="list-group-item">item 1</li>
<li class="list-group-item">item 2</li>
<li class="list-group-item">item 3</li>
</ul>
Add .active to a .list-group-item to indicate the current active selection.
Add .disabled to a .list-group-item to make it appear disabled.
Example 2:
<ul class="list-group">
<li class="list-group-item active">item 1</li>
<li class="list-group-item disabled">item 2</li>
<li class="list-group-item">item 3</li>
</ul>
To create a list group with linked items, use <div> instead of <ul> and <a> instead of <li>.
Example 3:
<div class="list-group">
<a href="#" class="list-group-item">item 1</a>
<a href="#" class="list-group-item">item 2</a>
<a href="#" class="list-group-item">item 3</a>
</div>
The classes for coloring list-items are: .list-group-item-success, list-group-item-info, list-
group-item-warning, and .list-group-item-danger are called contextual classes.
Example 4:
<ul class="list-group">
<li class="list-group-item list-group-item-danger">item 1</li>
<li class="list-group-item list-group-item-success">item 2</li>
</ul>
PAGE 18
| Navigation Bar |
A Navbar (Navigation Bar) in Bootstrap is a responsive and customizable header component
used to display:
Website logo / brand name
Navigation links (Home, About, Contact)
Search box
Dropdown menus
Buttons (Login, Register)
A navigation bar is a navigation header that is placed at the top of the page.
It helps users move between pages easily.
Class Purpose
Navbar Base class for navbar
navbar-expand-* Controls when navbar becomes horizontal
(sm, md, lg, xl)
navbar-brand Styles logo or brand name
navbar-nav Container for navigation links
nav-item Wraps each link
nav-link Styles anchor tags
navbar-toggler Button (hamburger icon) for collapsed menu
navbar-toggler-icon Icon inside toggler button
collapse navbar-collapse Collapsible menu content
Dropdown Dropdown inside navbar
dropdown-menu, dropdown-item Dropdown items
PAGE 19
Example :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
PAGE 20
| Forms |
Bootstrap forms provide responsive, and stylish form elements such as input boxes, buttons,
checkboxes, radio buttons, text areas, select menus, and validation messages.
<input>, <textarea>, and <select> elements with class .form-control have a width of 100%.
Bootstrap provides three types of form layouts:
Vertical form (by default)
Horizontal form
Inline form
Use labels and form controls in <div class="form-group"> , add class .form-control to all
textual <input>, <textarea>, and <select> elements.
Example 1 : (Vertical Form)
<form>
<div class="form-group">
<label for="Email1">Email address</label>
<input type="email" class="form-control" id="Email1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="Password1">Password</label>
<input type="password" class="form-control" id="Password1"
placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="Check1">
<label class="form-check-label" for="Check1">Check out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
In an inline form, all of the elements are inline, left-aligned, and the labels are side by side.
class .form-inline is used within the <form> element.
Example 2:
<form class =”form-inline” action=”[Link]”>
<div class="form-group">
<label for="Email1">Email address</label>
<input type="email" class="form-control" id="Email1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="Password1">Password</label>
PAGE 21
<input type="password" class="form-control" id="Password1"
placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="Check1">
<label class="form-check-label" for="Check1">Check out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
A horizontal form means that the labels are aligned next to the input field (horizontal) on large
and medium screens. Class .form-horizontal is used with the <form> element and
class .control-label is used with all <label> elements.
Class Purpose
form-control Styles text boxes, textarea, select
Example : <input type="text" class="form-control">
<textarea class="form-control"></textarea>
form-label Styles labels
Example : <label class="form-label">Name</label>
form-check Wrapper for checkbox/radio button
form-check-input
Example : <div class="form-check">
<input class="form-check-input" type="checkbox">
form-check-label Label for checkbox/radio
Example : <label class="form-check-label">Accept Terms</label>
form-select Styles dropdown , makes beautiful dropdowns
Example : <select class="form-select">
<option>Male</option>
<option>Female</option> </select>
input-group Add add-on icons/text/button before or after input inside one box.
input-group-
Example : <div class="input-group mb-3">
text(text/icon box)
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username"></div>
form-text Small help text under input
Example : <div class="mb-3">
<label class="form-label">Email address</label>
<input type="email" class="form-control">
<div class="form-text">We'll never share your email with anyone
else.</div></div>
mb-* Margin bottom for spacing
Example : <div class="mb-3">
PAGE 22
valid-feedback / Validation messages. Shown when a field is accepted or rejected.
invalid-feedback Example : <form class="was-validated">
<div class="mb-3">
<label class="form-label">Username</label>
<input type="text" class="form-control" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback" >Enterusername.</div>
</div></form>
.form-control-* Input sizes (lg,sm)
Example : <input class="form-control form-control-lg">
.btn Basic button
.btn-*
Example : <button class="btn btn-primary">Submit</button>
is-valid Green border for correct input.
Example : <input class="form-control is-valid">
is-invalid Red border for incorrect input.
Example : <input class="form-control is-invalid">
.was-validated Used on the form tag to activate Bootstrap validation styles after submission.
(applied to <form>)
Example : <form class="was-validated">
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" required>
</div></form>
.input-group Used to add icons/text with input.
.input-group-text Example : <div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username"> </div>
.row +.col inside forms Form Inline (side-by-side)
Example :<div class="row mb-3">
<div class="col">
<input class="form-control" placeholder="First Name">
</div> </div>
PAGE 23
Example 3:
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email
address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with
anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 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>
PAGE 24
Example 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Complete Bootstrap Form</title>
<!-- Bootstrap CDN -->
<link href="[Link]
rel="stylesheet">
</head>
<body class="p-4">
<h2 class="text-center mb-4">Complete Bootstrap Form Example</h2>
<!-- was-validated: activates validation when submitted -->
<form class="was-validated">
<!-- Text Input -->
<div class="mb-3">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" required>
<div class="form-text">Enter your full name as per records.</div>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please enter your name.</div>
</div>
<!-- Email -->
<div class="mb-3">
<label class="form-label">Email Address</label>
<input type="email" class="form-control" required>
<div class="valid-feedback">Email verified!</div>
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
<!-- Input Group -->
<div class="mb-3">
<label class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username" required>
PAGE 25
<div class="invalid-feedback">Username is required.</div>
</div>
</div>
<!-- Phone With Prefix -->
<div class="input-group mb-3">
<span class="input-group-text">+91</span>
<input type="text" class="form-control" placeholder="Phone Number" required>
<div class="invalid-feedback">Enter a valid phone number.</div>
</div>
<!-- Select Box -->
<div class="mb-3">
<label class="form-label">Select Class</label>
<select class="form-select" required>
<option value="">Choose...</option>
<option>Science</option>
<option>Commerce</option>
<option>Arts</option>
</select>
<div class="invalid-feedback">Please choose your class.</div>
</div>
<!-- Radio Buttons -->
<div class="mb-3">
<label class="form-label">Gender</label><br>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender" required>
<label class="form-check-label">Male</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender" required>
<label class="form-check-label">Female</label>
</div>
<div class="invalid-feedback d-block">
Please select gender.
</div>
</div>
PAGE 26
<!-- Checkbox -->
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" required>
<label class="form-check-label">I agree to the terms & conditions</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
<!-- Input Sizes -->
<div class="mb-3">
<label class="form-label">Large Input</label>
<input type="text" class="form-control form-control-lg">
</div>
<div class="mb-3">
<label class="form-label">Small Input</label>
<input type="text" class="form-control form-control-sm">
</div>
<!-- Buttons -->
<button class="btn btn-primary btn-lg">Submit</button>
<button type="reset" class="btn btn-warning btn-sm">Reset</button>
</form>
</body>
</html>
PAGE 27
You might also like
- Bootstrap Framework Overview and Grid SystemNo ratings yetBootstrap Framework Overview and Grid System21 pages
- Bootstrap 5: Responsive Design EssentialsNo ratings yetBootstrap 5: Responsive Design Essentials38 pages
- Bootstrap Framework Overview and FeaturesNo ratings yetBootstrap Framework Overview and Features30 pages
- Bootstrap Dropdowns and Navigation GuideNo ratings yetBootstrap Dropdowns and Navigation Guide5 pages
- Bootstrap 5 Overview and Features GuideNo ratings yetBootstrap 5 Overview and Features Guide40 pages
- Bootstrap Framework Overview and FeaturesNo ratings yetBootstrap Framework Overview and Features10 pages
- Bootstrap 5: A Guide to Responsive Web DesignNo ratings yetBootstrap 5: A Guide to Responsive Web Design27 pages