Bootstrap 4 or Boootstrap UI? - css

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).

Related

Which css class library goes well with Angular Material?

As title says, I want to know which css class can be paierd with angular material.
The purpose is to have simple classes just as column-md, row, paddings, margins, containers, avoiding confussion with the angular material classes.
I want to have just one css library to style things like colors and position and have my componens running well.
I thought that bootstrap could be a good pick, but I'm facing errors with the card styling because it conflicts with angular material cards.
I'm new to Angular, and when I was using Vue, we had a beautyful framework called Quasar (https://quasar.dev/) that brings components alongside with css classes, I want to have something similar in Angular but using Angular Material.

Adding Bootstrap Css in reactJs

I am trying to use Bootstrap in React. Bootstrap button and grid are working but CSS for bootstrap is not showing up. Are there any steps to add bootstrap CSS separately?
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that u get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. Hovewr if you are only interested in css, then its perfect.
Using this u can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If u want simple setup , then u can use reactstrap link
Other frameworks include react-bootstrap link

Angular material complementary

Angular material is awesome but lacks lots of features yet.
So which CSS framework is best to use as a Complementary alongside angular material?
Edit:
Other Important Factors:
Lightweight
Responsive
Flex support
RTL support
Modern
You can use Bootstrap or foundation and instead of using the whole library, you can just load some particular component according to your need so your project doesn't get overloaded.
You Can Use Bootstrap with ngx-bootstrap Are Awesome.
visite for ngx-bootstrap: https://valor-software.com/ngx-bootstrap/#/
and visite for bootstrap: http://getbootstrap.com/
thank You

Best way to override default dropdown-menu css in Twitter Boostrap with Angular JS

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.

Using buttons from Bootstrap 2 in Bootstrap 3

I am using Twitter Bootstrap 2 and thinking to migrate to the newer Bootstrap 3. However, I don't find the buttons in Version 3 as appealing as those from Version 2. Is there any simple way to use those nice buttons from v2 inside v3?
Yes, just include the bootstrap-theme[.min].css file that's an optional part of Bootstrap itself.
The Bootstrap Theme includes nice gradients etc. to make Bootstrap v3 look more skeuomorphic like Bootstrap v2. Here's the official example of it in action: http://getbootstrap.com/examples/theme/
Yes, exclude buttons and download bootstrap from http://getbootstrap.com/customize/ , you can then copy the btn sytles from bootstrap 2.x.x stylesheet and use those in your new website which uses bs3.

Resources