Bootstrap alert Example with pure css

Bootstrap

Sometimes, Bootstrap cannot use in your environment, we can only use pure css in HTML.

Code

Sometimes, Bootstrap cannot use in your environment, We can use following code and the result can be like http://www.w3schools.com/bootstrap/bootstrap_alerts.asp :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap alert Example with pure css </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="container">

        <div style="color: #3c763d;background-color: #dff0d8; border-color: #d6e9c6;padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px;">
            <a href="#" style=" text-decoration: none; float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: .2;" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Success!</strong> This alert box could indicate a successful or positive action.
        </div>
    </div>
</body>

</html>

the Above code is written with pure css.

Demo

The demo link: Demo

Online Demo here:

Thanks for reading this article. Any code samples provided here are purely for experimental purposes. The primary purpose of this article is just to share the knowledge and my own experience. Nothing more, nothing less. Use this code and approach at your own risk.Please feel free to contact me (yamshingkwan@gmail.com) if you have any inquiry or the code have any problem. Thank you.

HTML, CSS, Bootstrap
 Previous Post

Salesforce, Apex