Dan-De-Man Dan-De-Man - 5 months ago 15
CSS Question

Bootstrap Carousel other content than image

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

Answer
<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.