1 Row 1 Column Component doesn't work as expected


If you drag and drop 1 Row 1 Column component to Container doesn't detect as insertable element and in fact it's inserts as a Block, 1 Row 1 Column it's an important pattern in Bootstrap, until now I had to add 1 Row and then 1 Column inside this last one, Could you simplified this behavior?

EDIT: I understood this component add Container + Row + Column but most times I have to add just Row + Column so this is the need.

Thank you.

The reason why it doesn't let you insert the 1 Row 1 Column component is because the component contains a container classed element already. The app is designed to help you build semantic bootstrap websites.

<div  class="container">
    <div  class="container">

Would not be a semantic design. However, you can do it manually but not with predefined app provided components.

Like you said most of the time you just need to add row and a column so just drag/drop a row and then select the row and you'll see on the left a Suggested section that already has Column as a drag/drop able component. If you need another column you can select the column and then use the toolbar above to add as much as you need easily.

The predefined components I can imagine were probably for a quick start to a new design project not intended on nested purposes. If that were the case then they wouldn't contain the container class and you would always then have to make sure you added that for the proper alignment and spacing etc...


I find that you can easily drag a premade component to the top or bottom of your site (outside of any existing containers) and then do the following:

  1. Create or locate the area you want to add it and add a div/row/col or whatever you need to put it in.
  2. Open the premade item and locate the contents within the "block" which is set as a container. (Note any classes or ID's that are on that container or it's Block)
  3. Add the ID's and/or Classes needed to the structure you're moving it to, from the container(s) that you will "not" be moving to the new location, so that all the required styles are included in the new location. May take a little bit of manipulation, but doesn't usually need much.
  4. Now just drag all the contents of the premade container to your newly setup location.

Sounds daunting, but trust me, I do it constantly and it's extremely fast and easy. This way you can use the premades without having to recreate them from scratch.