Scribd
Upload
45 views

Assignment No 10

This document contains code for a web page that demonstrates various Bootstrap components including buttons, dropdowns, breadcrumbs, and a modal form. Key elements include buttons of different sizes, single button dropdown menus, a breadcrumb navigation bar, and a registration modal popup form. The page utilizes Bootstrap CSS and JavaScript for styling and interactive elements.

Uploaded by

Anurag Pawar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views

Assignment No 10

This document contains code for a web page that demonstrates various Bootstrap components including buttons, dropdowns, breadcrumbs, and a modal form. Key elements include buttons of different sizes, single button dropdown menus, a breadcrumb navigation bar, and a registration modal popup form. The page utilizes Bootstrap CSS and JavaScript for styling and interactive elements.

Uploaded by

Anurag Pawar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Name:

College:

Class:

Course:

Assignment No. 10
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOOTSTRAP</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-
894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/
3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsO
MqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-
referrer" />

<!-- Latest compiled and minified CSS -->


<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/
K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->


<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<body>
<div class="jumbotron" style="background-color: purple;color: ghostwhite;"><h2
align="center"><strong>BOOTSTRAP</strong></h2></div>
<div class="container">
<div class="row">
<a href="#"><div class="glyphicon glyphicon-home" style="font-size: 30px;margin-
right: 20px;"></div></a>
<a href="#"><div class="glyphicon glyphicon-user" style="font-size: 30px;margin-right:
20px;"></div></a>
<a href="#"><div class="glyphicon glyphicon-repeat" style="font-size: 30px;margin-
right: 20px;"></div></a>
<a href="#"><div class="glyphicon glyphicon-qrcode" style="font-size: 30px;margin-
right: 20px;"></div></a>
<a href="#"><div class="glyphicon glyphicon-print"style="font-size: 30px;margin-right:
20px;"></div></a>
<a href="#"><div class="glyphicon glyphicon-map-marker" style="font-size:
30px;margin-right: 20px;"></div></a>
<i class="fas fa-award fa-2x" style="margin-left: 650px;"></i>
<i class="fas fa-gift fa-2x" style="margin-left:30px"></i>
<i class="fas fa-star fa-2x" style="margin-left:30px"></i>
<hr>
</div>

<h2 align="center" style="background-color:deepskyblue;">Button Sizing</h2>


<center>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-primary">Reset</button>
<button type="button" class="btn btn-info">Next</button>
<button type="button" class="btn btn-warning">Back</button>
<button type="button" class="btn btn-default">Reload</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div><br>

<div class="btn-group" role="group" aria-label="..." style="margin-top: 15px;">


<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-primary">Reset</button>
<button type="button" class="btn btn-info">Next</button>
<button type="button" class="btn btn-warning">Back</button>
<button type="button" class="btn btn-default">Reload</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div><br>

<div class="btn-group btn-group-sm" role="group" aria-label="..."


style="margin-top: 15px;">
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-primary">Reset</button>
<button type="button" class="btn btn-info">Next</button>
<button type="button" class="btn btn-warning">Back</button>
<button type="button" class="btn btn-default">Reload</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div><br>

<div class="btn-group btn-group-xs" role="group" aria-label="..." style="margin-


top: 15px;">
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-primary">Reset</button>
<button type="button" class="btn btn-info">Next</button>
<button type="button" class="btn btn-warning">Back</button>
<button type="button" class="btn btn-default">Reload</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div><br><br><hr>

<h2 style="background-color:lavender;">Single button dropdown</h2>


<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Info <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<!-- Single button -->


<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Warning <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><br><br><hr>

<h2 style="background-color:plum;">Breadcrumbs</h2>
</center>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol><br><hr>

<h2 align="center"style="background-color:cornsilk;">Model</h2>
<div class="row">
<!-- Button trigger modal --><center>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#abc">
Register Here
</button></center>

<!-- Modal -->


<div class="modal fade" id="abc" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:papayawhip;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-
hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel"><b>Registration</b></h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Name:</label>
<input type="text" name="" placeholder="Name" class="form-
control">
</div>
<div class="form-group">
<label>Email ID:</label>
<input type="EMAIL" name="" placeholder="Email ID"
class="form-control">
</div>
<div class="form-group">
<label>Contact No:</label>
<input type="tel" maxlength="10" name="phone"
placeholder="Contact No" class="form-control">
</div>
<div class="form-group">
<label>Qualification:</label>
<input type="checkbox" name="">SSC
<input type="checkbox" name="">HSC
<input type="checkbox" name="">Diploma
<input type="checkbox" name="">BE
<input type="checkbox" name="">ME
</div>
<div class="form-group">
<label>Select Gender:</label>
<input type="radio" name="Gender">YES
<input type="radio" name="Gender">NO
</div>
<div class="form-group">
<label>City:</label>
<select name="City" class="form-control">
<option value="">Select City</option>
<option value="Nashik">Nashik</option>
<option value="Malegaon">Malegaon</option>
<option value="Pune">Pune</option>
<option value="Mumbai">Mumbai</option>
<option value="Satana">Satana</option>
</select>
</div>
<div class="form-group">
<label>DOB:</label>
<input type="date" name="DOB" class="form-control">
</div>
<div class="form-group">
<label>Resume:</label>
<input type="file" name="Resume" class="form-control">
</div></center></form>

<div class="modal-footer" style="background-color:papayawhip;">


<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<br>

<div class="row">

<!-- Button trigger modal --><center>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#xyz">
Read
</button></center>

<!-- Modal -->


<div class="modal fade" id="xyz" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="panel panel-primary">
<div class="panel panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-
hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel"><b>HTML</b></h4>
</div>
<div class="modal-body">
<div class="panel panel-body">
The HyperText Markup Language, or HTML is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by technologies such as
Cascading Style Sheets (CSS) and scripting languages such as JavaScript. ... HTML elements are
the building blocks of HTML pages.
</div>
</div>
<div class="panel panel-footer">
<button type="button" class="btn btn-success">Got it</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Output:

You might also like