Bootstrap alert message using PHP and HTML

Question

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>

Posted 16-Aug-23 4:17am

Gcobani Mkontwana

Updated 16-Aug-23 8:27am

Deeksha Shenoy

v2

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Andre Oosthuizen · Accepted Answer · 2023-08-16T20:58:00

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 -