Unorder list
Unstyle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STYLES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>STYLES</h3>
<ul class="list-unstyled">
<li>c</li>
<li>c++</li>
<li>java</li>
<li>python</li>
<li>react js</li>
</ul>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STYLES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>STYLES</h3>
<ul>
<li>c</li>
<li>c++</li>
<li>java</li>
<li>python</li>
<li>react js</li>
</ul>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
One-line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STYLES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>STYLES</h3>
<ul class="list-inline">
<li>c</li>
<li>c++</li>
<li>java</li>
<li>python</li>
<li>react js</li>
</ul>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Bootstrap Tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TABLE</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap TABLE</h3>
<table>
<tr>
<th>sno</th>
<th>entno</th>
<th>name</th>
<th>course</th>
<th>place</th>
</tr>
<tr>
<td>1</td>
<td>A6551</td>
<td>rohit</td>
<td>hdfd</td>
<td>theni</td>
</tr>
<tr>
<td>2</td>
<td>A6552</td>
<td>dhinesh</td>
<td>hdca</td>
<td>andipatti</td>
</tr>
<tr>
<td>3</td>
<td>A6553</td>
<td>prakathesh</td>
<td>tally prime</td>
<td>jakkampatti</td>
</tr>
<tr>
<td>4</td>
<td>A6554</td>
<td>praveen</td>
<td>java</td>
<td>madurai</td>
</tr>
<tr>
<td>5</td>
<td>A6555</td>
<td>gubenthiran</td>
<td>python</td>
<td>django</td>
</tr>
</table>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Table Striped
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TABLE</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap TABLE</h3>
<table class="table table-striped">
<tr>
<th>sno</th>
<th>entno</th>
<th>name</th>
<th>course</th>
<th>place</th>
</tr>
<tr>
<td>1</td>
<td>A6551</td>
<td>rohit</td>
<td>hdfd</td>
<td>theni</td>
</tr>
<tr>
<td>2</td>
<td>A6552</td>
<td>dhinesh</td>
<td>hdca</td>
<td>andipatti</td>
</tr>
<tr>
<td>3</td>
<td>A6553</td>
<td>prakathesh</td>
<td>tally prime</td>
<td>jakkampatti</td>
</tr>
<tr>
<td>4</td>
<td>A6554</td>
<td>praveen</td>
<td>java</td>
<td>madurai</td>
</tr>
<tr>
<td>5</td>
<td>A6555</td>
<td>gubenthiran</td>
<td>python</td>
<td>django</td>
</tr>
</table>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Table Border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TABLE</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap TABLE</h3>
<table class="table table-bordered">
<tr>
<th>sno</th>
<th>entno</th>
<th>name</th>
<th>course</th>
<th>place</th>
</tr>
<tr>
<td>1</td>
<td>A6551</td>
<td>rohit</td>
<td>hdfd</td>
<td>theni</td>
</tr>
<tr>
<td>2</td>
<td>A6552</td>
<td>dhinesh</td>
<td>hdca</td>
<td>andipatti</td>
</tr>
<tr>
<td>3</td>
<td>A6553</td>
<td>prakathesh</td>
<td>tally prime</td>
<td>jakkampatti</td>
</tr>
<tr>
<td>4</td>
<td>A6554</td>
<td>praveen</td>
<td>java</td>
<td>madurai</td>
</tr>
<tr>
<td>5</td>
<td>A6555</td>
<td>gubenthiran</td>
<td>python</td>
<td>django</td>
</tr>
</table>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Table Hovel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TABLE</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap TABLE</h3>
<table class="table table-hovel">
<tr>
<th>sno</th>
<th>entno</th>
<th>name</th>
<th>course</th>
<th>place</th>
</tr>
<tr>
<td>1</td>
<td>A6551</td>
<td>rohit</td>
<td>hdfd</td>
<td>theni</td>
</tr>
<tr>
<td>2</td>
<td>A6552</td>
<td>dhinesh</td>
<td>hdca</td>
<td>andipatti</td>
</tr>
<tr>
<td>3</td>
<td>A6553</td>
<td>prakathesh</td>
<td>tally prime</td>
<td>jakkampatti</td>
</tr>
<tr>
<td>4</td>
<td>A6554</td>
<td>praveen</td>
<td>java</td>
<td>madurai</td>
</tr>
<tr>
<td>5</td>
<td>A6555</td>
<td>gubenthiran</td>
<td>python</td>
<td>django</td>
</tr>
</table>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
No comments:
Post a Comment