هشدارهای پیشفرض

<div class="alert alert-primary mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>اولیه!</strong> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</button>
</div> 

خارج از خط

<div class="alert alert-outline-primary mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>اولیه!</strong> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</div> 

لایت

<div class="alert alert-light-warning mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>اولیه!</strong> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
</div>

هشدار با آیکون

<div class="alert alert-icon-left alert-light-primary mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg  data-dismiss="alert"> ... </svg></button>
    <svg> ... </svg>
    <strong>هشدار!</strong> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
</div>

<div class="alert alert-icon-right alert-light-primary mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg  data-dismiss="alert"> ... </svg></button>
    <svg> ... </svg>
    <strong>هشدار!</strong> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
</div> 

هشدار با پیکان

<div class="alert alert-arrow-left alert-icon-left alert-light-primary mb-4"
role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <svg> ... </svg>
    <strong>هشدار!</strong> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
</div>

<div class="alert alert-arrow-right alert-icon-right alert-light-primary mb-4"
role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <svg> ... </svg>
    <strong>هشدار!</strong> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.
</div> 

هشدارهای سفارشی

<div class="alert custom-alert-1 mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> .... </svg></button>
    <div class="media">
        <div class="alert-icon">
            <svg> .... </svg>
        </div>
        <div class="media-body">
            <div class="alert-text">
                <strong>هشدار! </strong><span> لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</span>
            </div>
            <div class="alert-btn">
                <button type="button" class="btn btn-default btn-dismiss">Accept</button>
            </div>
        </div>
    </div>
</div>
<div class="alert alert-gradient mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>New!</strong> هشدار با طیف رنگی
</div> 
<div class="alert alert-background mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>New!</strong> هشدار با عکس بک گراند
</div>