Scribd
Upload
23 views

Bootstrap Notes

Uploaded by

AYESHA SIDDIQA K
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

Bootstrap Notes

Uploaded by

AYESHA SIDDIQA K
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/ 17

BOOTSTRAP ,UBDTCE

BOOTSTRAP EXECUTED PROGRAMS


1.CONTAINER
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>

<div class="container-sm ">.container-sm</div>


<div class="container-md border">.container-md</div>
<div class="container-lg border">.container-lg</div>
<div class="container-xl border">.container-xl</div>
</body>
</html>

0/P---- >

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

2.COLOURS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body></html>

O/P--→
BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.
BOOTSTRAP ,UBDTCE

BACKGROUND COLOR
<div class="container">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<p>Note that you can also add a .text-* class if you want a different text color:</p>
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
</div></body></html>

O/P-→

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

3.TABLES
<!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 href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be
used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-
secondary, .table-light and .table-dark:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.
BOOTSTRAP ,UBDTCE

<td>Joe</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

<td>[email protected]</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>[email protected]</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>Bo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

O/P--→

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

4.IMAGES
<!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 href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src="IMG_2670.jpg" class="rounded" alt="image not found" width="200" height="120">
<p>The circle to an image:</p>
<img src="IMG_2670.jpg" class="rounded-circle" alt="image not found" width="204" height="136">
<p>The polaroid</p>
<img src="IMG_2670.jpg" class="img-thumbnail" alt="image not found" width="200" height="120">
</div>
</body>
</html>

O/P--→

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

5.BUTTONS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
</body>
</html>

O/P-→

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

6.BUTTON GROUP
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
<div class="container">
<h2>Button Groups Sizes</h2>
<p>Add class .btn-group-* to size all buttons in a button group.</p>
<h3>Large Buttons:</h3>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<hr>
<h3>Default Buttons:</h3>
<div class="btn-group">

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

<button type="button" class="btn btn-primary">Apple</button>


<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<hr>
<h3>Small Buttons:</h3>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</body>
</html>

O/P---→

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

7.PROGRESS BARS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Multiple Progress Bars</h2>
<p>Create a stacked progress bar by placing multiple bars into the same div with class="progress":</p>
<div class="progress">
<div class="bar bg-success" style="width:40%">
Free Space
</div>
<div class="bar bg-warning" style="width:10%">
Warning
</div>
<div class="bar bg-danger" style="width:30%">
Danger
</div>
</div>
</div></body></html>

O/P---→

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

8.FORMS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Stacked form</h2>
<form action="">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</body></html>

O/P---→
BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.
BOOTSTRAP ,UBDTCE

FORM-INLINE
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Search form</h2>
<form class="form-inline">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" id="pwd" placeholder="Enter password" name="pswd">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

9.ALERTS
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success text-white">
<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 col-4" align="center">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div></body></html>

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

10.GRID SYSTEMS
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row bg-primary">
<div class="col">
1 of 3
</div>
<div class="col-6 bg-info">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col bg-warning">
1 of 3
</div>
<div class="col-5 bg-secondary">
2 of 3 (wider)
</div>
<div class="col bg-danger">
3 of 3
</div>

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

</div>
<div class="row bg-dark text-white">
WELL COME
</div>
</div>
</body>
</html>

O/P--→

11.UTILITIES –BORDER
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
<style>

BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.


BOOTSTRAP ,UBDTCE

span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #006600;
}
</style>
</head>
<body>
<div class="container">
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<span class="rounded-sm">1</span>
<span class="rounded">2</span>
<span class="rounded-lg">3</span>
<span class="rounded-top">4</span>
<span class="rounded-end">5</span>
<span class="rounded-bottom">6</span>
<span class="rounded-start">7</span>
<span class="rounded-circle">circled</span>
</div></body></html>

12 CLASSES
YOU CAN WRITE ANY MAIN 10 CLASSES WITH ITS OPTIONS AND SIMPLE EXAMPLES
BY,ASHWINI C,FACULTY,MCA DEPARTMENT,UBDTCE.

You might also like