I'm trying to do a sticky sidebar just like the one ng-bootstrap is using.
Currently, I am using Angular 7.0 and Bootstrap 4.x. I just want to do the sticky like sidebar like in the components page of AngularUI (see link above). However, I can't seem to find the feature in the list of components.
So far, I've inspected the page in the components section of ng-bootstrap demo page, it uses ngb-sidenav but I'm not sure though. Anyone knows where or what library should I use?
I've been trying to find a suitable library but most of them are either for AngularJS (1.x) or paid library.
>>> UPDATE <<<
I'm thinking of using position-sticky class and apply it to my vertical navs component. This might do the trick but I'm still gonna test this. I'm going to update this after I test it.
I've made it work. For those who are looking for the solution for having a sticky functionality, you may use bootstrap's sticky-top class. Just see its description
My fix is using bootstrap itself and not ng-bootstrap. Just sticky-top and a bunch of css styles to suite my needs.
Also, adjust accordingly to your needs.
Related
I use bootstrap dashboard (https://getbootstrap.com/docs/4.1/examples/dashboard) as a base for my project.
I have added form in the sidebar but 'bootstrap' styling is lost as you can see in picture below.
I have tried different approach like crispy-form (what I currently use), django-widget-peaks, but result is not really good I think, maybe because part of CSS is override?
For example, text in the "Select" is partially visible...
I would like to be able to use bootstrap styling option like input-group-sm to decrease input size but it doesn't works...
Thanks for your help
I'm writing JS plugin which will be placed in several different websites. Those websites are using different styling, some Bootstrap, some Bulma and some just custom styles.
My plugin is generating DOM elements like divs, inputs, selects. I want to style those elements on my own. How to make this plugin look the same in any website which it will be embed?
Maybe creating Shadow DOM elements would help. Then you will be able to add your custom DOM elements and they will not be affected by whatever is outside. See here: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
I'd like to put some buttons in my web app, with the exact same style like the ones from bootstrap.
Does someone have that styles in CSS to be included withtout using bootstrap?
Also, is there a "list" of the styles (templates?) that bootsrap had over time? I remember that in the past the buttons were not flat and now they are...
Thank you for your help!
This is not how Boodstrap works, you can use styling to make it look like a boodstrap button.
I've seen some premium bootstrap themes with a left-navigation menu instead of the standard top-navigation, but I don't see this documented anywhere. Is this all custom CSS, or is it natively supported and I can't find the documentation?
The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It’s easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
It's only for header. Head means top. You can modify it. As for your choice. You can move it in left. See some example.
In this Example 1 codes are also given.
From Example 2, you will be able to download codes also.
i'm using bootstrap nav-tabs(vertical pills). i want to make this - when i click on tab, the content of THIS tab drop downing exactly under this tab(not somewhere else) like this
Then the Bootstrap feature what you are looking for is called Accordion or Collapse and not Nav-Tabs.
Here is the link where its available in the bootstrap documentation. You do not need any extra plugin except ofcourse jquery.min.js', bootstrap.js and bootstrap.css to make this work.
Important Note : jquery.min.js should be loaded before bootstrap.js.
http://getbootstrap.com/javascript/#collapse
Here is the basic Accordion example with the required libraries.
Hope it helped :-)
I have found solution. if someone also have this problem, just check bootstrap accordion
accordion
thats it!
From the Bootstrap docs:
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
Using navs for tab panels requires JavaScript tabs plugin
For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.
Make navs used as navigation accessible
If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.