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
<div class="container">
  <div class="row mt-3">
    <div class="col-lg-6">
      <div class="alert alert-success mb-3" role="alert">
        <h4 class="alert-heading">Well done!</h4>
        <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
        <hr>
        <p class="mb-0">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>

      </div>

      <div class="alert alert-warning mb-3" role="alert">
        <h4 class="alert-heading">Well done!</h4>
        <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
        <hr>
        <p class="mb-0">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>

      </div>
    </div>
    <div class="col-lg-6">
      <div class="alert alert-danger mb-3" role="alert">
        <h4 class="alert-heading">Well done!</h4>
        <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
        <hr>
        <p class="mb-0">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>

      </div>
      <div class="alert alert-info mb-3" role="alert">
        <h4 class="alert-heading">Well done!</h4>
        <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
        <hr>
        <p class="mb-0">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>

      </div>
    </div>
  </div>

Preview

Alert Example with header footer

Leave a Reply

avatar
  Subscribe  
Notify of