I am trying to use a bootstrap collapsable panel into an angular component.
From what i've seen the bootstrap approach is to use the id of the panel in order to collapse. This works as stand alone, however, when used into an angular component, the same id creates an undesired effect when toggle-ing between collapse and not collapse mode. ( always the first panel is collapsed/uncollapsed)
My next step was to create my custom collapse panel. This works and can be
seen here plunker , but the collapse effect is not the same ( the plunker link displays in parallel my panel and the bootstrap panel).
My question is how can i use the bootstrap panel into my component or how can i change the css to have the same bootstrap effect on collapse/un-collapse. ?
<custom-filter-accordion button-text="Expand / Collapse Non-BootStrap"></custom-filter-accordion>
You should definitely use Angular-ui's integration with bootstrap. For this specific purpose, they have a component called Collapse
They already have lot of directives that you could use with angular and should speed up your development time
Check this plunker
Related
I'm about to start my first Angular project, and I'm thinking about using Angular Material.
It has a lot of components which is what i'm looking for but it seems to me that it does not have a grid system nor any utility classes.
Should I use for example Bootstrap or any other css framework along with Angular Material or simply add my own css? What's the common practice?
Having to add classes for padding, margin and so on is a waste of time so I'd be inclined to also use Bootstrap which already has all these kind of classes.
My only fear is that having both Angular Material and Bootstrap would increase the bundle significantly.
I am using the following for my project
For grid, checkout this https://www.ag-grid.com/angular-grid/.
For
angular wrapper of bootstrap you can check
https://valor-software.com/ngx-bootstrap/#/documentation#getting-started
You may also want to check
https://primefaces.org/primeng/showcase/#/setup this has UI
components as well as their own spacing and grid setup
https://primefaces.org/primeng/showcase/#/primeflex/spacing
My application is in React and using css for styling. I wanted to add modal in one component. For that I am using bootstrap. But after adding bootstrap to my project entire UI is looking messy. How can I limit bootstrap to only one react component.
Task: Creating feedback form using bootstrap modal
Issue: bcz of bootstrap UI is changed
Requirement: Want to limit the bootstrap only for feedback component!
Thank you in advance!!!
I am developing an Angular2 SPA app. In the beginning, I was using Angular, Bootstrap 4 CSS and Angular Bootstrap, however, gradually I am moving to using Angular Material. Basically all these frameworks and component suites live well, however, I find that with the existence of Bootstrap 3/4, the alignment of HTML elements (buttons, inputs and checkboxs) in a row look no good. If I remove Bootstrap, they are aligned horizontally and perfectly. Because I am still using some Angular Bootstrap components, I can't get rid of Bootstrap which provide a lot good stuffs not yet covered by NG Material and fxFlex.
Questions:
Is it good or recommended to have Angular Material and Bootstrap together?
Is it good to use an application level stylesheet with a small portion of Bootstrap CSS only?
Since you are using Angular just make use of Angular Material as it also come up with styled components which works right of the bat.
Though at the same time in my ng2 projects I also use bootstrap though not everything in bootstrap, I just took a portion of it like bootstrap-modal, bootstrap-tooltip etc. they work pretty well as long as you don't put the entire style.min.css of bootstrap.
I am making a cordova app with twitter bootstrap and i now require a side menu like this one http://jakiestfu.github.io/Snap.js/demo/apps/default.html or this one https://slideout.js.org/ that does not require too much hacking to get it to work with twitter bootstrap.
The navbar component collapses to form a vertical menu but does not extend left to where i would like it to be. Is there a method i can use to adopt the available navbar component to look like the snap.js example?.
I am trying to use Vertical Tabs within my Bootstrap site. One I'm using are here :- http://bootply.com/74926
For some reason, I am unable to use them. They show perfectly but just doesn't become tabs. I guess for some reason, the tab functionality is being missed. Do I have to add some Tabs JQuery within Bootstrap 3?
The upper answer was provided in this link Stacked Tabs in Bootstrap 3
Thanks a lot
To work tabs in bootstrap3 you should include tab.js