How mange Jumbotron and Carousel together

Bootstrap Studio Help
1

Hi,

Can someone help me.

I would like to insert Jumbotron into Carousel. Is it possible at all?

I was trying also other ideas, like inserting rows, columns, headings etc...

I would like to get some editable text on slider, different on every slide

?

2

Are you trying to insert several Jumbotrons so that it slides between them? If so, you have to put your Jumbotrons inside the <div class="item"> that is within the Carousel.

Now, here's the thing... the app doesn't allow you to do it with the drag 'n drop functionality.

Here is how you accomplish it ( cheating :) ) you use the Custom Code method, however, you don't have to recreate the entire carousel from scratch... here's the cheat.

  1. Drag and drop the "Carousel" component where you want it.
  2. Then in the "Overview" widget on the left, right click and select "Convert to HTML".
  3. Now drag and drop the "Jumbotron" component on top of the "Body" element in the "Overview" widget, scroll down and right click it and select "Copy".
  4. Select your converted "Custom Code" (was the "Carousel") in the "Overview" and then right click it and select "Edit Code".
  5. In the "STYLES" widget you should be on the "Custom Code" tab with the Carousel HTML in it.
  6. You can now remove the image elements within the <div class="item"> and paste your Jumbotron code inside the <div class="item">. Do it for each one.

Now here's the thing... the Carousel contains the next/prev images and nav radios, they'll overlap any text you have in your Jumbtron so you probably would want to remove them.

You can basically put just about anything in there... however, nested Carousels are not supported. http://getbootstrap.com/javascript/#carousel

Hope that helps :)

Saj

P.S. I actually did it this way so I could give instructions, works in my preview :)

3

Than You Saj! :-)