Home/ Questions/Q 8405381
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T22:50:28+00:00

I want to use the twitter bootstrap carousel in a personal project. So far

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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.

    • 0