Alerts and Wells

Basic Alerts

Lorem ipsum dolor sit

Culpa a temporibus, minus inventore perferendis tempore praesentium neque possimus fugit fuga enim eos ducimus velit dolorum sit laudantium autem nihil accusamus!

Lorem ipsum dolor sit

Atque nulla ipsa reprehenderit ad laboriosam consectetur laborum dolore enim placeat molestiae! Vitae, numquam fuga aut sequi commodi esse nisi ratione aliquam!

Lorem ipsum dolor sit

Repellendus est, optio atque culpa in fuga quod iure ratione dolor nam laborum consectetur fugiat. Mollitia aliquam maiores sit facere error natus.

Lorem ipsum dolor sit

Odio, adipisci, ipsum perferendis quam ex voluptatum cupiditate expedita tenetur! Optio, suscipit velit a delectus praesentium natus corrupti. Eius, quam architecto tempora.

Lorem ipsum dolor sit

Ullam reiciendis corporis, impedit tenetur cupiditate in id voluptatem libero iusto officiis distinctio quae autem dolorem dicta non atque ex excepturi cumque.

Lorem ipsum dolor sit

Repudiandae maxime sequi perspiciatis dolore molestiae corrupti voluptates accusamus quia. Totam, porro, fuga recusandae ut necessitatibus sint odit adipisci. Vero, veritatis, sequi!
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Culpa a temporibus, minus inventore perferendis tempore praesentium neque possimus fugit fuga enim eos ducimus velit dolorum sit laudantium autem nihil accusamus!
</div>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Atque nulla ipsa reprehenderit ad laboriosam consectetur laborum dolore enim placeat molestiae! Vitae, numquam fuga aut sequi commodi esse nisi ratione aliquam!
</div>
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Repellendus est, optio atque culpa in fuga quod iure ratione dolor nam laborum consectetur fugiat. Mollitia aliquam maiores sit facere error natus.
</div>
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Odio, adipisci, ipsum perferendis quam ex voluptatum cupiditate expedita tenetur! Optio, suscipit velit a delectus praesentium natus corrupti. Eius, quam architecto tempora.
</div>
<div class="alert alert-royal">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Ullam reiciendis corporis, impedit tenetur cupiditate in id voluptatem libero iusto officiis distinctio quae autem dolorem dicta non atque ex excepturi cumque.
</div>
<div class="alert alert-primary">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Repudiandae maxime sequi perspiciatis dolore molestiae corrupti voluptates accusamus quia. Totam, porro, fuga recusandae ut necessitatibus sint odit adipisci. Vero, veritatis, sequi!
</div>
                            

With icons

Info! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Success! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Warning! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Info! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Primary! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.

Alert with border

Culpa a temporibus, minus inventore perferendis tempore praesentium neque possimus fugit fuga enim eos ducimus velit dolorum sit laudantium autem nihil accusamus!

Atque nulla ipsa reprehenderit ad laboriosam consectetur laborum dolore enim placeat molestiae! Vitae, numquam fuga aut sequi commodi esse nisi ratione aliquam!

Repellendus est, optio atque culpa in fuga quod iure ratione dolor nam laborum consectetur fugiat. Mollitia aliquam maiores sit facere error natus.

Odio, adipisci, ipsum perferendis quam ex voluptatum cupiditate expedita tenetur! Optio, suscipit velit a delectus praesentium natus corrupti. Eius, quam architecto tempora.

Ullam reiciendis corporis, impedit tenetur cupiditate in id voluptatem libero iusto officiis distinctio quae autem dolorem dicta non atque ex excepturi cumque.

Repudiandae maxime sequi perspiciatis dolore molestiae corrupti voluptates accusamus quia. Totam, porro, fuga recusandae ut necessitatibus sint odit adipisci. Vero, veritatis, sequi!

<div class="alert alert-border alert-info">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Culpa a temporibus, minus inventore perferendis tempore praesentium neque possimus fugit fuga enim eos ducimus velit dolorum sit laudantium autem nihil accusamus!
</div>
<div class="alert alert-border alert-success">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Atque nulla ipsa reprehenderit ad laboriosam consectetur laborum dolore enim placeat molestiae! Vitae, numquam fuga aut sequi commodi esse nisi ratione aliquam!
</div>
<div class="alert alert-border alert-warning">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Repellendus est, optio atque culpa in fuga quod iure ratione dolor nam laborum consectetur fugiat. Mollitia aliquam maiores sit facere error natus.
</div>
<div class="alert alert-border alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Odio, adipisci, ipsum perferendis quam ex voluptatum cupiditate expedita tenetur! Optio, suscipit velit a delectus praesentium natus corrupti. Eius, quam architecto tempora.
</div>
<div class="alert alert-border alert-royal">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Ullam reiciendis corporis, impedit tenetur cupiditate in id voluptatem libero iusto officiis distinctio quae autem dolorem dicta non atque ex excepturi cumque.
</div>
<div class="alert alert-border alert-primary">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Lorem ipsum dolor sit</h4>
Repudiandae maxime sequi perspiciatis dolore molestiae corrupti voluptates accusamus quia. Totam, porro, fuga recusandae ut necessitatibus sint odit adipisci. Vero, veritatis, sequi!
</div>
                            

With icons

Info! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Success! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Warning! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Info! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.
Primary! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dicta.

Wells

Distinctio, facere quos aperiam fugiat cupiditate delectus inventore nobis quaerat voluptas fugit quibusdam assumenda incidunt consequatur! Explicabo, dolore, cumque eos saepe consequuntur totam excepturi facere voluptatem beatae esse magnam impedit dolorem nihil!

Animi, sit, reiciendis voluptas perferendis illo maiores vel a dignissimos mollitia odio doloremque dolores iusto at harum nisi nam atque beatae nobis? Sapiente, cumque aliquid incidunt voluptatem natus architecto ad magnam rerum?

Tempore, molestias, voluptate earum officiis dignissimos facilis corrupti expedita id magnam maxime atque impedit consequuntur incidunt optio dolore quaerat alias modi quisquam ratione rem aut esse fugiat saepe reiciendis deserunt ullam fuga.

<p class="well well-sm">...</p>
<p class="well">...</p>
<p class="well well-lg">...</p>