Scribd
Upload
99 views

Bootstrap Prog

The document contains code for 8 Bootstrap assignments demonstrating various Bootstrap components: 1) Pagination 2) Grouping panels 3) Labels with badges 4) Alerts with contextual classes 5) Wells of different sizes 6) Block level buttons of different styles and sizes

Uploaded by

Ashwini Patil
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
99 views

Bootstrap Prog

The document contains code for 8 Bootstrap assignments demonstrating various Bootstrap components: 1) Pagination 2) Grouping panels 3) Labels with badges 4) Alerts with contextual classes 5) Wells of different sizes 6) Block level buttons of different styles and sizes

Uploaded by

Ashwini Patil
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

--Bootstrap 1st Assignment

1. Write a program to demonstrate the pagination concept.

Use a Bootstrap class to disable the first list item using Bootstrap.-->

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

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

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

</head>

<body>

<div class="container">

<h2>Pagination</h2>

<ul class="pagination">

<li class="disabled"><a href="#" >1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

</ul>

</div>

</body>

</html>
<!--Bootstrap 2nd Assignment

2.Write a program to demonstrate how to group panels using Bootstrap.

Create four panels with heading, content and footer sections.-->

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

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

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

</head>

<body>

<div class="container">

<h2>Panel Group</h2>

<div class="panel-group">

<div class="panel panel-default">

<div class="panel-heading">Panel Header</div>

<div class="panel-body">Panel Content</div>

<div class="panel-footer">Panel Footer</div>

</div>

<div class="panel panel-success">

<div class="panel-heading">Panel Header</div>

<div class="panel-body">Panel Content</div>

<div class="panel-footer">Panel Footer</div>

</div>
<div class="panel panel-info">

<div class="panel-heading">Panel Header</div>

<div class="panel-body">Panel Content</div>

<div class="panel-footer">Panel Footer</div>

</div>

<div class="panel panel-primary">

<div class="panel-heading">Panel Header</div>

<div class="panel-body">Panel Content</div>

<div class="panel-footer">Panel Footer</div>

</div>

</div>

</div>

</body>

</html>

<!--Bootstrap Assignment 4 labels with badges

4. Write a program to demonstrate the use of labels with badges.-->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

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

</head>
<body>

<div class="container">

<h1>Bootstrap Labels</h1>

<h1>default lable <span class="label label-default">New</span></h1>

<h2>success lable <span class="label label-success">New</span></h2>

<h3>warning lable <span class="label label-warning">New</span></h3><br><br>

<h1>Bootstrap Badges</h1>

<a href="#">You Received New Message <span class="badge">5</span></a><br>

<a href="#">Friend Request <span class="badge">10</span></a><br>

<a href="#">Updates <span class="badge">2</span></a>

</div>

</body>

<!--Bootstrap Assignment 6 alert with contextual class

6. Write a program to demonstrate the use of Bootstrap alerts with contextual classes. -->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

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

</head>

<body>

<div class="container">

<h1>Alerts with contextual classes</h1>


<div class="alert alert-warning"><strong>Warning!</strong> This alert box indicates a warning that
might need attention.</div>

<div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive


action.</div>

<div class="alert alert-danger"><strong>Danger!</strong> Indicates a dangerous or potentially negative


action.</div>

<div class="alert alert-info"><strong>Info!</strong> Indicates a neutral informative change or action.

</div>

</body>

<!--Bootstrap Assignment 7 Bootstrap well with different sizes

7. Write a program to demonstrate the use of Bootstrap wells with different sizes.-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

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

</head>

<body>

<div class="container">

<h2>Well Size</h2>

<div class="well well-sm">Small Well</div>

<div class="well">Normal Well</div>

<div class="well well-lg">Large Well</div>

</div>

</body>
</html>

<!--Bootstrap Assignment 8 Block level buttons

8. Write a program to create block level bordered buttons with any four styles with

different sizes using Bootstrap-->

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

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

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

</head>

<body>

<div class="container">

<h2>Block Level Buttons</h2>

<button type="button" class="btn btn-primary btn-block">Button 1</button>

<button type="button" class="btn btn-default btn-block">Button 2</button>

<h2>Large Block Level Buttons</h2>

<button type="button" class="btn btn-info btn-lg btn-block">Button 1</button>

<button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

<h2>Small Block Level Buttons</h2>

<button type="button" class="btn btn-success btn-sm btn-block">Button 1</button>

<button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>

<h2>Extra Small Block Level Buttons</h2>


<button type="button" class="btn btn-warning btn-xs btn-block">Button 1</button>

<button type="button" class="btn btn-default btn-xs btn-block">Button 2</button>

</div>

</body>

</html>

You might also like