Alert components without Bootstrap

To create a simple HTML alert box, you really don’t need a large CSS framework like Bootstrap. You only need a few lines of HTML, CSS, and one line of JavaScript.

In this post, I will show how you can create an alert box similar to Bootstrap but without using any framework. You’ll also get a close icon on the right side of each alert and the alert box will disappear once you click the icon.

Let’s get started.

Alert components using only HTML, CSS & JavaScript

Before I give you the same code, see all the alert components below.

Examples

This is a primary alert—check it out! ×
This is a secondary alert—check it out! ×
This is a success alert—check it out! ×
This is a danger alert—check it out! ×
This is a warning alert—check it out! ×
This is a info alert—check it out! ×
This is a light alert—check it out! ×
This is a dark alert—check it out! ×

As you see, the above alert boxes are very similar to the Bootstrap component. But they have been created using only HTML, CSS & one line of JavaScript. Additionally, you got an option to close the alert.

Find their code below.

HTML

<div class="alert primary">
  This is a primary alert—check it out!
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>
<div class="alert secondary">
  This is a secondary alert—check it out!
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>
<div class="alert success">
  This is a success alert—check it out!
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>
<div class="alert danger">
  This is a danger alert—check it out!
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>
<div class="alert warning">
  This is a warning alert—check it out!
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>
<div class="alert info">
  This is a info alert—check it out!
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>
<div class="alert light">
  This is a light alert—check it out!
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>
<div class="alert dark">
  This is a dark alert—check it out!
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>

CSS

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.alert .close {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #F70000;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.5rem;
}

.alert.primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
.alert.secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}
.alert.success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert.danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert.warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
.alert.info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
.alert.light {
  color: #818182;
  background-color: #FCFCFD;
  border-color: #DEE1E6;
}
.alert.dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

For each variation, we are only changing the color, background-color and border-color.

JavaScript is added directly to the HTML. “onclick” is an event that occurs when someone clicks the HTML element. In our case, we’re hiding the parent element <div> (using display: none).

Additional content in the alert box

Aside from the one-line message, you can also include multiple HTML elements in your alert components.

Example

Natus officiis fugit!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dignissimos corrupti delectus, quis asperiores alias sit porro saepe beatae minus, maxime recusandae magnam. Natus officiis fugit soluta obcaecati.


Consectetur adipisicing elitorporis necessitatibus pariatur neque ipsum voluptatibus.

×

You’ll find a similar alert box on the Bootstrap website. Here only exception is the horizontal line gradient color (<hr>).

The above is an example to show you how to add additional content like a heading, paragraph, etc to your alert box. See its HTML & CSS below.

HTML

<div class="alert-additional">
  <h4>Natus officiis fugit!</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam dignissimos corrupti delectus, quis asperiores alias sit porro saepe beatae minus, maxime recusandae magnam. Natus officiis fugit soluta obcaecati.</p>
  <hr>
  <p>Consectetur adipisicing elitorporis necessitatibus pariatur neque ipsum voluptatibus.</p>
  <span class="close" onclick="this.parentElement.style.display='none'">×</span>
</div>

CSS

.alert-additional {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  margin: 20px;
}
.alert-additional hr {
  border: 0;
  height: 3px;
  background-image: -webkit-gradient(linear, left top, right top, from(#32a852), to(#fc2b23));
  background-image: linear-gradient(90deg, #32a852, #fc2b23);
  border-radius: 5px;
}
.alert-additional .close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #F70000;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.5rem;
}

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview

Conclusion

Now you know how to create an alert box on your own and without any framework like Bootstrap. Additionally, you learned how to add a working close icon to your alert component.

Therefore if you have any questions, feel free to ask.