-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbootstrapBasics.html
114 lines (97 loc) · 4.53 KB
/
bootstrapBasics.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!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>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.bundle.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<div class="container-fluid bg-danger">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<p class="text-muted lead">suyash Paragraphs provide your writing shape and flow. They allow you to go from one thinking to the
next. When you begin a new paragraph, you are informing your reader that the topic has come to an
end and you are moving on. Your amazing thoughts and sound logic will be difficult to follow without
this structure.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 ">
<p class="text-primary small">Paragraphs provide your writing shape and flow. They allow you to go from one thinking to the next.
When you begin a new paragraph, you are informing your reader that the topic has come to an end and
you are moving on. Your amazing thoughts and sound logic will be difficult to follow without this
structure.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p class="text-success text-small">Paragraphs <abbr title="wold" class="initialism"> WHO</abbr> provide your writing shape and flow. They allow you to go from one thinking to the next.
When you begin a new paragraph, you are informing your reader that the topic has come to an end and
you are moving on. Your amazing thoughts and souwithout this structure.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p class="text-info initialism">Paragraphs provide your writing shape and flow. They allow you to go from one thinking to the next.
When you begin a new paragraph, you are informing your reader that the topic has come to an end and
you are moving on. Your amazing thoughts and sound logic will be difficult to follow without this
structure.</p>
</div>
</div>
</div>
<div class="container-fluid" >
<div class="row">
<div class="col-lg-3">
<p class="text-warning text-uppercase">aragraphs provide your writing shape and flow. They allow you to go from one thinking to the next.
When you begin a new paragraph, you are informing your reader that the topic has come to an end and
you are moving on. Your amazing thoughts</p>
</div>
<div class="col-lg-9">
<p class="text-danger text-lowercase">aragraphs provide your writing shape and flow. They allow you to go from one thinking to the next.
When you begin a new paragraph, you are informing your reader that the topic has come to an end and
you are moving on. Your amazing thoughts</p>
</div>
</div>
</div>
<div class="container-fluid">
<ul class="list-unstyled">
<li>tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
</ul>
</div>
<div class="container-fluid">
<dl class="dl-horizontal">
<dt>Coffee</dt>
<dd>-black hot drink</dd>
<dt>Milk</dt>
<dd>-white cold drink</dd>
</dl>
</div>
<div class="container-fluid">
<ul class="list-inline">
<li class="list-inline-item">Coffee</li>
<li class="list-inline-item">Tea</li>
</ul>
</div>
<div class="container pt-5">
<h1>MY Name</h1>
</div>
<div class="">
</div>
<div class="container p-5 my-5 border">
<h1>My name</h1>
</div>
<div class="container p-5 my-5 bg-dark text-white">
<h1>My Name</h1>
</div>
<p class="text-info">This is </p>
<p class="text-black-50">Black text with 50%</p>
<p class="text-white-50 bg-dark">White text with</p>
<p class="text-bg-primary">This is</p>
<p class="bg-danger">This is </p>
</body>
</html>