[go: up one dir, main page]
Scribd
Upload
42 views10 pages

Assignment No 10

Uploaded by

Anurag Pawar

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.

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt

Assignment No 10

Uploaded by

Anurag Pawar
42 views10 pages
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.

Copyright

© © All Rights Reserved

Available Formats

DOCX, PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

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.

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
42 views10 pages

Assignment No 10

Uploaded by

Anurag Pawar
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.

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
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