Click here to Skip to main content
15,798,508 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
See more:
I am creating some alert message, somehow, it does not seem like I am doing this the right way and need some assistance. This issue is that it is displaying message as raw data from back end, not style alert as expected.

What I have tried:

HTML
<!-- Products Start -->

   <div class="container-fluid pt-5">
       <div class="text-center mb-4">
                           <!--alert messages-->
   <div id="alert">
       <?php echo $result;?>
   </div>
           <h2 class="section-title px-5">
       Trandy Products</h2>
       </div>
       <div class="row px-xl-5 pb-3">
           <div class="col-lg-3 col-md-6 col-sm-12 pb-1">
               <div class="card product-item border-0 mb-4">
                   <div class="card-header
                   product-img position-relative overflow-hidden
                   bg-transparent border p-0">
                       <img class="img-fluid w-100"
                       src="img/product-1.jpg" alt="">
                   </div>
                   <div class="card-body border-left border-right
                   text-center p-0 pt-4 pb-3">
                       <h6 class="text-truncate mb-3">
                       Colorful Stylish Shirt</h6>
                       <div class="d-flex justify-content-center">
                           <h6>R123.00</h6>
                           <h6 class="text-muted ml-2">
                           <del>R123.00</del></h6>
                       </div>
                   </div>
                   <div class="card-footer d-flex
                       justify-content-between bg-light border">
                       <a href="" class="btn btn-sm text-dark p-0">
                       View Detail</a>
                   <a href="" class="btn btn-sm text-dark
                   p-0 add-to-cart-btn" data-id="3">
                   ^__i class="fas fa-shopping-cart text-primary mr-1">
                   Add To Cart</a>
               </div>
           </div>
       </div>
       <div class="col-lg-3 col-md-6 col-sm-12 pb-1">
           <div class="card product-item border-0 mb-4">
               <div class="card-header product-img
               position-relative overflow-hidden
               bg-transparent border p-0">
                   <img class="img-fluid w-100"
                   src="img/product-4.jpg" alt="">
               </div>
               <div class="card-body border-left
               border-right text-center p-0 pt-4 pb-3">
                   <h6 class="text-truncate mb-3">
                   Colorful Stylish Shirt</h6>
                   <div class="d-flex justify-content-center">
                       <h6>R123.00</h6>
                       <h6 class="text-muted ml-2">
                       <del>R123.00</del></h6>
                   </div>
               </div>
               <div class="card-footer d-flex
                   justify-content-between bg-light border">
                   <a href="" class="btn btn-sm text-dark p-0">
                   ^__i class="fas fa-eye text-primary mr-1">
                   View Detail</a>
                   <a href="" class="btn btn-sm text-dark
                   p-0 add-to-cart-btn" data-id="4">
                   ^__i class="fas fa-shopping-cart text-primary mr-1">
                   Add To Cart</a>
               </div>
           </div>
       </div>


PHP
// Item already exists in the user's cart
                echo '<div class="alert alert-success 
                alert-dismissible fade show" role="alert">
                        Item is already in the cart.
                        <button type="button" class="btn-close" 
                        data-bs-dismiss="alert" aria-label="Close">
                        </button>
                      </div>';
Posted
Updated 16-Aug-23 9:27am
v2
Comments
Andre Oosthuizen 16-Aug-23 12:50pm    
Come Gcobani, you should know by now - where does '$result' come from, which page or what code? Does it have a value when you echo it out? Where is your style code for 'alert' div?
Gcobani Mkontwana 16-Aug-23 19:57pm    
@Andre its php script that echo using bootstrap message, but on the UI it prompts raw message not as style, i have cdn libraries uses this on my html page.

1 solution

I am not sure what you mean by "raw" message?

I tried your code and it worked fine, I added a style of 'grey' background and it still displays fine. I ran the code on the W3Schools Editor - Editor[^] which uses bootstrap as default and it behaved like expected. The code I tested -
HTML
<!DOCTYPE html>
<html>
<body>

<?php
    $result = "This is my alert message";
?>

<div id="alert" style = "background-color: grey;">
	<?php echo $result;?>
</div>

</body>
</html>
 
Share this answer
 
Comments
Gcobani Mkontwana 17-Aug-23 3:11am    
@Andre i think i get the picture, let me amend my style. bootstrap alert message should comes with its styles fine now. Thanks a lot.
Andre Oosthuizen 17-Aug-23 3:15am    
You're welcome!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900