Can Bootstrap (4) be integrated along with Angular Material (2)? - javascript

I'd like to use Angular Material 2 library, because of its (growing list of) components. But i'm used to bootstrap and it's goodies like responsive utilities and lightweight UI for typical things. By Bootstrap I mostly mean its CSS part, I almost never need its JS functionality.
For example in Material lilbrary there is practically zero styling for list group, while Bootstrap gives that with its css.
I remember reading that combining them is not a good idea, mainly because their global app-wide styles will collide. I can't find that source and I'm curios - is that true with current versions? If so, exactly what is conflicting and how can it be worked around?

Since Bootstrap is modular, one alternative approach could be using Angular Material and then just picking from Bootstrap only the parts that you really need.
Note: whatever you're going to import, you should install bootstrap first:
npm install bootstrap --save
And import the required sass file inside your global style.scss:
// Imports functions, variables, and mixins that are needed by other Bootstrap files
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
For example, you might want to use Bootstrap Reboot in order to make all browsers render the elements more consistently and following the web standards.
Then you only need to import:
// Import Roboot
#import "~bootstrap/scss/reboot";
You probably want to make use of the Bootstrap Grid System as well, in such case you can further add:
#import "~bootstrap/scss/grid"; // add the grid
So you would be able to use it in your html templates:
<div class="container">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
You may also want to use the Bootstrap Utilities, in such case add also:
#import "~bootstrap/scss/utilities"; // add css utilities
My answer is based on what's explained here in details: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

Angular Material 2 is a new library still in active development so you should not expect many fancy nice to have features in that, yet, but on the long run you will have a lots of benefits using Material 2 in you angular app. Here is some overview:
Component Development Kit
In the last releases Material 2 team introduced #angular/cdk which is a core for Material 2 and also gives developers a great ground to write their own thirdparty components. There is no much docs on #angular/cdk yet, but you can track that issue https://github.com/angular/material2/issues/2789 to keep updated on that matter.
Responsive goddies
There is no builtin functionality in Material 2 that gives you responsive goddies. For that matter you have to use #angular/flex-layout thing is completely separate from Material 2 - basically it is a nice abstraction on top of Flexbox CSS. Using that you do not have to write whole bunch of responsive css mediaQueries yourself.
Browsers support
Material 2: IE11+
Bootstrap 4 IE10+
Bootstrap 3 IE8+
Bootstrap + Material ?
It is up to you if you want to combine both Frameworks in your app. If you do that check the bundle size to make sure it is not bloated.

While Kuncevic's answer is right, I think we should also add the following:
Angular Material is implicitly upgrading/downgrading DOM elements
while Bootstrap is not. That means that in Bootstrap, you get what
you see, while in Angular Material, some elements are automatically
rendered. So, I can't really see how you can combine the two, even if
you want to. Adding, Angular's view encapsulation in the mix, things
get even messier.
The only part where I see room for cooperation is in the grid. You
could use Bootstrap for the grid and Angular Material for the rest, but with Angular Flex
Layout (as Kunsevic already mentioned) you don't really need to.
There is a small learning curve there, but it is worth it, if you use
Angular.
Bootstrap's CSS does conflict with Angular Material's CSS. When used
together I have noticed that certain elements like icons inside
floating buttons are not centered correctly, etc. This shouldn't be a
difficult fix, but why bother when you can use Angular Flex?
Hope that helps.

In 2019 Angular conference they explained is it ok or not combining bootstrap and angular material.
https://www.youtube.com/watch?v=xLj1qw82oAo&feature=youtu.be

Related

Bootstrap into already existing html/css site

I already have html/css website. Is it possible to insert bootstrap into it and use it only for some features , for example making this website responsive on all devices etc?
Not really.
Bootstrap sets CSS properties on many elements. Simply adding it will create a great many side effects.
Its effects are not limited to elements that you specify.
It also won't magically make things responsible. The responsive features in it require specific HTML structures which you won't have.
If you want to make an existing site responsive, you are best off writing your own media queries.
If you just want the responsive helper utilities and the grid, then you can import the grid only, so that bootstrap styles don't clash with you own existing styles.
So instead of importing bootstrap.css you just import bootstrap-grid.css.
If you use SCSS compiler you can do the same thing just with the .scss extension.
https://getbootstrap.com/docs/5.1/getting-started/contents/#css-files

How to consistently use grid layout with components in reactjs

I am developing a web app and I want to use CSS grid layout. After few hours, I figured out most of my layouts were incorrect because the style was overwritten by lower component, losing gridArea. I had just been lucky it had worked so far.
Because I believe it's the container's responsibility to place items, items should be agnostic of whatever gridArea the upper component decides to assign them. Moreover, I have factories of components so I sometimes just don't know which item will be there. I am now doing this boilerplate in all my components:
<div style={{ ...props.style, ...styles.ThisComponent }}>
my item content...
</div>
What is the correct way of doing it? Any pitfall?
I am rewriting all my components now, please save me a lot of efforts!
CSS grid is only supported by the most recent browsers.
Wouldn't you prefer using Grid layout from material-ui? Then you can adjust everything. Here's a link if you do, there's also a CSS Grid layout exanplation there.
Hard-coding the styles property in all the components you will ever write like above seems to be an overkill. Also, using a fallback for browsers without CSS-Grid support should also be a priority.
Have you tried creating wrappers in styled-components and then putting your component code inside ? Could potentially save you the trouble if all the outer divs should have the same style ? The syntax may change a bit from what you have written, but seems more maintainable*
*might be opinionated

Implementing a horizontally branching nav menu

I am essentially trying to implement a DOM object that contains many different html templates and can be navigated using different options. I am comfortable with the AngularJS / controller side of this, but unsure about bootstrap and utilizing existing classes/directives.
My project is currently using angularjs, bootstrap, and angular ui-boostrap. The functionality I want is pretty similar to ui-bootstrap's accordion functionality but rotated sideways. But all the other options get hidden away when one is selected. Does something like this already exist? Also is there existing code/directive can I use to make the creation of this easier?
I plan for the menu's width and height to be mostly static so my only concern is creating this menu while giving it a clean 'bootstrap' feel.
I think I used this before and was happy with it:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
See issue in angular-ui/bootstrap also:
https://github.com/angular-ui/bootstrap/issues/2421

ExtJS - Applying JQUery UI themes

I am in the process of replacing a few JQueryUI components with ExtJS. The issue I am currently facing is how to apply our JQuery theme in ExtJS.
For example, my popup windows use .ui-icon-close-thick. However, to override this in ExtJS I need to set the .x-tool-close class to the same background-image & background-position. Does anyone know an easy way to accomplish this?
There is no easy way to do that — like there is no easy way to take the exterior off a car and seamlessly attach it onto the frame body of another car made by other vendor. Ext JS components are represented by certain distinctive DOM structures which your CSS rules should fit to.
The right way to do that (not very easy though) would be to create your own Ext JS theme that will mimic your jQuery theme.

Can you (should you) use "half" of Twitter bootstrap? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm looking to use something like Twitter's bootstrap to help me ease some of the pains of creating and working with some of the common design issues. However, I still fully intend to do a whole bunch of styling and stuff outside of their prepared stuff.
Would this be a bad idea? Potential conflicts down the road? Should I try to build on top of and use bootstrap as much as possible?
twitter bootstrap is great to get started and its exactly what it intends on helping developers. Instead of creating a lot of stuff from scratch, you got pretty much everything you need for a basic-to-medium frontend so you don't have to worry about it.
As you build your application, there will be times where you would need, for example, to replace the color of the buttons. So instead of having a .btn-primary be blue you want it pink.
you can override the .btn-primary in your own css, or even better, see how it behaves, copy the styles, change what you need and use your .pink-btn-primary.
Little by little your css would stop being twitter bootstrap and become your own variation, with the ability to rely on features being added to bootstrap with time.
Relying on bootstrap has a bit of a shortcoming - if a bug is fix or a new version changes its behavior (rare on css, but very possible on js) you will have to adjust to make sure you get the behavior that you want.
Also, You should be careful, as suggested, not to use their class names, and make sure you load your css files after bootstrap files.
good luck.
Bootstrap is meant to be used to build on top of and overwrite so you get the design you want.
As always, using Bootstrap depends on the project.
It makes starting out very easy but like most frameworks you don't always want to go against them, so you have to take them into consideration in the early stages of your design. Bootstrap relies heavily on wrapper elements and classes so using it for an existing website where the markup can't be changed won't work out for you.
Example: Their grid system works really well for their fluid container layouts but the default is 12 columns and you will want to look at all their customisation options to change this.. or see examples of using the .less pre-processor with Bootstrap and these settings apply a set margin that may not always work out for you, and you have to start thinking differently.. such as how you can nest elements to achieve the design you want, or start testing with new overwritten margin sizes.
You also need to consider any other frameworks you may be building on, e.g. ASP.NET MVC has a lot of built in features such as the client validation, and HTML helpers for form elements.. but they don't always allow you to apply wrapper elements and class names to them unless you first right your own extension of them.
Bootstrap has an Apache v2.0 license which says
irrevocable copyright license to reproduce, prepare Derivative Works
of
so as long as you keep the copyright license they allow you to change bootstrap as you see fit, obviously you shouldn't look to change what they have already extensively tested for you and you would rather just overwrite some things, but the option is always there.
I think most developers do not just use the prepared stuff, they always add some customization on top of it. As for CSS styling, You can keep the bootstrap.min.css file intact and write your custom css on another CSS file. If Bootstrap updates in future you can just replace that original bootstrap.min.css file and maybe have to make some minor adjustments.

Categories