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!!!
Related
Created a custom navbar.js file and styled with CSS.
It's working perfectly; however, is rendered behind the imported Ui Flex components from Figma- It's impossible to style my navbar's z-Index with no context to those components, and it would be very difficult to update those components by hand.
The App currently shows the "MarketingFooter" imported from Figma stacked above my Navbar, I need the opposite.
Thanks for the help!
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
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 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
I am now having a lot of troubles with Bootstrap. I used to use it to build a website once and then I have never used it again. But now, I have to use it. I downloaded the compressed version and include JS and CSS file in my project.
Here is the problem. I don't know how to customize it effective. For example, I create a navbar that is much higher (height:90px;) than the bootstrap default navbar. Hence, I have to modify the padding of the navigation panel on the navbar and when the navbar is collapsed, the items in this collapsible navbar are aligned incorrectly due to the padding and margin modification for the large screen.
I have one solution in my mind. May be I have to modify the media query padding and margin or if you have other effective ways to do it. Please tell me.
Create a file with overrides that you load after the bootstrap file. The override file will redefine the bootstrap classes you want to change. It's important that you load the override file after the bootstrap file.
Just linking Your own CSS file, and insert your custom class to the element. And then styling your custom class & avoid to override default class provided by bootstrap itself. This is my practice when using bootstrap or another CSS Framework.
Never have problem so far. Good luck for your project.