Menu
Im displaying images in a bootstrap image carousel with php. How do I restructure the code to display the 'banner_title' under the image? The 'banner_title' is currently displayed over the image.
Ive tried using css to position the caption text.
$output .= '
<img src="banner/'.$row["banner_image"].'" alt="'.$row["banner_title"].'" />
<div class="carousel-caption">
<h3>'.$row["banner_title"].'</h3>
</div>
</div>
I have tried using css like this
$output .= '
<img src="images/'.$row["banner_image"].'" alt="'.$row["banner_title"].'" />
<div class="carousel-caption">
<h3>'.$row["banner_title"].'</h3>
</div>
</div>
';
$count = $count + 1;
}
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Abc LiquorMart Deals</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
h3 {color: white; font-size: 14px; float: left;}
body {background-color: black;}
h2 {color: white;}
362
Output Buffering is a method to tell the PHP engine to hold the output data before sending it to the browser.
Definition and Usage. The flush() function requests the server to send its currently buffered output to the browser. The server configuration may not always allow this to happen.
Delete an output buffer and send its contents to the browser: ob_start(); echo "This output will be sent to the browser"; ob_end_flush();
If this is just the standard Bootstrap v4 Carousel, you can override the CSS position property to place the caption at the bottom
.carousel-caption {
position: static;
background: grey; /* You'll want to set this to something */
}
JSFiddle Demo
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
