web-designing-using-react-js/sample.html at master · Batchusatyasri/web-designing-using-react-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="viewport" content="width=device-width initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.card{
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}
</style>
<style type="text/css">
	.row{
          border: solid blue;
	}
</style>
</head>
<body>
	<p>Good morning</p>
    <p class="h1">Good morning</p>
    <p class="h2">Good morning</p>
    <p class="h4">Good morning</p>
    <p class="h6">Good morning</p>
    <p class="text-left">Good morning</p>
    <p class="text-center">Good morning</p>
    <p class="text-right">Good morning</p>
    <div class="hello">
    	<h3>Button size</h3>
    	<button type="button" class="btn">Click me</button>
    	<button type="button" class="btn btn-primary">Click me</button>
    	<button type="button" class="btn btn-primary btn-sm">Click me</button>
    	<button type="button" class="btn btn-primary btn-xs">Click me</button>
    	<button type="button" class="btn btn-primary btn-lg">Click me</button>
    	 </div>
    	 <div class="alert123">
    	 	<div class="alert">hello</div>
    	 	<div class="alert-success">hello</div>
    	 	<div class="alert-info">hello</div>
    	 	<div class="alert alert-warning">hello</div>
    	 </div>
    	 <div class="card text-center">
    	 	<img class="card-img-top" src="images/hello.jpg">
    	 	<div class="card-body text-center">react-js</div>
    	 	<div class="card-body text-center">apssdc</div>
    	 	<div class="card-title text-center">onine summer training program</div>
    	 	<button type="button" class="btn btn-primary">register</button>
    	 </div>
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
<div class="row">
	<div class="col-md-6">1</div>
	<div class="col-md-4">2</div>
    <div class="col-md-1">3</div>
    <div class="col-md-1">4</div>
</div>
<div class="row">
	<div class="col-md-6">1</div>
	<div class="col-md-6">2</div>
</div>
</body>
</html>