Bootstrap into already existing html/css site - javascript

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

Related

How to implement jQuery plugin without breaking the css in the original file

I'm developing a jquery plugin today, and I found it is impossible to apply two css files without overlapping each other. In other words, the new plugin will destroy the original layout. Is there any way to make a plugin running in a dividual environment?
You may rebuild the original css code to clear the overlapping by more strict rules, or, you may want to switch the plugins you are using right now to different.
Another thing you could do is change the source code of the plugin.
You should avoid overwriting existing CSS without knowing what it could do. Try to add bit by bit of the CSS code to check which code does affect the original CSS. The bottom CSS will always overwrite top CSS.

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

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

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.

Is ContentFlow the only option for a library that support not only images but divs?

I am trying to create a coverflow effect with a list of images and styled divs.
The only library out there that seem to support anything other that images is http://www.jacksasylum.eu/ContentFlow/ but it's a bit unmaintained and I am having problems with setting some properties for the non-image elements.
Is it the only library out there with such capability?
Isn't there anything jQuery based?
Here are 2 that may work for you:
Roundabout
Coverscroll

How can I get datepicker instances of different sizes?

I got a datepicker set up for my main page and now I wanna set it up for some of my other stuff. The problem is that I need it smaller than what I'm using on the main page. Is there a way to have different sizes for different instances of the datepicker?
jQueryUI uses CSS to style all of it's widgets, and those are typically stored in a CSS file as theme. Depending on the theme you're using it may or may not be possible.
If the theme you're using uses ems or % for the width and font-size, then you could easily create a new style that would alter the look of all of its children.
For example:
.someClassNotOnTheMainPage .datepicker {
font-size:.75em;
...
}
If you're looking for a pure Javascript solution or an option to pass to the datepicker widget, unfortunately, there isn't one.
You can design and load a different css than the default jQueryUI theme. Although the themes usually have the same size for the calendar, you can choose to personalize this feature to your needs.

Categories