Feature Suggestion Bunch (Nav Tabs, General CSS)

Ideas
1

Hi everyone,

Let me first start with thanking Bootstrap Studio's Developers for creating an amazing piece of software! Your software really made my life a lot easier.

I had a few suggestions that I will go over one by one that could make the software even more powerful and/or easier.

<hr />

Nav Tabs

nav-pills - This allows you to show nav tab menu's as "pills" a rounded form of the buttons instead of the basic half-rounded form.

nav-stacked - This allows you to not only use nav tabs horizontally but also vertically resulting in a more "menu-like" nav tab.

Linking Nav Tabs & Tab Panes - I tend to name my nav tabs to whatever seems suitable for the tab it's referring to and I am able to edit the link for the nav tab, but not for the tab pane. This will result in the 2 not linking to each other anymore and that's really a shame. Easy fix would be to add an option to edit the Tab Pane reference (id).

navbar dropdown - We are able to use the dropdown component inside the navbar however, it doesn't automatically create new Tab Pane's for in case you really click it. A small thing, not necessary, but could be nice.

<hr />

General CSS

  • Add a "CSS Selector Editor"
  • Add ability to lock CSS Selector State
  • Add aligning possbilities
  • Edit ID / Class

CSS Selector Editor - We are able to edit the background color, image, color etc through the CSS Editor (Great work on this!). However, we're not able to edit the element in certain situations (like active, hover, clicked). It would be great if we would be able to do this through the software itself without having to get into the real CSS. (Feel free to call me lazy, it's just a suggestion)

CSS Selector State locker - When you're editing your buttons and small extras, it's hard to figure out the details like the color. A lot of elements do support things like setting it to active / hidden. It would be great if we would also be able to "lock" the situation in which an element is shown (for example keep it on active) till you click a button that will unlock it.

Aligning possibilities - Something I've noticed when I was working on a project was how much I need to center in a div, in a column, in a lot of elements actually. It takes quite some time in order to keep writing custom CSS for every little part and it gets frustrating at some point. Bootstrap has some aligning features coming in V4 (the release date for this is not set yet). Maybe Bootstrap Studio has some suggestions on more general classes we could use in order to align element horizontally / vertically. (This also counts for aligning columns horizontally / vertically)

Edit ID / Class - To really do as much as you can in Bootstrap Studio and being able to have a clear overview of everything, we could really use support for editing element id's, classes, names and similar things. In this way we can make proper CSS references to the element and make sure they really only apply to the element we want it to affect.

<hr />

Notes

Thank you for reading my feature requests/suggestions. I would love to see opinions from other people.

I will add more to this thread whenever I come up with more features that should be possible to add.

Kind regards,

Siranix

2

Although I'm sure they appreciate the good words and I'm glad you find it useful, I have to wonder if you have actually used the program very much. Most everything you mention can already be done in some way or another. This is going from just logic in my head so if I'm wrong just say so.

Pills, you should already be able to edit the HTML lines needed in order to have them be pills instead of square buttons. You can type in the line in the attributes area, add a new attribute to the element and type in the information needed (no quotes ever needed there) and it should update the code so that it has whatever you have told the changes to be. You "should" be able to accomplish pills fairly easily this way since the code that is within BSS includes all of the code including the Pills, it hasn't been altered to only include certain parts of Bootstrap at all.

There are already dropdowns in the included elements. Not sure if you were talking about something else, but it's in there already. If the nav-stacked is a part of Bootstrap 3.3.7 then I would imagine that can be utilized in the same way as pill can be. Shouldn't be too difficult to work out.

You can also edit the tab pane ID's right in the Attributes window where it has the nice ID line there with the default tab pane ID. Change it and then then go to the link you want it to go to and change it to the same name. Done.

I'm not sure what the State locker means. Sounds like you're trying to hide things and bring them out under specific circumstances. I would imagine there is a bit of coding needed to do some of it, but if it's just responsive stuff that is already built into the app. Any column, item, element, etc. has a section in the Options area towards the bottom for Responsive Visibility and Accessibility. The Visibility will allow you to tell it exactly what size something should be showing and what size it shouldn't and so on. Not sure if that's what you're after, but if it's something that needs a switch, that will take coding.

Not sure what you're talking about with the CSS Selector editor. You can edit pretty much anything you want, the only thing you need to do is create yourself a custom CSS file (usually a new project already starts with one named Styles which I change to my own name since so many plugins and scripts etc. like to choose that same name and they get confused lol.). Copy the CSS (there's a little menu set of dots to the right of every class and id that has options there for moving and copying and duplicating. You can either duplicate it or copy it. Be sure to choose your page with the Create dropdown first at the top of the styles window so your new classes will go to the right file, it defaults to the first file it sees in the list of CSS files so if that's not your custom file, then your classes will end up in a different file. You will always know where that is though as the file name each class is added to or contained in is under the little 3 dots menu for each class/id.

You can edit it to your hearts content, and the CSS window is being updated all the time so we do get new features quite often for things like this. I'm still waiting on the ability to use Commenting in CSS and HTML. That's about the only thing missing from the CSS window. They are working on some things that I think will make it easier to use, but for now it's quite functional for what you're asking for. The default CSS is locked only to protect your site so it doesn't break permanently. This gives you the ability to play with the code without losing the original in case you need to go back to it. A Failsafe of sorts.

There is also a CSS editor in the Options panel (looks like a little paint palette), just be sure to once again choose where you want the changes to go or else they will end up inline. It's not 100% perfect, but it's a brand new feature they just added a few weeks back so give it time and it will be great I'm sure.

There is quite a bit of edit capabilities for Text in the Options panel as well so aligning there is pretty simple. Other things you'll need to set up classes for or use the built in ones in Bootstrap.

If i covered anything here at all that you were questioning about and gave you the right answer, then I would suggest you really do more work with the app and check out the tutorials and such as well. Unfortunately there isn't a whole lot of documentation as of yet. I'm hoping we will see more of that soon. If I misunderstood what you were after, sorry, don't shoot the messenger, just going by what it sounded like to me :)

3

Hello @Siranix, and welcome to the forums! I am happy to read such a well structured list of suggestions.

As @Jo correctly pointed out, a lot of these are already available in Bootstrap Studio. In the right sidebar you have an Options tab, which can control quite a bit of options for the selected component. Near the bottom side of the app, you can expand the Attributes panel and gain access to ID, Class Name and Attributes editing.

We would like to make the application easier to use, but we are limited with what we can do because we have to do things according to Bootstrap's good practices. So things like aligning elements and positioning them on the page need to be done using the Bootstrap grid. This can be difficult if you are beginner and aren't familiar with the framework. Maybe the solution here is to make more tutorials and educational materials, instead of just adding more features into the application.

4

Nooooo do both! :P

5

Hi there,

First of all, thank you for reading and answering to my ideas. I read your response when they came in, but was so focused on developing further that I forgot to comment.

However, I did find something that bothers me. We're not able to separate tabs and the tabcontent from each other. This gets rid of the idea of having nav tabs stacked on each other and functioning as a vertical menu type of thing.

Or is it just me that wants these kind of little things?

6

I need to chime in here because I am not able to "change" the class names at all when locked so I cannot change the Tabs to Pills like it should be. I can "add" the nav-pills class to the class, but that isn't quite the same thing and it still remains looking like a tab with a colored background instead of pills. It's close to the same, but the line under the tabs changes the location so it doesn't look so much like a tab when you have it set to pills.

I guess we need some way to change these settings since they are locked and there really is no way to do this without having to do custom code which kind of defeats the purpose of it being a Bootstrap app.

@Siranix: I believe the reason that there isn't a way to do this vertical tabs in BSS is because that is not something added in the Bootstrap setup. Only making the pills vertical is all they seem to include. There are a lot of different scripts out there for this though and I'm about to try one I purchased quite some time ago and see how that works. If it works out well I'll try to remember to come post here and let you know what it is then if you want to check it out.