Alert - offset icon, header and body text

bootstrap notify
jquery ui notification
bootstrap notification bubble
notify js example
bootstrap alert popup
material-icons align with text
bootstrap notification bar
jquery notification message box

I am trying to create a system alert message that was mocked up (only grahpically) to looks like this:

However, I have not been able to do so as I am not much of a front-end developer/UX person, so I am reaching out to the community for input.

HTML:

<div class="apparent-message warning-message">
  <div class="message-container">
    <div class="apparent-message-icon fa fa-fw fa-2x fa-exclamation-triangle">
        </div>
        <div class="content-container">
            <div class="message-header">
                <span>Header</span>
            </div>
            <div class="message-body">Message</div>
            <div class="message-action">View</div>
        </div>
  </div>
</div>

CSS:

.apparent-message {
    height: 75px;
    width: 75%;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 50px;

    .apparent-message-icon {
        font-size: 3em;
        color: #fff;
        padding: 15px 0px 0px 0px;
        .fa-2x{
            box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.45);
        }
        text-shadow: 1px 1px 10px #000;
        width: 100%;
        height: 100%;
    }
}

.message-container {
    > div {
        display: inline-block;
    }
    .icon-col {
        width: 7%;
    }
    .content-container {
        width: 92.4%;
        height: 98%;
        padding-left: 15px;
        background-color: #fff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
        .message-header {
            margin-top: 10px;
            font-size: 20px;
        }
        .message-body {
            margin-top: 10px;
            font-size: 14px;
            color: #515151;
        }
        .message-action {
            position: absolute;
            right: 30px;
            bottom: 10px;
        }
    }
}

.warning-message {
    background-color:#f39b0e;
    border-color: #f39b0e;
}

.info-message {
    background-color:#3598db;
    border-color: #3598db;
}

.success-message {
    background-color:#43a046;
    border-color: #43a046;
}

.error-message {
    background-color:#e1374c;
    border-color: #e1374c;
}

Here is an accompanying JSFiddle with an attempt to accomplish this.

https://jsfiddle.net/latchkostov/dLL1r1ap/

hey @blgrnboy here the fiddle with working demo

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body {
  padding: 50px;
    font-family: 'Open Sans', sans-serif;
}

.apparent-message {
  width: 100%;
  border-style: solid;
  border-width: 2px;
  margin-bottom: 50px;
}
.apparent-message .apparent-message-icon {
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  text-shadow: 1px 1px 10px #000;
}
.apparent-message .apparent-message-icon .fa-2x {
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.45);
}

.message-container {
  display: flex;
}
.message-container .content-container {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 75px;
  padding-left: 15px;
  background-color: #fff;
  
  position: relative;
}
.message-container .content-container .message-header {
  font-size: 20px;
}
.message-container .content-container .message-body {
  margin-top: 10px;
  font-size: 14px;
  color: #515151;
}
.message-container .content-container .message-action {
  position: absolute;
  bottom: 10px;
  right: 30px;
}

.warning-message {
  background-color: #f39b0e;
  border-color: #f39b0e;
}

.warning-message .message-action,
.warning-message .message-header{
  color: #f39b0e;
}

.info-message {
  background-color: #3598db;
  border-color: #3598db;
}

.info-message .message-action,
.info-message .message-header{
  color: #3598db;
}

.success-message {
  background-color: #43a046;
  border-color: #43a046;
}

.success-message .message-action,
.success-message .message-header{
  color: #43a046;
}

.error-message {
  background-color: #e1374c;
  border-color: #e1374c;
}

.error-message .message-action,
.error-message .message-header{
  color: #e1374c;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="apparent-message warning-message">
  <div class="message-container">
    <div class="apparent-message-icon fa fa-fw fa-2x fa-exclamation-triangle">
        </div>
        <div class="content-container">
            <div class="message-header">
                <span>Header</span>
            </div>
            <div class="message-body">Message</div>
            <div class="message-action">View</div>
        </div>
  </div>
</div>

Bootstrap Notify v3.1.3, Header Image Displaying Bootstrap Notify messages Message: Turning standard Bootstrap alerts into "Growl-like" notifications This icon can either be a class (Font Icon) or an image url. offset, integer, 20, This adds padding in pixels between the element and the notification creating a space between their edges. I'm converting PDF's into Word documents and MS Word 2007 is detecting text on the top and bottom as headers and footers and I must have all text in the document show up as regular text.

Hi You can do that using HTML 5 only. please find the example below.

var close = document.getElementsByClassName("closebtn");
var i;

for (i = 0; i < close.length; i++) {
    close[i].onclick = function(){
        var div = this.parentElement;
        div.style.opacity = "0";
        setTimeout(function(){ div.style.display = "none"; }, 600);
    }
}
.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}

.alert.success {background-color: #4CAF50;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Alert Messages</h2>
<p>Click on the "x" symbol to close the alert message.</p>
<div class="alert">
  <span class="closebtn">&times;</span>  
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

<div class="alert success">
  <span class="closebtn">&times;</span>  
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert info">
  <span class="closebtn">&times;</span>  
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert warning">
  <span class="closebtn">&times;</span>  
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>
</body>
</html>

jquery-confirm.js, alerts, confirms and dialogs in one. body is the body div for jquery-confirm. explicitly show the close icon; buttons: {; buttonA: {; text: 'button a',; action: function (buttonA) {; this.buttons. medium / m equivalent to col-md-6 col-md-​offset-3 Quickly find your Bootstrap classes on this interactive Bootstrap cheat sheet. It includes code samples and live preview of elements.

Try this, Make change according to your need

.warning-box{float:left;width:100%;position:relative;border:1px solid yellow;margin-bottom:15px;}
info{border:1px solid blue;}
.icon{float:left;width:100px;background:yellow;height:100px;text-align:center;position:relative;overflow:hidden;}
.info .icon{background:blue;}
.icon span{position:absolute;top:auto;margin:33% auto;left:0;right:0;bottom:auto}
.text{float:left;width:calc(100% - 220px);width:-webkit-calc(100% - 200px);padding:5px;}
.view{float:left;width:90px;text-align:center;position:relative;height:100px}
.view span{position:absolute;bottom:10px;left:10px;}
<div class="warning-box">
<div class="icon"><span>⚠️</span></div>
<div class="text"><p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
<div class="view"><span>View</span></div>
</div>
<div class="warning-box info">
<div class="icon"><span>❕</span></div>
<div class="text"><p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
<div class="view"><span>View</span></div>
</div>

Material Icons, Hi, Material icons doesn't seems to vertical align themselves when .panel-​heading > i{ vertical-align: middle !important; } I usually rely on a 1em body font size with a 1.5 line-height, so this em here is intentional instead of rem to give the margin fix offset relative to the font size of the nearest container,  The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of a tabs, icons aligned left, within the card-footer.

Header, Check out Ionicons, our custom-built icon font made specifically for Ionic. bar was added to the default header bar, as well as in the main content area of the screen. <div class="row"> <div class="col col-33 col-offset-33">.col</div> <div  Everything you need to know to adopt SwiftUI. All the answers you found here don't mean to be complete or detail, the purpose here is to act as a cheat sheet or a place that you can pick up keywords you can use to search for more detail.

Popovers · Bootstrap, Specify container: 'body' to avoid rendering problems in more complex components (like our The popover's title will be injected into the .popover-​header . The button text is suppressed, and only the icon is shown. The result is a circular button the size of the icon. Theme

Tooltips · Bootstrap, Alerts · Badge · Breadcrumb · Buttons · Button group · Card · Carousel · Collapse Approach · Icons Specify container: 'body' to avoid rendering problems in more complex components (like HTML to write --> <a href="#" data-toggle="​tooltip" title="Some tooltip text! For more information refer to Popper.js's offset docs. Be alert for scammers posting fake support phone numbers on the community. If you think you have received a fake HP Support message, please report it to us by clicking on "Flag Post". If you think you have received a fake HP Support message, please report it to us by clicking on "Flag Post".

Comments
  • What's the question/problem? What have you tried?
  • @reergymerej edited question to include the question. Need help getting things to appear properly.
  • So you need to exact same markup right?
  • @patelarpan that is the aim
  • Ok @blgrnboy. I got it
  • I am looking for help more around how to get the look exactly like the mock-up. I do understand there are other options, but I need to implement it exactly as mocked up.
  • Then you can refernce this link here isabelcastillo.com/error-info-messages-css for the icons. That looks similar to what you need.