Menu
I want to use the twitter bootstrap carousel in a personal project. So far it works really well because I use the example of the bootstrap homepage.
Now I want to place simple html content instead of images there. This content should then rotate same way as the pictures. The text I put in is shown in the carousel-caption and text I put in the carousel caption is not being displayed.
Example:
<div class="item"> This is the text or html code i want to place <div class="carousel-caption"> <h4>Thumbnail label</h4> <p>Carousel caption text<p> </div> </div> Is there a way to get this work? Perhaps theres is a way to declare a white span with say 300 x 300 px where i can place some content.
You should know that I at a beginner level. I am now learning html, css, js, mongodb, bootstrap, node.js. But this is a little to much for me now.
many thanks Daniel
548
<head> <style type="text/css"> div.new_html_code { width:150px; height:100px; min-width:150px; min-height:100px; max-width:200px; max-height:100px; overflow:hidden; display:block; border:1px solid red; } </style> </head> <body> <!-- some html stuff here, I am just giving the basic layout --> <div class="item"> <div class="new_html_code"></div> <div class="carousel-caption"> <h4>Thumbnail label</h4> <p>Carousel caption text<p> </div> </div> </body> If you have replaced html/css from carousel and are not able to correct it, get back the original stuff. Then slowly start replacing with your code, and be very careful with the following css-attributes, they not only help to find errors (like the most useful css borders), but they also help to stop new content that is added, from bloating previous one (max width/height css attributes).
Pay close attention to the following css-attributes:
min-width:150px; min-height:100px; max-width:200px; max-height:100px; overflow:hidden; border:1px solid red; Do not modify the z-indexes and opacity first work with the ones I have given above and then start doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.
71
The carousel-caption class is bad for you. Don't use it if you don't want to show pictures and you're fine. It's even semantically wrong to define your html content as a caption. Just leave the class away and use a plain div
<div> <h4>Thumbnail label</h4> <p>Carousel caption text<p> </div> Also these smooth shadows will disappear then. And thats good, since we don't want them on pure text (although they may look nice on pictures).
33
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
