EContent 2 2023 07 27 10 06 31 RWD Manual 3DCEpdf 2023 07 26 08 30 30

School of Engineering & Technology
Diploma in Computer Engineering

Lab Manual
Responsive Webpage Design [1DECO305]
Student Name:
__________________________
Enrollment No.:
_________________________
Year - 2023-24
Certificate
Enrollment No.:___________________________________________________
This is to certify that Mr./Ms. ____________________________________
student of Diploma Branch Computer Engineering and
Semester 3rd of Dr. Subhash Univesity, Junagadh has
satisfactory carried out practical work in the subject
Responsive Webpage Design [1DECO305] during academic
year 2023-2024.
Submission Date: ___________________________
_______________________________ ___________________________________
Subject In charge Head of Department

INDEX
Sr. Page Date Signature

Title
No. No.
1 Install bootstrap framework
Display student information content on responsive web page by
2 using container and container-fluid classes.
Create responsive web page of your class time table by using
3 bootstrap grid system
4 Create a context using bs typography
5 Create bordered table using bootstrap.
6 Add image on webpage using bootstrap

Making thumbnails, rounded corner and circular images with
7 bootstrap
8 Create alert message page using bootstrap
9 Create button on web page using bootstrap.
10 Create horizontal registration form using bootstrap

11 Create registration form using bootstrap.
12 Create navbar using bootstrap
13 Javascript program to print hello world
14 Javascript program to find the factorial of a number
15 Javascript program to create form example
16 Js form program example

Write a javascript program to redirect to another url on button
17 click.
18 Write a javascript program to set the background color of a page
19 Write a javascript function to add rows to a table
20 Write a javascript program for form validation
21 Write a jquery program for turn on/off light

Write a jquery program for change face image as per value
22 selected from dropdown
23 Write a jquery for change the color of any div that is animated
PRACTICAL 1
Aim: Install Bootstrap framework
There are two ways to start using Bootstrap on your own web site.
You can:
 Download Bootstrap from getbootstrap.com

 Include Bootstrap from a CDN
Downloading Bootstrap
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the
instructions there.
https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-dist.zip
Bootstrap CDN
If you don't want to download and host Bootstrap yourself, you can include it from a CDN
(Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include
jQuery:
MaxCDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.
min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
1
PRACTICAL 2
Aim: Display student information content on responsive web page by using
container and container-fluid classes.
1. Add the HTML5 doctype
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute
and the correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the
core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
3. Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
1. The .container class provides a responsive fixed width container

2. The .container-fluid class provides a full width container, spanning the entire width of
the viewport
Example 1 with container

<!DOCTYPE html>
<html lang="en">
2
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min
.css">
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Example 2 with container-fluid

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min
.css">
</head>
<body>
<div class="container-fluid">
<h1>Students Details</h1>
<h2>Name:</h2>
<h2>Enrollment no</h>
<p>Informtation about student:.</p>
</div>
</body>
</html>
3
PRACTICAL 3
Aim: Create responsive web page of your class time table by using bootstrap
grid system
span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
Bootstrap Grid System
Bootstrap's grid system allows up to 12 columns across the page.If you do not want to use all
12 columns individually, you can group the columns together to create wider columns:
Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending
on the screen size.
Grid Classes
The Bootstrap grid system has four classes:
 xs (for phones - screens less than 768px wide)

 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px wide)
 lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.
Example
<!DOCTYPE html>
<html lang="en">
<head>
4
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than
768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">I</div>
<div class="col-sm-4" style="background-color:lavenderblush;">Love</div>
<div class="col-sm-4" style="background-color:lavender;">India</div>
</div>
</div>
</body>
</html>
Output
5
PRACTICAL 4
Aim: Create a context using BS Typography

<!DOCTYPE html>
<html>
<head>
<title>Try v1.2 Bootstrap Online</title>
</head>
<body>
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-muted">This content is muted</p>
<p class="text-primary">This content carries a primary class</p>
<p class="text-success">This content carries a success class</p>
<p class="text-info">This content carries a info class</p>
<p class="text-warning">This content carries a warning class</p>
<p class="text-danger">This content carries a danger class</p>
</body>
</html>
6
Output
7
PRACTICAL 5
Aim: Create bordered table using bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bordered Table</h2>
<p>Students Basic Information</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Date of Birth</th>
<th>Mobile number</th>
</tr>
</thead>
<tbody>
<tr>
8
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12/7/2001</td>
<td>254236256</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>1/1/2002</td>
<td>64614654</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>3/7/2001</td>
<td>51351576</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
9
PRACTICAL 6
Aim:Add image on webpage using Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
</head>
<body>
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element
(resize the browser window to see the effect):</p>
<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460"
height="345">
</div>
</body>
</html>
10
PRACTICAL 7
Aim: Making thumbnails, rounded corner and circular images with Bootstrap
For Rounded corners

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">
For Circle
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">
For Thumbnail
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script
<script
</head>
<body>
11
<h2>Circle</h2>
<p>The .img-circle class shapes the image to a circle (not available in IE8):</p>
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304"
height="236">
</div>
</body>
</html>
Output
12
PRACTICAL 8
Aim: Create alert message page using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or
action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need
attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially
negative action.
</div>
13
</div>
</body>
</html>
Output
14
PRACTICAL 9
Aim: Create Button on web page using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
Output
15
PRACTICAL 10
Aim: Create horizontal registration form using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pwd">
</div>
16
</div>
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
Output
17
PRACTICAL 11
Aim: Create Registration form using bootstrap.
<html lang = "en">

<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-
fit = no">
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title> Bootstrap 4 Registration Form Example </title>
<style>
.note
{
text-align: center;
height: 80px;
background: -webkit-linear-gradient(left, #0072ff, #8811c5);
color: #fff;
font-weight: bold;
line-height: 80px;
}
body {
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 12px;
line-height: 1.8em;
text-transform: none;
letter-spacing: .075em;
font-weight: bold;
font-style: normal;
text-decoration: none;
color: #e7bd74;
background-color: rgba(34,28,28);
display: block;
18
}
.title {
margin-top: 2rem;
margin-bottom: 1rem;
}
.form-content
{
padding: 5%;
border: 1px solid #ced4da;
margin-bottom: 2%;
}
.form-control {
border-radius: 1.5rem;
}
.btnSubmit
{
border: none;
border-radius: 1.5rem;
padding: 1%;
width: 20%;
cursor: pointer;
background: #0062cc;
color: #fff;
}
h1 {
font-family: sans-serif;
display: block;
font-size: 1rem;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
color: hotpink;
text-transform: uppercase;
padding-top: 20px;
}
a{
19
color: #fff;
}
a:hover {
color: #fff;
}
</style>
</head>
<body>
<div class="container register-form">
<div class="form">
<div class="note">
<h1> Bootstrap 4 Registration Form Example. </h1>
</div>
<div class="form-content">
<div class="row">
<div class="col-md-6">
<input type="text" class="form-
control" placeholder="Your Name *" value=""/>
</div>
control" placeholder="Phone Number *" value=""/>
</div>
</div>
<div class="col-md-6">
control" placeholder="Your Password *" value=""/>
</div>
control" placeholder="Confirm Password *" value=""/>
</div>
</div>
20
</div>
<div class="row align-items-center mt-4">
<div class="col">
<input type="text" class="form-control" placeholder=" Enter Email Address">
</div>
</div> <div class="row align-items-center mt-4">
<div class="col">
<input type="text" class="form-control" placeholder=" Address">
</div>
</div>
<div class="row justify-content-start mt-4">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
I hereby agree to the <a href="/"> Terms and Conditions. </a>
</label>
</div>
<button type="button" class="btnSubmit"> Submit </button>
</div>
</div>
</div>
</body>
</html>
Output
21
PRACTICAL 12
Aim: Create Navbar using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-default">

<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
</ul>
</div>
</nav>
<h3>Basic Navbar Example</h3>
22
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
Output
23
PRACTICAL 13
Aim: JavaScript Program to Print Hello World
<html>
<body>
<script type="text/javascript">
alert("Hello World");
</script>
</body>
</html>
Output
24
PRACTICAL 14
Aim: JavaScript Program to Find the Factorial of a Number
<!DOCTYPE html>
<html>
<head>
</head>
<body style = "text-align: center; font-size: 20px;">
<h1> Welcome to the javaScript world!! </h1>
Enter a particular number: <input id = "num">
<br><br>
<button onclick = "fact()"> Please type any Factorial number </button>
<p id = "res"></p>
<script>
function fact(){
var i, num, f;
f = 1;
num = document.getElementById("num").value;
for(i = 1; i <= num; i++)
f = f * i;
i = i - 1;
document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " +

f;
25
</script>
</body>
</html>
Output
26
PRACTICAL 15
Aim: JS Form Program Example
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Please enter your Name");
return false;
}
</script>
</head>
<body>
<h2>JavaScript Test Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"

method="post">
Enter Name: <input type="text" name="fname">
<input type="submit" value="Submit">

</form>
</body>
</html>
27
PRACTICAL 16
Aim: JS Form Program Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="myFunction()">Please Try it</button>
<p id="Test Confirm Box"></p>
<script>
function myFunction() {
var txt;
if (confirm("Please Press a button!")) {
txt = "You pressed Button!";
} else {
txt = "You pressed Cancel Button!";
}
document.getElementById("Test Confirm Box").innerHTML = txt;
}
</script>
</body>
</html>
Output
28
PRACTICAL 17
Aim: Write a JavaScript program to redirect to another URL on button click.
<html>
<head>
<script type="text/javascript">
function Redirect() {
location.href="https://www.tutorix.com";
}
</script>
</head>
<body>
<p>Click the following button to redirect to tutorix.com.</p>
<form>
<input type="button" value="Redirect Me" onclick="Redirect();" />
</form>
</body>
</html>
Output
29
PRACTICAL 18
Aim: Write a JavaScript program to set the background color of a page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change the Background Color with JavaScript</title>
<script>
// Function to change webpage background color
function changeBodyBg(color){
document.body.style.background = color;
}
// Function to change heading background color

function changeHeadingBg(color){
document.getElementById("heading").style.background = color;
}
</script>
</head>
<body>
<h1 id="heading">This is a heading</h1>
<p>This is a paragraph of text.</p>
<hr>
<div>
<label>Change Webpage Background To:</label>
<button type="button" onclick="changeBodyBg('yellow');">Yellow</button>
<button type="button" onclick="changeBodyBg('lime');">Lime</button>
<button type="button" onclick="changeBodyBg('orange');">Orange</button>
</div>
<br>
30
<div>
<label>Change Heading Background To:</label>
<button type="button" onclick="changeHeadingBg('red');">Red</button>
<button type="button" onclick="changeHeadingBg('green');">Green</button>
<button type="button" onclick="changeHeadingBg('blue');">Blue</button>
</div>
</body>
</html>
Output
31
PRACTICAL 19
Aim: Write a JavaScript function to add rows to a table
<!DOCTYPE html>
<html>
<head>
<title>Add Rows to Table</title>
<script>
function addRow() {
// Get a reference to the table
var table = document.getElementById("myTable");
// Create a new row

var row = table.insertRow();
// Create cells and set their content

var cell1 = row.insertCell();
cell1.innerHTML = "Cell 1";
}
</script>
</head>
<body>
<button onclick="addRow()">Add Row</button>
<table id="myTable">
<tr>
<th>Header 1</th>
<th>Header 2</th>
32
<th>Header 3</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output
33
PRACTICAL 20
Aim: Write a JavaScript program for form validation
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
// Get form input values
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var password = document.forms["myForm"]["password"].value;
// Validate name
if (name === "") {
alert("Name must be filled out");
return false;
}
// Validate email
if (email === "") {
alert("Email must be filled out");
return false;
}
// Validate password
if (password === "") {
alert("Password must be filled out");
return false;
}
// Additional validation logic goes here...
// Form is valid
alert("Form submitted successfully");
return true;
}
</script>
</head>
<body>
<h1>Form Validation</h1>
<form name="myForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
34
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Submit">

</form>
</body>
</html>
Output
35
PRACTICAL 21
Aim: Write a jQuery program for turn on/off light.
<!DOCTYPE html>
<html>
<head>
<title>Light Switch</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Add click event handler to the light switch
$('#lightSwitch').click(function() {
// Toggle the light's status
$('#lightBulb').toggleClass('on');
// Toggle the text on the light switch

var switchText = $('#lightSwitch').text();
if (switchText === 'Turn On') {
$('#lightSwitch').text('Turn Off');
} else {
$('#lightSwitch').text('Turn On');
}
});
});
</script>
<style>
#lightBulb {
width: 100px;
height: 100px;
background-color: gray;
border-radius: 50%;
margin-bottom: 10px;
}
#lightBulb.on {
background-color: yellow;
}
#lightSwitch {
padding: 10px;
background-color: #0066cc;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
36
<h1>Light Switch</h1>
<div id="lightBulb"></div>
<button id="lightSwitch">Turn On</button>
</body>
</html>
Output
37
PRACTICAL 22
Aim: Write a jQuery program for change face image as per value selected from
dropdown
<!DOCTYPE html>
<html>
<head>
<title>Face Changer</title>
<script>
// Add change event handler to the dropdown
$('#faceSelector').change(function() {
// Get the selected value
var selectedFace = $(this).val();
// Set the image source based on the selected value

var imagePath = '';
switch (selectedFace) {
case 'happy':
imagePath = 'happy_face.png';
break;
case 'sad':
imagePath = 'sad_face.png';
break;
case 'angry':
imagePath = 'angry_face.png';
break;
default:
imagePath = 'default_face.png';
}
38
// Update the image source

$('#faceImage').attr('src', imagePath);
});
});
</script>
</head>
<body>
<h1>Face Changer</h1>
<select id="faceSelector">
<option value="happy">Happy</option>
<option value="sad">Sad</option>
<option value="angry">Angry</option>
</select>
<br>
<img id="faceImage" src="default_face.png" alt="Face Image">
</body>
</html>
Output
39
PRACTICAL 23
Aim: . Write a jQuery for change the color of any div that is animated
<!DOCTYPE html>
<html>
<head>
<title>Animated Div Color Change</title>
<script>
// Add click event handler to start animation button
$('#startAnimation').click(function() {
// Animate the div
$('#animatedDiv').animate({ width: '300px' }, 2000, function() {
// Animation complete, change the color of the div
$(this).css('background-color', 'red');
});
});
});
</script>
<style>
#animatedDiv {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<h1>Animated Div Color Change</h1>
<button id="startAnimation">Start Animation</button>
40
<div id="animatedDiv"></div>
</body>
</html>
Output
Signature____________
Date:________________
Remarks___________________________________________________________________
41

EContent 2 2023 07 27 10 06 31 RWD Manual 3DCEpdf 2023 07 26 08 30 30

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EContent 2 2023 07 27 10 06 31 RWD Manual 3DCEpdf 2023 07 26 08 30 30

Uploaded by

Copyright:

Available Formats

School of Engineering & Technology

Diploma in Computer Engineering

Responsive Webpage Design [1DECO305]

Submission Date: ___________________________

Subject In charge Head of Department

Sr. Page Date Signature

5 Create bordered table using bootstrap.

6 Add image on webpage using bootstrap

8 Create alert message page using bootstrap

9 Create button on web page using bootstrap.

10 Create horizontal registration form using bootstrap

13 Javascript program to print hello world

14 Javascript program to find the factorial of a number

15 Javascript program to create form example

16 Js form program example

19 Write a javascript function to add rows to a table

20 Write a javascript program for form validation

21 Write a jquery program for turn on/off light

 Download Bootstrap from getbootstrap.com

1. Add the HTML5 doctype

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The .container class provides a responsive fixed width container

Example 1 with container

Example 2 with container-fluid

span 4 span 4 span 4

Bootstrap Grid System

The Bootstrap grid system has four classes:

 xs (for phones - screens less than 768px wide)

Aim: Create a context using BS Typography

Aim: Create bordered table using bootstrap.

For Rounded corners

<html lang = "en">

<nav class="navbar navbar-default">

<body style = "text-align: center; font-size: 20px;">

<h1> Welcome to the javaScript world!! </h1>

Enter a particular number: <input id = "num">

<button onclick = "fact()"> Please type any Factorial number </button>

for(i = 1; i <= num; i++)

document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " +

alert("Please enter your Name");

<h2>JavaScript Test Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"

Enter Name: <input type="text" name="fname">

<input type="submit" value="Submit">

// Function to change heading background color

// Create a new row

// Create cells and set their content

// Additional validation logic goes here...

<input type="submit" value="Submit">

// Toggle the text on the light switch

// Set the image source based on the selected value

// Update the image source

You might also like