I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
I am new to Tailwind CSS and stumbled across the tailwindcss-forms plugin.
Why exactly do we need that? Does it just provide new classes that I have to apply manually or does it by default apply some classes to forms?
Can't I just apply classes from the regular Tailwind CSS to my forms?
What's the difference to e.g. tailwindcss-custom-forms?
Tailwind CSS is not exactly providing solutions for form elements like Select-tags and co. that work on all major browsers.
If you apply those from Tailwind CSS, you may either add your own elements (e.g. arrows) for a Select tag, inputs, and co. or work with CSS. You can also look on how developers solved these issues with examples from Tailwind Components.
Tailwind CSS Forms was made to make this possible and it works with Tailwind CSS 2 while Tailwind CSS Custom Form is deprecated.
I stuck with some question. What the difference in the use of Boostrap 4 or Bootstrap UI(base on v4.0.0-alpha.6) powered by Angular in developing application on Angular 2 ?
Does BootstrapUI have some must have stuff that clear Bootstrap 4 doesn't have ?
Bootstrap UI isn't a straight wrapper for Bootstrap JS-based behavior, it's a rewrite of that behavior in Angular, so no Bootstrap or jQuery dependency, just the bootstrap-css-only node module, which is purely a copy of the Bootstrap CSS. Thus, if you are using Angular correctly, most of the Bootstrap components will not work. You will need to write your own directives to get them to work. So it may be easier to use Angular Bootstrap which does all the work for you (Source).
I have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well.
If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.
you need to set the order of CSS files like
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite
bootstrap styles or to add alternative css classes to your GRID.
I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
I have a twitter bootstrap web template that I'm integrating with angular ui to develop a SPA. I have been able to do this integration to some level but I want to override the default css that Twitter Boostrap dropdown-men with Angular JS provides. Thanks for any help.
Option 1) Edit the Bootstrap CSS
You can edit the bootstrap CSS but this means you are assuming all risk for integrating nay future bootstrap changes. I don't recommend it unless you want to trim out all bootstrap CSS except what you need. Only mentioning it because it is an option, though not one I recommend.
Option 2) Create your own CSS to override Bootstrap's CSS
Create a CSS file such as styles.css and have it listed after bootstrap's CSS in your HTML file. Then override the styles for what you need. This is pretty easy and allows you to leave Bootstrap untouched.
Option 3) Pay a CSS expert :)
OK, so seriously ... choose option 2.