Bootstrap alert and close button functionality without CSS - css

Question

I would like the Bootstrap alert and close button functionality. I've included the JQuery and Bootstrap javascript file in my page head but don not want the CSS in it because it overrides a ton of styling.
Currently I've added these parts of the Bootstrap to my own css to make the alert and close button appear.
.alert {
padding: 8px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px
}
.alert h4 {
margin-top: 0;
color: inherit
}
.alert .alert-link {
font-weight: 700
}
.alert>p,
.alert>ul {
margin-bottom: 0
}
.alert>p+p {
margin-top: 5px
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1
}
.alert-info hr {
border-top-color: #a6e1ec
}
.alert-info .alert-link {
color: #245269
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1
}
.alert-danger hr {
border-top-color: #e4b9c0
}
.alert-danger .alert-link {
color: #843534
}
#-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
#-o-keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
#keyframes progress-bar-stripes {
from {
background-position: 40px 0
}
to {
background-position: 0 0
}
}
This CSS makes the alert work as expected. The below part is for the close button. It styling has changed a bit, but I seem to be missing a few lines of CSS. Can anyone tell me which onesm can't seem to find them.
button.close { -webkit-appearance:none;padding:0;cursor:pointer;background:0;border:0}
Target HTML:
<% if (message.length > 0) { %>
<div class="alert alert-info"><%= message %><button type="button" class="close" data-dismiss="alert">x</button></div>
<% } %>

Answer 1

HTML (added alert-dismissable class, changed x to ×):
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
Message
</div>
CSS (added basic styles for close class):
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
CODEPEN EXAMPLE