How to create alert message [success, info, warning, danger] using bootstrap

sogata (64)in #utopian-io • 7 years ago (edited)

What Will I Learn?

You will learn how to create alert message
You will learn how to modify alert to variant colors
You will learn some class in bootstrap to build the alert message

Requirements

You have basic about HTML
You have basic about CSS
You have basic about Javascript
To practice this tutorial need an text editor, browser and host or install Bootstrap file (or you can also add Bootstrap CDN if you don't want to install or host it).

Difficulty

Basic

Tutorial Contents

Alert Message is some message in web to display an information to client. It usually appear after some action. for example : when we failed to login, we will get some message appear under or on login form "FAILED!!! username and password is no match". This is named alert message.

Bootstrap provides an easy way to create predefined alert messages. We just need to use some class and we did not to use CSS manually. For more detail, pay attention on the steps bellow :

Open your text editor.
Create a new file and save as htlm extention. for ex : alert.html
As we know for using bootstrap we should use HTML5 Doctype. Add the HTML5 element on your file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alert</title>
</head>
<body>
</body>
</html>

For using bootstrap framework we should install or host bootstrap file first. If we don't want to do that, you can also add Bootstrap CDN as a replacement. You can visit bootstrap official website to get it. add and put it in <head> element :

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

after adding the CDN, we can just start coding the bootstrap. To create the Alert message from bootstrap we can use the .alert class that has provided by bootstrap.

    <div class="alert">
        <strong>MESSAGE !!!</strong> The message appear
    </div>

The alert still in default display. To create success, info, warning, danger alert message we need to add other more style class after alert class. .alert-success for succes alert message. .alert-info for info alert message. .alert-warning for warning alert message and .alert-danger for danger alert message.
Now, try to add .alert-success to create success alert message .

    <div class="alert alert-success">
        <strong>SUCCESS !!!</strong> The message has been appear
    </div

create the info alert message by adding .alert-info

<div class="alert alert-info">
            <strong>INFO !!!</strong> The message has been appear
    </div>

Add the .alert-warning class for creating the warning alert message.

<div class="alert alert-warning">
            <strong>WARNING !!!</strong> The message has been appear
    </div>

The last add .alert-danger class to create danger alert message.

    <div class="alert alert-danger">
            <strong>DANGER !!!</strong> The message has been appear
    </div>

Finish, These are kind of alert message from bootstrap framework. you can use it the corresponding
situation. For example , Danger message to appear information if user fail to login, Success message to appear information if user success to login. Here full code from this tutorial :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alert</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <br>
    <div class="alert alert-success">
        <strong>SUCCESS !!!</strong> The message has been appear
    </div>
    <div class="alert alert-info">
            <strong>INFO !!!</strong> The message has been appear
    </div>
    <div class="alert alert-warning">
            <strong>WARNING !!!</strong> The message has been appear
    </div>
    <div class="alert alert-danger">
            <strong>DANGER !!!</strong> The message has been appear
    </div>
</body>
</html>

FULL CODE AND LIVE DEMO

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

#tutorials #opensource #bootstrap #aceh

7 years ago in #utopian-io by sogata (64)

$39.65

Sort:

Trending

[-]

shreyasgune (58) 7 years ago

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

$1.00

1 vote

[-]

blackkim (42) 7 years ago

pos nya sangat keren @sogata

$0.18

1 vote

[-]

sogata (64) 7 years ago

Terimong genaseh bang refi

$0.00

[-]

yunasss98 (8) 7 years ago (edited)

Good post
Salam hangat dari santri misbah beserta mahasiswa tik pnl
@sogata

$0.18

2 votes

[-]

sogata (64) 7 years ago

Jroh jroh, hot greating dek nyo??

$0.00

[-]

yunasss98 (8) 7 years ago

Aha, bisa jadi bang.

$0.17

1 vote

[-]

jol09 (52) 7 years ago

good post bg.
and very useful.

$0.00

1 vote

[-]

utopian-io (71) 7 years ago

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

$0.00

1 vote

[-]