BOOTSTRAP
BOOTSTRAP SIMPLE PROGRAM:
<!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>WELCOME PAGE</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<H1>HELLO,WORLD</H1>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
OUTPUT:
CONTAINER&CONTAINER-FULID->(SPACE)
<!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>CONTAINER</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<H1>WELCOMEPAGE</H1>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
CONTAINER-WELL->(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>CONTAINER</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container well">
<H1>WELCOMEPAGE</H1>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
GRID SYSTEM
<!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>GRID SYSTEM</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container fluid">
<H3>GRID SYSTEM</H3>
<div class="row">
<div class="col-md-6 col-sm-12 well">Box-1</div>
<div class="col-md-6 col-sm-12 well">Box-2</div>
<div class="col-md-4 col-sm-12 well">Box-3</div>
<div class="col-md-4 col-sm-12 well">Box-4</div>
<div class="col-md-4 col-sm-12 well">Box-5</div>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Text Properties
Text color
<!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>TEXT PROPERTIES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Text Properties</h3>
<P class="text-primary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam quam harum deleniti aut velit adipisci. Quidem nostrum reiciendis perspiciatis obcaecati eligendi alias quas. Placeat, facere qui. Quisquam exercitationem suscipit ab!</P>
<P class="text-sucess">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis iste architecto odio, possimus id sapiente nemo ad sit saepe consequatur, animi ducimus ipsa praesentium ut, est obcaecati dignissimos aliquid quo!</P>
<P class="text-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi fuga dolor odit? Et dolor voluptatem fugit quaerat odio eius porro tempora architecto velit, soluta quo inventore quam minima itaque doloremque.</P>
<P class="text-warning">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In voluptatibus error tempore ad, saepe, dolorem impedit quis at vel itaque non voluptates a alias sapiente aliquid rem, reprehenderit nisi obcaecati!</P>
<P class="text-danger">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, molestiae provident! Optio ipsa sunt repellendus sapiente. Quis eos voluptate quasi doloremque impedit dolor ipsa harum accusamus debitis, ea recusandae voluptatem?</P>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Background color
<!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>TEXT PROPERTIES</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Text Properties</h3>
<P class="bg-primary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam quam harum deleniti aut velit adipisci. Quidem nostrum reiciendis perspiciatis obcaecati eligendi alias quas. Placeat, facere qui. Quisquam exercitationem suscipit ab!</P>
<P class="bg-success">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis iste architecto odio, possimus id sapiente nemo ad sit saepe consequatur, animi ducimus ipsa praesentium ut, est obcaecati dignissimos aliquid quo!</P>
<P class="bg-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi fuga dolor odit? Et dolor voluptatem fugit quaerat odio eius porro tempora architecto velit, soluta quo inventore quam minima itaque doloremque.</P>
<P class="bg-warning">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In voluptatibus error tempore ad, saepe, dolorem impedit quis at vel itaque non voluptates a alias sapiente aliquid rem, reprehenderit nisi obcaecati!</P>
<P class="bg-danger">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, molestiae provident! Optio ipsa sunt repellendus sapiente. Quis eos voluptate quasi doloremque impedit dolor ipsa harum accusamus debitis, ea recusandae voluptatem?</P>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Particular word highlight
<!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>HIGH LIGHTS</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>HIGH LIGHTS</h3>
<P>Welcome <i class="lead">page</i></P>
<P>Welcome <i class="small">page</i></P>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Alignment
<!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>Alignment</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>ALIGNMENT</h3>
<p class="text-left">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur quae voluptates odio explicabo ratione tempora earum necessitatibus? Pariatur illum et ab repellendus eos! Facere culpa ratione facilis eaque possimus explicabo!</p>
<p class="text-right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel hic autem, a dolores ullam consectetur! Iure fugiat pariatur, ab, ratione omnis, iste aperiam nam dolores tempora vero expedita enim impedit?</p>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus corporis qui hic. Assumenda culpa excepturi perferendis libero, minus dignissimos necessitatibus aspernatur aut amet soluta consequuntur eveniet hic! Nam, tempore nemo.</p>
<p class="text-justify">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio repudiandae eos ea at tempora ipsa officiis laboriosam, corporis incidunt expedita iste accusantium adipisci neque temporibus. Labore deserunt molestias illo incidunt.</p>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
output:
Text(Small,Capital)
<!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>Alignment</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>ALIGNMENT</h3>
<p class="text-lowercase">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur quae voluptates odio explicabo ratione tempora earum necessitatibus? Pariatur illum et ab repellendus eos! Facere culpa ratione facilis eaque possimus explicabo!</p>
<p class="text-uppercase">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel hic autem, a dolores ullam consectetur! Iure fugiat pariatur, ab, ratione omnis, iste aperiam nam dolores tempora vero expedita enim impedit?</p>
<p class="text-capitalized">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus corporis qui hic. Assumenda culpa excepturi perferendis libero, minus dignissimos necessitatibus aspernatur aut amet soluta consequuntur eveniet hic! Nam, tempore nemo.</p>
</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