Drift BootStrap 4, HTML, jQuery
  • Overview
  • Installation and Setup
    • Setup
    • Folders and Files Structure
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Input Group
    • Jumbotron
    • List Group
    • Navbar
    • Navs & Tabs
    • Pagination
    • Progress Bar
    • Scrollspy
    • Typography
  • Classic Version
    • Setup
    • Folders and Files Structure
    • Theme Customizaton
    • RTL Version
Powered by GitBook
On this page
  • Default Alert
  • Alert With Link
  • Additional Content Alert
  • Dismissing Alert

Was this helpful?

  1. Components

Alerts

PreviousRTL VersionNextBadges

Last updated 5 years ago

Was this helpful?

Default Alert

<div class="alert alert-primary" role="alert">
      A simple primary alert—check it out!
</div>

<!-- 
Above is an example of primary alert. You can use the
BootStrap classes .alert-secondary, .alert-success,
.alert-danger, .alert-warning, .alert-info, .alert-light
and .alert-dark to generate the type of default alert
you want.
-->

Alert With Link

<div class="alert alert-primary" role="alert">
    A simple primary alert with <a href="javascript:void(0)" class="alert-link">an
    example link</a>. Give it a click if you like.
</div>

Additional Content Alert

<div class="alert alert-success" role="alert">
	<h4 class="alert-heading">Well done!</h4>
	<p>
		Aww yeah, you successfully read this important
	    alert message. This example text is going to run
	    a bit longer so that you can see how spacing
	    within an alert works with this kind of content.
	</p>
	<hr>
	<p class="mb-0">
		Whenever you need to, be sure to use margin utilities to keep
		things nice and	tidy.
	</p>
</div>

Dismissing Alert

<div class="alert alert-primary alert-dismissible fade show" role="alert">
	<strong>Holy guacamole!</strong> You should check in on some of those fields
	below.
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">×</span>
	</button>
</div>