(Feature Request) Blank HTML Elements

Hi there! I wanted to suggest the addition of blank html elements. As today, I can only see a few blank elements, such as Nav(html) on component’s list, and a few others.
So, we would have <button>Button</button>, for instance, and not only <button class=“btn btn-primary” type=“button”>Button.
It would make life really easy to create new components, since we can’t navigate the html tree with custom components. This would solve the issue where we can’t edit the element inside the Overview Panel if they are custom components(I know we can edit the component as a raw string). Other than that, we would gain the capability to fully edit the html elements inside the Attributes Panel, which isn’t possible since we can’t remove some blocked classes. Finally this change can make Bootstrap Studio a little bit more agnostic about the use of Bootstrap Framework, and it will expand our possibilities, perhaps it will make more $$$ for You and for US.
Thanks for your time.
:grinning: :grinning: :grinning:

If You liked this, consider adding a :+1:

2 Likes

+1
image

You could even take it a small step further and put those in an “Advanced” or something like that section so that the newbies wouldn’t use them to break things with. This way they would know before using them that they are not for non coders “so to speak” or not for people that are not more knowledgeable in HTML and CSS.

Love this idea, I really hope something like this can be done!

1 Like

It’s there already
in the options panel you have unstyled that remove all bootstrap styles for the component
so for your button you can unstyle the button and you will get <button></button>

1 Like

Thanks for your reply. I saw it, but it is not so easy like drag and drop a blank elements from the Component Panel.

I totally understand you, one click is more difficult

1 Like

lol @kuligaposten I think he means that it’s not possible, rather than not so easy. Many of the elements internals are locked (thanks to the forums I was able to figure out the deal with the Carousel since I just used it for the first time … getting away from the premade deals with WowSlider, even though I still like them lol).

The ability to have all the component parts available and unlocked to create our own versions of things would be so much nicer. I realize the app is based on Bootstrap, but doing something like this wouldn’t be going against anything to do with Bootstrap, after all, Bootstrap has this to start with in order to create their versions right? :stuck_out_tongue:

I don’t understand what would be nicer if you could cut the styles from the locked bootstrap components.

Take your carousel for exemple without the bootstrap classes you will get 9 divs 3 images 2 links and a list when you unstyle it. All on the left side. You have lost the carousel options in the options panel.

Do you mean then that it is nicer to adding your own classes making your custom options and write the needed javascript to get your carousel to work?

BTW if you want round indicators on your carousel you only need one class in your custom css file
like this

.carousel-indicators [data-bs-target] {
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

if you want the color to be something else than white on the active indicator add this as well

.carousel-indicators .active {
  background-color: var(--bs-info);
}

Thanks @kuligaposten I’ll check that out in the morning.

You know what? I think you’re right. I just browsed around and it seems that if something is locked, the settings we need are already in the app. Might be a few I missed, and of course I don’t do Javascript etc. so if there are things that could be done better other than these settings we have I wouldn’t know.

Sorry @felipetesc I have to take back my post and say that everything that we really need is already there.

My suggestion would be to do what I’m going to do this week. Take some time and browse through the items you have issues with and see if there are options built into the app for them already that maybe you might have missed, like I did with the Carousel. I’m sure there are others I have missed because I haven’t been using them too so I’m going to see if I can familiarize myself with them better.

You can drop a Button (for example) and turn the Unstyled option on, as @kuligaposten suggested. Then right-click the component → Add to Library. Give it a name, e.g. “Button (html)” and click “Create”. This will add the unstyled version to the User group in the Component panel. Now you can drag/drop a plain <button></button> onto your page. Hope this helps!

5 Likes

@felipetesc
If you do what @Gabby explained then you can also make the button your favorite button by adding the new created button to your favorites

2 Likes