I cannot seem to add a div to a unordered list "list item". Is this possible or not ?
See reference of code on Bootstrap 4 navbar page. Trying to add a dropdown menu inside unordered list.
"Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint."
See example below the above quote.....
https://getbootstrap.com/docs/4.0/components/navbar/
Twinstream
I found another element called the "List Group" which will add a unordered list group which allows adding text links and div's so this should work.
It seems by using the List Group one could have unlimited nested dropdown menus in a navbar if I am not mistaken.
Curious here why you wouldn't just use the prebuilt components that already have these things set up? There is a dropdown already created as well as being able to use the Nav that's prebuilt and just adjust it to your needs.
I think all in all the point is that you should be able to manually rebuilt the Navbar from scratch i.e. drag/drop if you want to for whatever reason, usually to have more control over it while still maintain base functionality in the Option pane for components etc.. But you can't with how some things are blocked. Yet you can have a Navbar Component built that way.
My belief is that if the Dev's can have prebuilt components built like that I should be able to recreate it myself as well. As the app is suppose to be based on the framework, so what's in the framework as examples, then the app should be able to allow you to replicate that example.
I can imagine it's probably just an over site really. As the Dev's have changed some things allowing other things like an input in a table cell etc...
Saj
I wanted to use the prebuilt component navbar however I am trying to design the "Offcanvas responsive navbar" that Bootstrap 4 has on their example page. https://getbootstrap.com/docs/4.0/examples/offcanvas/
If I use the prebuilt navbar it will not let me add a dropdown to the navbar-collaspe unordered list. I have to replace the unordered list with a list group to be able to add either a dropdown or div to achieve the "Settings" dropdown on the example.
I know that I can probably use the navbar example in the new Tesla tutorial which I have already tried with the plugin added however I wanted to see if I could achieve the example on the Bootstrap page which uses a smaller script. I know how to make it work.....I just need some time learning everything because I was waiting for Bootstrap 4 support. Their are a few other reasons that have to do with the navbar-collapse...
To add a dropdown to the Navbar Component, you search for dropdown and drag it onto the Navbar in the Live View pane where you want it in relations to the other Navbar component links. That will create the LI with the dropdown in it for you.
And you can also drag/drop it onto the "Nav" Component in the Overview pane as well. That will place it at the end or you can drag/drop it to be in between any one of the Nav Items in the Overview pane as well.
Saj
Thats exactly what I wanted, Thank-you Saj.
Your welcome, glad I can help :)
Saj
I was successful in creating the Offcanvas menu with the added dropdown and transition using bootstrap classes and only basic elements such as divs, links, and a list-group. For reference: https://getbootstrap.com/docs/4.0/examples/offcanvas/
Lots of questions to come about Bootstrap Studio as this was a requirement as most people start with a navbar. I am fairly familiar with html and can find my way through jquery however typing CSS is my weakness. This program will definitely strengthen that....
A year and a half ago I knew nothing about anything....now I know very little about everything.
Thanks again !
Saj's solution worked for me too but I have another issue. I want to put a form into the dropdown. The Bootstrap 4 documentation has an example of how to do that but BSS will not allow me to drop a div, form or any form elements into the dropdown menu. If I open the dropdown menu, there are buttons to add items, dividers, headers, etc but nothing that allows me to add a form.
I can create some custom element of course but any ideas on how to do this using standard BSS?
Thanks, Pete
Its not too hard to recreate your own dropdown starting with a div.
<div class="dropdown"><button class="btn btn-primary dropdown-toggle" aria-expanded="false" type="button" data-toggle="dropdown">Button</button>
<div class="dropdown-menu" style="left: 0px; top: 0px; position: absolute; transform: translate3d(5px, 38px, 0px);" x-placement="bottom-start">
<form class="px-4 py-3">
<div class="form-group"><label>Label</label><input class="form-control" type="text"></div>
</form><a href="#">Link</a></div>
</div>
I know that but as mentioned, I would have to create a custom element to do it and I'd rather do it using standard BSS elements.
A form within a dropdown is a valid Bootstrap 4 structure so maybe I should report this as a bug?
not a bug. The developer is not including everything as a clickable item in the options pane. You have to manually add classes to develop a decent website.
BSS is a tool for developers. If you can't code html/css/bootstrap4 websites you will never be able to create a decent sellable professional website. You better pay a real dev then.
bootstrap 4 dropdowns are easy and well documented, see here:
https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp
https://getbootstrap.com/docs/4.1/components/dropdowns/
I am am an experienced html/javascript/css programmer and have developed many professional websites so I know how to create a form in a dropdown, it's fully documented on the Bootastrap 4 website and it's not rocket science.
The point is that this is a fully supported Bootstrap 4 feature that is not supported by BSS. You're probably correct that it is not a bug, but it is a missing feature
The point is that this is a fully supported Bootstrap 4 feature that is not supported by BSS. You’re probably correct that it is not a bug, but it is a missing feature
I know that issue and the BSS developer asked for suggestions, see https://bootstrapstudio.io/forums/topic/class-lead-and-display-1/ and https://bootstrapstudio.io/forums/topic/styles-attributes-still-defaulting-to-pixels/
cards are a mess too. Try to add a card-columns div with column-count defined for different breakpoints with a few cards with border border-primary attributes and a card-header, a card-footer d-flex with a few buttons inside centered via m-auto and you'll end up wondering if BSS just waste your time. Some attributes are present in the options pane, some have to be added via classes, some styles need a mix of point and click and type.
I think BSS should focus on pro devs. But many users here (i can't tell if using pirated versions or that really spent their money on this developing tool even if they don't have any html/css/bootstrap knowledge and never built a website before) don't hit these limits and just ask for more basic features. Share your vision with the developer, I 100% agree with you that there are many missing features in the actual version.