Bootstrap - Upozorenja (Alerts)


Kreiranje poruka upozorenja pomoću Bootstrap-a

Okviri upozorenja često se koriste za isticanje informacija koje zahtijevaju hitnu pažnju krajnjih korisnika, poput poruka upozorenja, greške ili potvrde. Uz Bootstrap možete jednostavno stvoriti elegantno upozorenje s porukama za različite svrhe. Takođe možete dodati opcionalno dugme za zatvaranje da biste odbacili svako upozorenje. Možete stvoriti jednostavan okvir s upozorenjem o upozorenju za Bootstrap dodavanjem kontekstualne klase .alert-warning u .alert osnovnu klasu, kao što je prikazano u sljedećem primjeru:

<div class="alert alert-warning alert-dismissible fade show">
    <strong>Upozorenje!</strong> Molimo unesite valjanu vrijednost u sva obavezna polja prije nego nastavite.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Prozor za upozorenje (Alert Boxe)</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-warning alert-dismissible fade show">
        <strong>Upozorenje!</strong> Molimo unesite valjanu vrijednost u sva obavezna polja prije nego nastavite.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Upozorenje! Molimo unesite valjanu vrijednost u sva obavezna polja prije nego nastavite.


Bootstrap 4 pruža ukupno 8 različitih vrsta upozorenja. Sljedeći primjer prikazat će vam najčešće upozorenja, a to su: success, error, danger i info upozorenja.

<!-- Success Alert -->
<div class="alert alert-success alert-dismissible fade show">
    <strong>Success!</strong> Vaša poruka je uspješno poslana.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Error Alert -->
<div class="alert alert-danger alert-dismissible fade show">
    <strong>Error!</strong> Došlo je do problema prilikom slanja vaših podataka.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Warning Alert -->
<div class="alert alert-warning alert-dismissible fade show">
    <strong>Warning!</strong> Došlo je do problema s vezom.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Info Alert -->
<div class="alert alert-info alert-dismissible fade show">
    <strong>Info!</strong> Pažljivo pročitajte komentare.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Uobičajene poruke upozorenja</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible fade show">
        <strong>Success!</strong> Vaša poruka je uspješno poslana.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <!-- Error Alert -->
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>Error!</strong> Došlo je do problema prilikom slanja vaših podataka.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible fade show">
        <strong>Warning!</strong> Došlo je do problema s vezom.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-dismissible fade show">
        <strong>Info!</strong> Pažljivo pročitajte komentare.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Success! Vaša poruka je uspješno poslana.
Error! Došlo je do problema prilikom slanja vaših podataka.
Warning! Došlo je do problema s vezom.
Info! Pažljivo pročitajte komentare.


Pogledajmo nova upozorenja koja su uvedena u Bootstrap 4 koja se mogu koristiti u različite svrhe.

<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible fade show">
    <strong>Primary!</strong> Ovo je jednostavan okvir primarnog upozorenja.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Secondary Alert -->
<div class="alert alert-secondary alert-dismissible fade show">
    <strong>Secondary!</strong> Ovo je jednostavan okvir sekundarnog upozorenja.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Dark Alert -->
<div class="alert alert-dark alert-dismissible fade show">
    <strong>Dark!</strong> Ovo je jednostavno tamno upozorenje.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Light Alert -->
<div class="alert alert-light alert-dismissible fade show">
    <strong>Light!</strong> Ovo je jednostavno svijetlo upozorenje.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Nova upozorenja</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Primary Alert -->
    <div class="alert alert-primary alert-dismissible fade show">
        <strong>Primary!</strong> Ovo je jednostavan okvir primarnog upozorenja.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-dismissible fade show">
        <strong>Secondary!</strong> Ovo je jednostavan okvir sekundarnog upozorenja.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-dismissible fade show">
        <strong>Dark!</strong> Ovo je jednostavno tamno upozorenje.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light alert-dismissible fade show">
        <strong>Light!</strong> Ovo je jednostavno svijetlo upozorenje.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Primary! Ovo je jednostavan okvir primarnog upozorenja.
Secondary! Ovo je jednostavan okvir sekundarnog upozorenja.
Dark! Ovo je jednostavno tamno upozorenje.
Light! Ovo je jednostavno svijetlo upozorenje.


Dodatni sadržaj unutar upozorenja

U upozorenje možete postaviti i dodatne HTML elemente poput naslova, paragrafa i razdjelnika. Za upravljanje razmakom između elemenata možete koristiti klase margina, kao što je prikazano u sljedećem primjeru:

<div class="alert alert-warning alert-dismissible fade show">
    <h4 class="alert-heading"><i class="fa fa-warning"></i> Upozorenje!</h4>
    <p>Molimo unesite valjanu vrijednost u sva obavezna polja prije
    nego nastavite. Ako vam je potrebna pomoć, samo postavite
    pokazivač miša iznad ikone informacija pored polja obrazca.</p>
    <hr>
    <p class="mb-0">Nakon što popunite sve detalje, kliknite na dugme 'Dalje' za nastavak.</p>
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Upozorenje s dodatnim sadržajem</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-warning alert-dismissible fade show">
        <h4 class="alert-heading"><i class="fa fa-warning"></i> Upozorenje!</h4>
        <p>Molimo unesite valjanu vrijednost u sva obavezna polja prije
        nego nastavite. Ako vam je potrebna pomoć, samo postavite
        pokazivač miša iznad ikone informacija pored polja obrazca.</p>
        <hr>
        <p class="mb-0">Nakon što popunite sve detalje, kliknite na dugme 'Dalje' za nastavak.</p>
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Upozorenje!

Molimo unesite valjanu vrijednost u sva obavezna polja prije nego nastavite. Ako vam je potrebna pomoć, samo postavite pokazivač miša iznad ikone informacija pored polja obrazca.


Nakon što popunite sve detalje, kliknite na dugme 'Dalje' za nastavak.



Podudaranje boje linka unutar upozorenja

Primijenite klasu .alert-link na link unutar bilo kog okvira s upozorenjima za brzo stvaranje odgovarajućih obojenih linkova, kao što je prikazano u sljedećem primjeru:

<div class="alert alert-warning alert-dismissible fade show">
    <strong>Upozorenje!</strong> Jednostavno upozorenje s <a href="#" class="alert-link">nekim linkom</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Link unutar Bootstrap 4 upozorenja</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-warning alert-dismissible fade show">
        <strong>Upozorenje!</strong> Jednostavno upozorenje s <a href="#" class="alert-link">nekim linkom</a>.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Upozorenje! Jednostavno upozorenje s nekim linkom.


Slično, možete dodati link unutar drugih okvira upozorenja, kao što je prikazano u sljedećem primjeru:

<!-- Success Alert -->
<div class="alert alert-success alert-dismissible fade show">
    <strong>Success!</strong> Jednostavno upozorenje o uspjehu s <ahref="#"class="alert-link"> primjerom linka</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Error Alert -->
<div class="alert alert-danger alert-dismissible fade show">
    <strong>Error!</strong> Jednostavno upozorenje o opasnosti s <ahref="#"class="alert-link"> primjerom  linka</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Warning Alert -->
<div class="alert alert-warning alert-dismissible fade show">
    <strong>Warning!</strong> Jednostavno upozorenje s <ahref="#"class="alert-link"> primjerom linka</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Info Alert -->
<div class="alert alert-info alert-dismissible fade show">
    <strong>Info!</strong> Jednostavno informativno upozorenje s <ahref="#"class="alert-link"> primjerom linka</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible fade show">
    <strong>Primary!</strong> Jednostavno primarno upozorenje s <ahref="#"class="alert-link"> primjerom linka</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Secondary Alert -->
<div class="alert alert-secondary alert-dismissible fade show">
    <strong>Secondary!</strong> Jednostavno sekundarno upozorenje s <ahref="#"class="alert-link"> primjerom linka</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Dark Alert -->
<div class="alert alert-dark alert-dismissible fade show">
    <strong>Dark!</strong> Jednostavno tamno upozorenje s <ahref="#"class="alert-link"> primjerom linka</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

<!-- Light Alert -->
<div class="alert alert-light alert-dismissible fade show">
    <strong>Light!</strong>Jednostavno svijetlo upozorenje s <ahref="#"class="alert-link"> primjerom linka</a>.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Success! Jednostavno upozorenje o uspjehu s primjerom linka.
Error! Jednostavno upozorenje o opasnosti s primjerom linka.
Warning! Jednostavno upozorenje s primjerom linka.
Info! Jednostavno informativno upozorenje s primjerom linka.
Primary! Jednostavno primarno upozorenje s primjerom linka.
Secondary! Jednostavno sekundarno upozorenje s primjerom linka.
Dark! Jednostavno tamno upozorenje s primjerom linka.
Light!Jednostavno svijetlo upozorenje s primjerom linka.


Zatvaranje upozorenja putem atributa podataka (Data Attribute)

Atributi podataka pružaju jednostavan i lak način za dodavanje bliske funkcionalnosti okvirima upozorenja. Samo dodajte data-dismiss="alert" na dugme za zatvaranje i to će automatski omogućiti odbacivanje okvira s porukom upozorenja koji sadrži. Takođe dodajte .alert-disssible u .alert element radi pravilnog pozicioniranja dugmeta .close. Pogledajmo primjer:

<div class="alert alert-info alert-dismissible fade show">
    <strong>Napomena!</strong> Ovo je jednostavan primjer odbacivanja upozorenja.
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Odbacivanje Bootstrap 4 upozorenja putem atributa podataka (Data Attribute)</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-info alert-dismissible fade show">
        <strong>Napomena!</strong> Ovo je jednostavan primjer odbacivanja upozorenja.
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Napomena! Ovo je jednostavan primjer odbacivanja upozorenja.

Koristite element <button> za kreiranje dugmeta za zatvaranje za pravilno ponašanje na svim uređajima.



Zatvaranje upozorenja putem JavaScript

Takođe možete omogućiti odbacivanje upozorenja putem JavaScripta. Pogledajmo primjer:

<script>
$(document).ready(function(){
    $(".close").click(function(){
        $("#myAlert").alert('close');
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Odbacivanje Bootstrap 4 upozorenja putem JavaScript</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
<script>
$(document).ready(function(){
    $(".close").click(function(){
        $("#myAlert").alert('close');
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <div id="myAlert" class="alert alert-info alert-dismissible fade show">
        <strong>Napomena!</strong> Ovo je jednostavan primjer odbacivanja upozorenja.
        <button type="button" class="close">&times;</button>
    </div>
</div>
</body>
</html>