Scribd
Upload
46 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 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
We take content rights seriously. If you suspect this is your content, claim it here.
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