Scribd
Upload
23 views

BCA WT Bootstrap Assignment

Uploaded by

btqkbhwf8h
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

BCA WT Bootstrap Assignment

Uploaded by

btqkbhwf8h
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Yashdeep Singh Arora

BCA EA 2024
01029802024

WT ASSIGNMENT-BOOTSTRAP

Q 1. Create a webpage and divide it into three equal columns.

<html>
<head>
<title>3 equal columns</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.col-sm-4{
background-color: brown;
border: 1px solid black;
padding: 20px;
color: azure;
text-align: center;
}
</style>
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>
</body>
</html>
Q 2. Create a webpage containing Bootstrap Table.

<html>
<head>
<title>Bootstrap Table Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Bootstrap Table Example</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>Sam</td>
<td>Smith</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Q 3. Create a webpage containing various types of Bootstrap images.

<html>
<head>
<title>images in bootstrap</title>
</head>
<body>
<div class="container">
<img src="1.png" class="img-rounded" alt="1" height="200"
width="400">
<img src="2.png" class="img-thumbnail" alt="2"
height="200" width="400">
<img src="3.png" class="img-circle" alt="3" height="200"
width="400">
</div>
</body>
</html>
Q 4. Create a webpage containing various Bootstrap typography classes.

<html>
<head>
<title>Title</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/


bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<div class="container">

<p class="display-1">This is our WT Assignment</p>


<p class="display-2">submitted by YASHDEEP SINGH ARORA</p>
<p class="display-3">submitted to ITI BATRA Ma'am</p>
<p class="display-4">Thank You</p>

<p><mark>Hello</mark><del>wassup</del><u>i'm good</u>what about you


<strong>i hope you are doing well</strong> <em>goodbye</em></p>

<p class="text-left">hello bro</p>


<p class="text-center">hello bro</p>
<p class="text-right">hello bro</p>

<p class="text-lowercase">lowercase</p>
<p class="text-uppercase">uppercase</p>
<p class="text-capitalize">caplitalized.</p>

<p class="text-muted">grey</p>
<p class="text-primary">blue</p>
<p class="text-success">green</p>
<p class="text-info">cyan</p>
<p class="text-warning">yellow</p>
<p class="text-danger">red</p>

</div>

</body>
</html>
Q 5. Create a webpage containing various types of buttons and style them using all
Bootstrap classes for buttons.

<html>
<head>
<title>Bootstrap Buttons Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center">Bootstrap Buttons Example</h1>
<div class="text-center">
<h3>Default Buttons</h3>
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>
</div>

<h3 class="text-center">Button Sizes</h3>


<div class="text-center">
<button class="btn btn-default btn-lg">Large Button</button>
<button class="btn btn-default">Default Button</button>
<button class="btn btn-default btn-sm">Small Button</button>
<button class="btn btn-default btn-xs">Extra Small Button</
button>
</div>

<h3 class="text-center">Button States</h3>


<div class="text-center">
<button class="btn btn-primary active">Active Button</button>
<button class="btn btn-primary disabled">Disabled Button</button>
</div>

<h3 class="text-center">Outline Buttons</h3>


<div class="text-center">
<button class="btn btn-default btn-outline">Default Outline</
button>
<button class="btn btn-primary btn-outline">Primary Outline</
button>
<button class="btn btn-success btn-outline">Success Outline</
button>
<button class="btn btn-danger btn-outline">Danger Outline</
button>
</div>
</div>
</body>
Q 6. Create a webpage containing to display the heading using Jumbotron.

<html>
<head>
<title>Bootstrap Jumbotron Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron text-center">
<h1>Hello</h1>
<p class="lead">Jumbotron</p>
<p></p>
<a class="btn btn-primary btn-sm" href="#" role="button">hey</a>
</div>
</div>
</body>
</html>
Q 7. Create a webpage containing various different Glyphicons.

<html>
<head>
<title>Glyphicons Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<style>
h1{
color: blueviolet;
border: 10px solid greenyellow;
padding: 10px;
background-color: antiquewhite;
}
</style>
<h1>Glyphicons</h1>

<p><span class="glyphicon glyphicon-home"></span> Home</p>


<p><span class="glyphicon glyphicon-envelope"></span> Email</p>
<p><span class="glyphicon glyphicon-phone"></span> Phone</p>
<p><span class="glyphicon glyphicon-search"></span> Search</p>
<p><span class="glyphicon glyphicon-user"></span> User</p>
<p><span class="glyphicon glyphicon-warning-sign"></span> Warning</p>
<p><span class="glyphicon glyphicon-exclamation-sign"></span> Error</
p>
<p><span class="glyphicon glyphicon-info-sign"></span> Information</
p>
<p><span class="glyphicon glyphicon-music"></span> Music</p>
<p><span class="glyphicon glyphicon-film"></span> Video</p>
<p><span class="glyphicon glyphicon-headphones"></span> Headphones</
p>
<p><span class="glyphicon glyphicon-file"></span> File</p>
<p><span class="glyphicon glyphicon-save"></span> Save</p>
<p><span class="glyphicon glyphicon-print"></span> Print</p>
<p><span class="glyphicon glyphicon-arrow-up"></span> Arrow Up</p>
<p><span class="glyphicon glyphicon-arrow-down"></span> Arrow Down</
p>
<p><span class="glyphicon glyphicon-arrow-left"></span> Arrow Left</
p>
<p><span class="glyphicon glyphicon-arrow-right"></span> Arrow
Right</p>
<p><span class="glyphicon glyphicon-check"></span> Checkbox</p>
<p><span class="glyphicon glyphicon-unchecked"></span> Unchecked
Checkbox</p>
<p><span class="glyphicon glyphicon-pencil"></span> Edit</p>
</div>
</body>
</html>

You might also like