Scribd
Upload
3 views

Bootstrap Journal Programme 2023

The document lists various Bootstrap program examples, including HTML files for different layouts and components such as grids, tables, alerts, and forms. Each example demonstrates specific Bootstrap functionalities and styles, showcasing how to implement them in web development. The content serves as a reference for developers looking to utilize Bootstrap in their projects.

Uploaded by

pjay27470
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Bootstrap Journal Programme 2023

The document lists various Bootstrap program examples, including HTML files for different layouts and components such as grids, tables, alerts, and forms. Each example demonstrates specific Bootstrap functionalities and styles, showcasing how to implement them in web development. The content serves as a reference for developers looking to utilize Bootstrap in their projects.

Uploaded by

pjay27470
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

List of programmes for bootstrap programme

1. First container bs.html


2. Basic structure of grid.html
3. 3 equal column.html
4. Unequal columns.html
5. Table bordered.html
6. Table contextual.html
7. Colors text.html
8. Colors contextual link.html
9. Alert.html
10. Alert hyperlink.html
11. Alert close.html
12. Vertical form.html
13. Horizontal form.html
14. Form controls.html
15. 7 buttons.html
16. Button enable_disable.html
17. Button outline bordered.html
18. Image eg.html
19. Media object in bootstrap.html
20. Nested media object.html
21. Top middle and bottom media object.html
22. Pagination normal.html

first container bs.html

<html lang="en">

<head>

<title>this is a bootstrap example..........</title>

<meta http-equiv="content-type" content="text/html; charset=windows-1252">

<link rel="stylesheet" href="bootstrap.min.css">

</head>

[Type text] Page 1


<body>

<div class="container">

<h1> First bootstrap page ...</h1>

<p> Write your text here. </p>

</div>

</body></html>

basic structure of grid.html

<html lang="en">

<head>

<title>basic structure of Bootstrap Grid Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet" href="bootstrap.min.css">

<!--nothing to display

-->

</head>

<body>

<div class="container-fluid">

<h1>Basic Grid Structure</h1>

<p>Resize the browser window to see the effect.</p>

<p>The first, second and third row will automatically stack on top of each other when the screen is
less than 576px wide.</p>

[Type text] Page 2


<div class="container-fluid">

<!-- Control the column width, and how they should appear on different devices -->

<div class="row">

<div class="col-sm-6" style="background-color:yellow;"> BCA 50%</div>

<div class="col-sm-6" style="background-color:orange;">BSC 50%</div>

</div>

<br>

<div class="row">

<div class="col-sm-3" style="background-color:yellow;"> BCA 33.33%</div>

<div class="col-sm-3" style="background-color:orange;">BSC 33.33%</div>

<div class="col-sm-6" style="background-color:yellow;">BCOM 33.33%</div>

</div>

<br>

<!-- Or let Bootstrap automatically handle the layout -->

<div class="row">

<div class="col-sm" style="background-color:yellow;">25%</div>

<div class="col-sm" style="background-color:orange;">25%</div>

<div class="col-sm" style="background-color:yellow;">25%</div>

<div class="col-sm" style="background-color:orange;">25%</div>

</div>

<br>

<div class="row">

[Type text] Page 3


<div class="col" style="background-color:yellow;">25%</div>

<div class="col" style="background-color:orange;">25%</div>

<div class="col" style="background-color:yellow;">25%</div>

</div>

</div>

</div>

</body></html>

3 equal column.html

<html lang="en">

<head>

<title>For Equal Grid Bootstrap Example..............JOB</title>

<meta charset="utf-8">

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

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

</head>

<body>

<div class="container">

<h1>Three equal width columns Grid Example</h1>

<div class="row">

<div class="col-md-4" style="background-color:lavender;">Rahul</div>

<div class="col-md-4" style="background-color:orange;">Vijay</div>

<div class="col-md-4" style="background-color:lavender;">Kartik</div>

</div>

</div></body></html>

[Type text] Page 4


Unequal columns.html

<html lang="en">

<head>

<title>For UNEqual Grid Bootstrap Example..............Job</title>

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

</head>

<body>

<div class="container">

<h1>Unequal width columns Grid Example</h1>

<div class="row">

<div class="col-md-1" style="background-color:lavender;">Rahul</div>

<div class="col-md-2" style="background-color:orange;">Vijay</div>

<div class="col-md-9" style="background-color:lavender;">Kartik</div>

</div>

</div>

</body></html>

Table bordered.html

<html lang="en">

<head>

<title>Table bordered stripped rows Bootstrap Example</title>

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

[Type text] Page 5


</head>

<body>

<div class="container">

<h2>Basic Table bordered with stripped rows</h2>

<table class="table table-striped table-bordered">

<thead>

<tr>

<th>ID</th>

<th>Name</th>

<th>Age</th>

</tr>

</thead>

<tbody>

<tr>

<td>101</td>

<td>Rahul</td>

<td>23</td>

</tr>

<tr>

<td>102</td>

<td>Umesh</td>

<td>22</td>

</tr>

[Type text] Page 6


<tr>

<td>103</td>

<td>Max</td>

<td>29</td>

</tr>

</tbody>

</table>

</div>

</body></html>

Table contextual.html

<html lang="en">

<head>

<title>table contextual classes Bootstrap Example</title>

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<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>

[Type text] Page 7


<table class="table">

<thead>

<tr class="table-success">

<th>ID</th>

<th>Name</th>

<th>Age</th>

</tr>

</thead>

<tbody>

<tr class="table-active">

<td>101</td>

<td>RAhul</td>

<td>23</td>

</tr>

<tr class="table-danger">

<td>102</td>

<td>Joe</td>

<td>22</td>

</tr>

<tr class="table-info">

<td>103</td>

<td>Doe</td>

<td>26</td>

</tr>

<tr class="table-warning">

<td>104</td>

[Type text] Page 8


<td>Moe</td>

<td>30</td>

</tr>

<tr class="table-warning">

<td>105</td>

<td>Dooley</td>

<td>45</td>

</tr>

<tr class="table-primary">

<td>106</td>

<td>Reebal</td>

<td>19</td>

</tr>

<tr class="table-active">

<td>107</td>

<td>Anny</td>

<td>20</td>

</tr>

<tr class="table-secondary">

<td>108</td>

<td>Sunny</td>

<td>32</td>

</tr>

<tr class="table-light">

<td>109</td>

<td>Angie</td>

<td>26</td>

[Type text] Page 9


</tr>

<tr class="table-warning">

<td>110</td>

<td>Bonny</td>

<td>21</td>

</tr>

</tbody>

</table>

</div>

</body></html>

Colors text.html

<html lang="en">

<head>

<title>colors text Bootstrap Example</title>

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

</head>

<body bgcolor="green">

<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>

[Type text] Page 10


<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>

Colors contextual link.html

<html lang="en">

<head>

<title>colored contextual text 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/4.2.1/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<h6 class="text-danger">Contextual Link Colors for anchor text i.e. hypertext</h2>

<p>Hover over the links.</p><br>

<a href="#" class="text-muted">Muted link.</a><br>

<a href="#" class="text-primary">Primary link.</a><br>

<a href="#" class="text-success">Success link.</a><br>

<a href="#" class="text-info">Info link.</a><br>

[Type text] Page 11


<a href="#" class="text-warning">Warning link.</a><br>

<a href="#" class="text-danger">Danger link.</a><br>

<a href="#" class="text-secondary">Secondary link.</a><br>

<a href="#" class="text-dark">Dark grey link.</a><br>

<a href="#" class="text-body">Body/black link.</a><br>

<a href="#" class="text-light">Light grey link.</a><br>

</div>

</body></html>

Alert.html

<html lang="en">

<head>

<title>Bootstrap Alert Example</title>

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

</head>

<body>

<div class="container">

<h2>Alerts</h2>

<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>

<div class="alert alert-success">

<strong>Success!</strong> <p class="text-info">This alert box could indicate a successful or


positive action.</p>

</div>

[Type text] Page 12


<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>

<div class="alert alert-primary">

<strong>Primary!</strong> Indicates an important action.

</div>

<div class="alert alert-secondary">

<strong>Secondary!</strong> Indicates a slightly less important action.

</div>

<div class="alert alert-dark">

<strong>Dark!</strong> Dark grey alert.

</div>

<div class="alert alert-light">

<strong>Light!</strong> Light grey alert.

</div>

</div>

</body></html>

Alert hyperlink.html

<html lang="en">

<head>

[Type text] Page 13


<title>Bootstrap Alert Hyperlink Example</title>

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

</head>

<body>

<div class="container">

<h2>bootstrap Alert hyperlink texts </h2>

<p>Alerts hyperlinks are created with the .alert-link class in <a> tag :</p>

<div class="alert alert-success">

<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-info">

<strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-warning">

<strong>Warning!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-danger">

<strong>Danger!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-primary">

<strong>Primary!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-secondary">

[Type text] Page 14


<strong>Secondary!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-dark">

<strong>Dark!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

<div class="alert alert-light">

<strong>Light!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

</div></body></html>

Alert close.html

<html lang="en">

<head>

<title>Alert close 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/4.2.1/css/bootstrap.min.css">

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

[Type text] Page 15


<h2>Alerts closing example</h2>

<p>The button with class="close" and data-dismiss="alert" is used to close the alert box.</p>

<p>The alert-dismissible class adds some extra padding to the close button.</p>

<div class="alert alert-success alert-dismissible">

<button type="button" class="close" data-dismiss="alert">close</button>

<strong>Success!</strong> This alert box could indicate a successful or positive action.

</div>

<div class="alert alert-info alert-dismissible">

<button type="button" class="close" data-dismiss="alert">x</button>

<strong>Info!</strong> This alert box could indicate a neutral informative change or action.

</div>

<div class="alert alert-warning alert-dismissible">

<button type="button" class="close" data-dismiss="alert">x</button>

<strong>Warning!</strong> This alert box could indicate a warning that might need attention.

</div>

<div class="alert alert-danger alert-dismissible">

<button type="button" class="close" data-dismiss="alert">x</button>

<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.

</div>

<div class="alert alert-primary alert-dismissible">

<button type="button" class="close" data-dismiss="alert">x</button>

<strong>Primary!</strong> Indicates an important action.

[Type text] Page 16


</div>

<div class="alert alert-secondary alert-dismissible">

<button type="button" class="close" data-dismiss="alert">x</button>

<strong>Secondary!</strong> Indicates a slightly less important action.

</div>

<div class="alert alert-dark alert-dismissible">

<button type="button" class="close" data-dismiss="alert">x</button>

<strong>Dark!</strong> Dark grey alert.

</div>

<div class="alert alert-light alert-dismissible">

<button type="button" class="close" data-dismiss="alert">x</button>

<strong>Light!</strong> Light grey alert.

</div>

</div>

</body></html>

Vertical form.html

<html lang="en">

<head>

<title>vertical form Bootstrap example</title>

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

</head>

[Type text] Page 17


<body>

<div class="container">

<h1>Vertical Form Example</h1>

<form role="form" style="width:300px">

<div class="form-group">

<label for="exampleInputEmail1">Email address</label>

<input type="email" class="form-control" id="exampleInputEmail1">

</div>

<div class="form-group">

<label for="exampleInputPassword1">Password</label>

<input type="password" class="form-control" id="exampleInputPassword1">

</div>

<button type="submit" class="btn btn-default">Login</button>

<button type="cancle" class="btn btn-default">cancle me</button>

</form>

</div>

</body> </html>

Horizontal form.html

<html lang="en">

<head>

<title>Horizontal form Bootstrap Example</title>

<meta charset="utf-8">

[Type text] Page 18


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

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

</head>

<body>

<div class="container">

<h2>Horizontal form Example</h2>

<form class="form-horizontal" role="form"


action="https://www.javatpoint.com/javascriptpages/valid.jsp">

<form style="width:300px">

<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">

</div>

</div>

<div class="form-group">

<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">

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<button type="submit" class="btn btn-default">Submit</button>

[Type text] Page 19


</div>

</div>

<div class="form-group">

<label for="salary">salary</label>

<input type="range" class="form-control" min=10,000 max=1,00,000>

</form>

</div>

</body>

</html>

Form controls.html

<html lang="en">

<head>

<title>All Form Controls 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/4.0.0-


beta.2/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<h2>Form controls: </h2>

[Type text] Page 20


<p>The form below contains textbox,password,checkbox,radio button,selection box,multiple
selection box and textarea controls designing guideline.</p>

<form>

<div class="form-group">

<label for="usr">Name:</label>

<input type="text" class="form-control" id="usr">

</div>

<div class="form-group">

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd">

</div>

<h2>Input type: ckeck box buttons</h2>

<div class="checkbox">

<label><input type="checkbox" value="">Option 1</label>

</div>

<div class="checkbox">

<label><input type="checkbox" value="">Option 2</label>

</div>

<h2>Input type: inline ckeck box buttons</h2>

<label class="checkbox-inline">

<input type="checkbox" value="">Option 3

</label>

<label class="checkbox-inline">

<input type="checkbox" value="">Option 4

[Type text] Page 21


</label>

<h2>Input type: Radio buttons</h2>

<div class="radio">

<label><input type="radio" name="optradio">Option 1</label>

</div>

<div class="radio">

<label><input type="radio" name="optradio">Option 2</label>

</div>

<h2>Input type: Inline Radio buttons</h2>

<label class="radio-inline">

<input type="radio" name="optrd">Option 1

</label>

<label class="radio-inline">

<input type="radio" name="optrd">Option 2

</label>

<div class="form-group">

<label for="sel1">Select list (select one):</label>

<select class="form-control" id="sel1">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</select>

[Type text] Page 22


<br>

<label for="sel2">Mutiple select list (hold shift to select more than one):</label>

<select multiple class="form-control" id="sel2">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select>

</div>

<p>The below area contains a textarea for comments:</p>

<div class="form-group">

<label for="comment">Comment:</label>

<textarea class="form-control" rows="5" id="comment"></textarea>

</div>

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" type="button" data-


toggle="dropdown">Dropdown Example

<span class="caret"></span></button>

<ul class="dropdown-menu">

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

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

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

</ul>

</div>

[Type text] Page 23


</form>

</div>

</body>

</html>

7 buttons.html

<html lang="en">

<head>

<title> 7 buttons </title>

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

</head>

<body>

<h1>Button Example!</h1>

<button class="btn btn-default"> default </button>

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

<button class="btn btn-danger"> danger </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-link"> Link </button>

</body>

</html>

Button enable_disable.html

<html lang="en">

[Type text] Page 24


<head>

<title>Button enable disabel 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.6/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<h2>Button States</h2>

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

<button type="button" class="btn btn-primary active">Active Primary</button>

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

</div>

</body>

</html>

Button outline bordered.html

<html lang="en">

<head>

<title>Button Outline Border 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/4.0.0-


beta.2/css/bootstrap.min.css">

[Type text] Page 25


</head>

<body>

<div class="container">

<h2>Button Outline/ Bordered Buttons</h2>

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-info">Info</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-dark">Dark</button>

<button type="button" class="btn btn-outline-light text-dark">Light</button>

</div>

</body>

</html>

Image eg.html

<html lang="en">

<head>

<title>Bootstrap image</title>

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

</head>

<body>

<div class="container">

<h2>Rounded Corners</h2>

[Type text] Page 26


<img src="images 1.jpg" class="img-rounded" alt="abc" width="300" height="250">

<h2>circle</h2>

<img src="images 2.jpg" class="img-circle" alt="abc" width="300" height="250">

<h2>thumbnail image</h2>

<img src="images 3.jpg" class="img-thumbnail" alt="abc" width="300" height="250">

</div>

</body>

</html>

Media object in bootstrap.html

<html lang="en">

<head>

<!-- Link Bootstrap CSS -->

<link rel="stylesheet" href="bootstrap.min.css">

<title>media object Bootstrap Example</title>

</head>

<body>

<div class="container">

<h2>Media Object</h2>

<!-- Left-aligned media object -->

<div class="media">

<div class="media-left">

<img src="images 1.jpg" class="media-object"

style="width:60px">

[Type text] Page 27


</div>

<div class="media-body">

<h4 class="media-heading">Left-aligned </h4>

<p>

Use the "media-left" class to left-align a media object. Text that should appear next to the

image, is placed inside a container with class="media-body"</p>

</div>

</div>

<hr>

<!-- Right-aligned media object -->

<div class="media">

<div class="media-body">

<h4 class="media-heading">Right-aligned</h4>

<p>

Use the "media-right" class to right-align the media object.Text that should appear
next to

the image, is placed inside a container with class="media-body"</p>

</div>

<div class="media-right">

<img src="images 2.jpg"

class="media-object" style="width:60px">

</div>

</div>

</div>

</body>

[Type text] Page 28


</html>

Nested media object.html

<html lang="en">

<head>

<!-- Link BootStrap CSS -->

<link rel="stylesheet" href="bootstrap.min.css">

<title>GeeksForGeeks Bootstrap Example</title>

</head>

<body>

<div class="container">

<h3>Nested Media Objects</h3>

<br>

<div class="media">

<div class="media-left">

<img src="images 1.jpg" class="media-object"

style="width:45px">

</div>

<div class="media-body">

<h6 class="media-heading">GeeksForGeeks <small><br><i>Media Object 1

</i></small></h6>

<!-- Nested media object -->

<div class="media">

[Type text] Page 29


<div class="media-left">

<img src="images 2.jpg" class="media-object"

style="width:45px">

</div>

<div class="media-body">

<h6 class="media-heading">GeeksForGeeks <small><br>

<i>Media Object 2</i></small></h6>

<!-- Nested media object -->

<div class="media">

<div class="media-left">

<img src="images 3.jpg"

class="media-object" style="width:45px">

</div>

<div class="media-body">

<h6 class="media-heading">GeeksForGeeks <small><br>

<i>Media Object 3</i></small></h6>

</div>

</div>

</div>

</div>

<div class="media">

<div class="media-left">

<img src="images 1.jpg" class="media-object" style="width:45px">

[Type text] Page 30


</div>

<div class="media-body">

<h6 class="media-heading">GeeksForGeeks <small><br><i>Media Object


4</i></small></h6>

</div>

</div>

</div>

</div>

<div class="media">

<div class="media-left">

<img src="images 1.jpg" class="media-object"

style="width:45px">

</div>

<div class="media-body">

<h6 class="media-heading">GeeksForGeeks <small><br><i>Media Object 5

</i></small></h6>

</div>

</div>

</div>

</body>

</html>

Top middle and bottom media object.html

<html>

<head>

<link rel="stylesheet" href="bootstrap.min.css">

[Type text] Page 31


<title>top middle and bottom aligenment for media object in

Bootstrap Example</title>

</head>

<body>

<div class="container">

<h3>Media Object</h3>

<br>

<div class="media">

<img class="align-self-start mr-3" src="images 1.jpg" style="width:180px">

<div class="media-body">

<h6 class="media-heading">Media Top</h6>

<p>

The media object can be aligned to top, middle or bottom.

</p>

<ul>

<li> Use the "media-top" class to top-align a media object.

<li> Use the "media-middle" class to middle-align a media object.

<li> Use the "media-bottom" class to bottom-align a media object.

</ul>

</div>

</div>

<div class="media">

<img class="align-self-center mr-3" src="images 2.jpg" style="width:180px">

<div class="media-body">

<h6 class="media-heading">Media middle</h6>

[Type text] Page 32


<p> The media object can be aligned to top, middle or bottom. </p>

<ul>

<li>Use the "media-top" class to top-align a media object.

<li>Use the "media-middle" class to middle-align a media object.

<li> Use the "media-bottom" class to bottom-align a media object.


</ul>

</div>

</div>

<div class="media">

<img class="align-self-end mr-3" src="images 3.jpg" style="width:180px">

<div class="media-body">

<h6 class="media-heading">Media bottom</h6>

<p>The media object can be aligned to top, middle or bottom. </p>

<ul>

<li>Use the "media-top" class to top-align a media object.

<li>Use the "media-middle" class to middle-align a media object.

<li>Use the "media-bottom" class to bottom-align a media object.

</ul>

</div>

</div>

</div></body></html>

Pagination normal.html

<html lang="en">

<head>

[Type text] Page 33


<title>pagination Bootstrap Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet" href="bootstrap.min.css">

</head>

<body>

<div class="container">

<h2>Pagination</h2>

<p>To create a basic pagination, add the .pagination class to an ul element.

Then add the .page-item to each li element and a .page-link class to each link inside li:</p>

<hr>

<ul class="pagination">

<li class="page-item"> Previous .............. </li>

<li class="page-item"> 1 ...............</li>

<li class="page-item"> 2 ................</li>

<li class="page-item"> 3.............</li>

<li class="page-item"> next.............</li>

</ul>

<hr>

<ul class="pagination">

<li class="page-item"> <a class="page-link" href="media object in bootstrap.html"> Previous


</a></li>

<li class="page-item"> <a class="page-link" href="first container bs.html"> 1</a></li>

<li class="page-item"> <a class="page-link" href="3 equal column.html">2</a></li>

<li class="page-item"> <a class="page-link" href="table bordered.html"> Next</a></li>

</ul>

[Type text] Page 34


</div>

<div class="container">

<h2>setting of active/disabled state to Pagination item</h2>

<p>To set active or disabled state to pagination item</p>

<ul class="pagination">

<li class="page-item"><a class="page-link" href="media object in bootstrap.html"> Previous


</a></li>

<li class="page-item active"><a class="page-link" href="first container bs.html"> 1 </a></li>

<li class="page-item"><a class="page-link" href="3 equal column.html">2</a></li>

<li class="page-item disabled"> <a class="page-link" href="table bordered.html">Next</a></li>

</ul>

</div>

<div class="container">

<h2>setting size for Pagination item </h2>

<p>sizewise pagination item</p>

<ul class="pagination pagination-lg">

<li class="page-item"><a class="page-link" href="media object in


bootstrap.html">Previous</a></li>

<li class="page-item"><a class="page-link" href="first container bs.html">1</a></li>

<li class="page-item"><a class="page-link" href="table bordered.html">Next</a></li>

</ul>

</div>

<!-- Center-aligned -->

<ul class="pagination justify-content-center" style="margin:20px 0">

<li class="page-item">...1</li>

[Type text] Page 35


<li class="page-item">...2</li>

</ul>

<!-- Right-aligned -->

<ul class="pagination justify-content-end" style="margin:20px 0">

<li class="page-item">...page item 1..</li>

<li class="page-item">.. page item 2..</li>

</ul>

<div class="container">

<h2>Breadcrumbs</h2>

<p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:</p>

<ul class="breadcrumb">

<li class="breadcrumb-item"><a href="#">Photos</a></li>

<li class="breadcrumb-item"><a href="#">Summer 2021</a></li>

<li class="breadcrumb-item"><a href="#">Italy</a></li>

<li class="breadcrumb-item active">Rome</li>

</ul>

</div>

</body></html>

[Type text] Page 36

You might also like