Put a block inside a custom container?

Bootstrap Studio Help
1

Hi, I just purchased this software and then realised i could of got a year free for being a student but anyway i'm trying to insert a footer inside my custom container but it won't work! The only place i can drag it to is underneath the body tag but any further and it just won't budge!

Am i being stupid if so please explain to me how to move it inside a container because otherwise it ruins my sites design!

Thanks

https://gyazo.com/0681c853c793621854f0fa83144fd170

2

No you're not being stupid at all. It's actually designed that way in a sense so that you don't "lose" the container if you haven't added one already. What you need to do is the following:

  1. Drag it as you have been to "under" the body (this works at the top as well, or anywhere that isn't within a container already).
  2. Check the container settings (CSS and ID) to make sure you carry them over to the container you created for it (or div etc. if it's not actually a container setting).
  3. Drag the contents of the container you placed with the items in it, into your container (without the container itself of course).

That should fix you up. Let us know if you need more assistance. Good luck and enjoy!

P.S. At least it wasn't an expensive item that you purchased without needing to. You may want to contact support to see if they will honor your student status with a refund or not. Not sure if they will or not, but can't hurt to ask.

3

Hi Jo thanks very much!

So just so i've got this right basically i just apply the css class for the container to every element?

Also another bit that i have not yet got my head around is that im trying to do a search bar (a collapse) in the nav there is a button and you click it to launch the collapse but i dont know how to make a nav item button be the trigger for a collapse because i could easily do it in just plain html but this tool seems to be making it more difficult or its just me being very new to the software!

Anyway thanks again and let me know if i understood you!

4

No not to every element, just the container element (or div/col/etc) that you are putting the component into. IN other words, you said you created a container already to put the component into. This is what stops you from dragging it into it, because in proper coding, containers are not supposed to be within containers at all in any way. Just apply the classes/ID's to the container you are using to hold the item. Everything else you drag into your made container should already have the classes and id's in place. Hope that helps better.

Someone else will have to help with the button trigger as I'm not that good with that stuff ... yet ... lol.

5

Hi Jo

I really am being dum but for some reason i am finding this very difficult!

https://gyazo.com/e730e8a0a35723ace7d68ab149eae1dc

.special-container { position:relative; display:block; overflow:hidden; max-width:1440px; margin-right:auto; margin-left:auto; background-color:#ffffff; }

Thanks Jack

6

Ok the deal is that the "Block" is a container, doesn't say it, but it is a container with container classes built into it, just like as if you dragged a "Container" component off the tree of components to use it. So you cannot use that Block itself. That is what you take any classes and/or ID's from and put onto the Div you are trying to drag the container to.

Now open the container in the Overview panel and take what is "inside the Block" and drag it into your Div. Then you should be all set. Be sure to check for class attributes so they don't conflict with the ones you have set up on your special container class.