Bootstrap_4.0/tipografias.html at master · AlejoCode/Bootstrap_4.0 · 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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, mininum-scale=1.0">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

  <title>Typography and Texts!</title>
  <style>

</style>
</head>

<body>
  <div class="container-fluid border border-success">
    <div class="row">
      <div class="col-12">
        <hr>
        <h1>Header tags</h1>
        <h1>Header H1 <small class="text-muted">Secondary Text</small></h1>
        <h2>Header H2 <small class="text-muted">Secondary Text</small></h2>
        <h3>Header H3 <small class="text-muted">Secondary Text</small></h3>
        <h4>Header H4 <small class="text-muted">Secondary Text</small></h4>
        <h5>Header H5 <small class="text-muted">Secondary Text</small></h5>
        <h6>Header H6 <small class="text-muted">Secondary Text</small></h6>
      </div>

      <div class="col-12">
        <hr>
        <h1>Paragraphs with Headers Style </h1>
        <p class="h1">Paragraph with Style Header H1</p>
        <p class="h2">Paragraph with Style Header H2</p>
        <p class="h3">Paragraph with Style Header H3</p>
        <p class="h4">Paragraph with Style Header H4</p>
        <p class="h5">Paragraph with Style Header H5</p>
        <p class="h6">Paragraph with Style Header H6</p>
      </div>

      <div class="col-12">
        <hr>
        <h1>Headers with Displays Style </h1>
        <h1 class="display-1">Header Display 1</h1>
        <h1 class="display-2">Header Display 2</h1>
        <h1 class="display-3">Header Display 3</h1>
        <h1 class="display-4">Header Display 4</h1>

      </div>

      <div class="col-12">

        <hr>
        <h1>Paragraph with Leader Style </h1>


        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum sit voluptates illo modi repellat doloremque possimus aliquam amet libero assumenda voluptatum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum sit voluptates illo modi repellat doloremque possimus aliquam amet libero assumenda voluptatum.</p>


      </div>

      <div class="col-12">
        <hr>
        <h1>Paragraph with Different Styles </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.'  &nbsp;&nbsp;---//Normal<'p'>//</p>
        <p><mark>Lorem ipsum dolor sit amet, consectetur adipisicing. </mark>&nbsp;&nbsp;---//<'p'> With <'mark'>//</p>
        <p><del>Lorem ipsum dolor sit amet, consectetur adipisicing.</del>&nbsp;&nbsp;---//<'p'> With <'del'>//</p>
        <p><s>Lorem ipsum dolor sit amet, consectetur adipisicing.</s>&nbsp;&nbsp;---//<'p'> With <'s'>//</p>
        <p><ins>Lorem ipsum dolor sit amet, consectetur adipisicing.</ins>&nbsp;&nbsp;---//<'p'> With <'ins'>//</p>
        <p><u>Lorem ipsum dolor sit amet, consectetur adipisicing.</u>&nbsp;&nbsp;---//<'p'> With <'u'>//</p>
        <p><small>Lorem ipsum dolor sit amet, consectetur adipisicing.</small>&nbsp;&nbsp;---//<'p'> With <'small'>//</p>
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing.</strong>&nbsp;&nbsp;---//<'p'> With <'strong'>//</p>
        <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing.</em>&nbsp;&nbsp;---//<'p'> With <'em'>//</p>
      </div>

      <div class="col-12">
        <hr>
        <h1>Paragraph with text-justify Style </h1>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur illum incidunt ratione voluptate a fugit aut quae reiciendis rerum, qui impedit ipsum soluta eveniet et facere ad vel</p>
      </div>

      <div class="col-12">
        <hr>
        <h1>Normal Card</h1>
        <div class="card mb-3">
          <div class="card-body mb-1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quidem incidunt minima. Error iusto, praesentium non aliquam odio ad blanditiis!
          </div>
        </div>
      </div>

      <div class="w-100"></div>

      <div class="col-12">
        <hr>
        <h1>Different text-aligned styles</h1>
        <p class="text-left">Text aliged to the left</p>

        <p class="text-center">Text aliged to the center</p>


        <p class="text-right">Text aliged to the right</p>


      </div>
      <div class="w-100"></div>

      <div class="col-12">
        <hr>
        <h1>Responsive text-aligned styles</h1>
        <p class="text-left text-sm-right">Aligned to the right in small to upper devices</p>
        <p class="text-left text-md-right">Aligned to the right in medium to upper devices</p>
        <p class="text-left text-lg-right">Aligned to the right in large to upper devices</p>
        <p class="text-left text-xl-right">Aligned to the right in extralarge to upper devices</p>

      </div>

      <div class="w-100"></div>
      <div class="col-12">
        <hr>
        <h1> Cases with the text- SubStyles.</h1>
        <p class="text-lowercase">Lower Case //text-lowercase// Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        <p class="text-uppercase">Upper Case //text-uppercase// Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        <p class="text-capitalize">first letter of each word will be capitalize //text-capitalize// Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
      </div>

      <div class="w-100"></div>
      <div class="col-12">
        <hr>
        <h1>Fonts with the font-weight SubStyles.</h1>
        <p class="font-weight-bold">Bold Font //font-weight-bold// Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        <p class="font-weight-normal">Normal Font //font-weight-normal// Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
        <p class="font-weight-italic">Italic Font //font-weight-italic// Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
      </div>

      <div class="w-100"></div>
      <div class="col-12">
        <hr>
        <h1>blockquote tag.</h1>
        <blockquote class="blockquote">
          <p class="mb-0">Think Twice and Code Once!</p>
         <footer class="blockquote-footer"><p>Alejandro Salgado</p></footer>
       </blockquote>
     </div>
   </div>
 </div>

 <script src="js/jquery-3.3.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
</body>
</html>