use twitter bootstrap under a class - javascript

I have website built with many custom css styles in some css style files.I want to use twitter bootstrap in the website.but if i include it in my pages like -
<link type="text/css" rel="Stylesheet" href="assets/css/bootstrap.css />
so as you can guess because of this many styles and classes overwritten by bootstrap class and styles and so is lot of problems.so if there is way i can use twitter bootstrap css and js under a class?
I just can add my class name before every class in bootstrap.css file but that is time consuming or i go for it?? from web research i found -
.tw-bs {
#import "less/bootstrap.less";
}
by using lesscss.org.but i did not get yet how do i compile things in my windows pc so i can use twitter bootstrap under .tw-bs class only in my site.if anyone know step by step, save my time.

The best thing we have found is to use a separate CSS file where you deliberately overwrite some of the Bootstrap styles with what you want/need. For example, the default buttons in Bootstrap have rounded corners with a 4px radius. We decided that we wanted a more rounded look, so we put the following into a CSS file:
.btn{border-radius: 10px;}
When you reference your file AFTER the Bootstrap file it will overwrite the default Bootstrap values with yours. Sometimes the Bootstrap specificity is very hard to over-ride, in which case you'll need to style by referencing the ID of the element directly (which is more specific than classes.)

Related

How to isolate / scope global css in vue

Context: I have a Vue CLI project, consisting of two main parts: 1) what the customers see and 2) what an administrator sees. The customer part is using Bootstrap CSS and the other part is using Vue Material. Even though I am planning to rewrite the Vue Material part to Vuetify, the problem will most likely persist.
The problem: The Bootstrap CSS is conflicting with the Vue Material CSS. When the Bootstrap CSS is applied to the Vue Material section, it looks messed up. The other way around too; when the Vue Material CSS is applied to the Bootstrap section, it looks messed up.
Is there any way I could make this work?
This Vue project used to be encapsulated inside a Laravel project, making heavy use of Laravel Mix. I could then use the mix file to compile all the Bootstrap CSS into 1 bundle. This bundle would be referenced in the index page using this line:
<link rel="stylesheet" href="bootstrap-bundle.css" id="bootstrap-stylesheet">
<link rel="stylesheet" href="vue-material-bundle.css" id="vue-material-stylesheet">
Using two layout components in Vue, I could then toggle the stylesheets in like this:
// The Bootstrap layout component:
created() {
document.getElementById('bootstrap-stylesheet').disabled = false;
document.getElementById('vue-material-stylesheet').disabled = true;
}
// The Vue-Material layout component:
created() {
document.getElementById('bootstrap-stylesheet').disabled = true;
document.getElementById('vue-material-stylesheet').disabled = false;
}
It may not be a pretty solution, but it works. Also works in most browsers.
However, I now use Vue CLI instead of Laravel & Laravel Mix. This means I cannot name the generated output as easily anymore.
I have already tried using the CSS deep selector: /deep/ & >>>. But this does not fully work since bootstrap also sets styles to the :root, html & body elements. So when using the deep selector in scoped CSS, those styles are not applied because the end result would be something like this:
.customers-container {
body {
// bootstrap adds style to the body
}
}
The above does not work because the body is not a child of the customers-container but the other way around.
I feel like there might be a solution using bundle names or chunk names or something else from Webpack or Vue config. But my Webpack knowledge is not enough to work this out myself and I cannot seem to find the answer online.
First thing that comes to my mind is just downloading the bootstrap and vue-material stylesheets. Then you can try doing the following, grab the bootstrap stylesheet and wrap it in something like:
.administrator-view {
/// the complete bootstrap stylesheet
}
Do the same with the vue-material but with a customer class .customer-view
Then you can add one of those classes at the HTML or body element whenever you switch between the views.
Don't forget to include both stylesheets!
EDIT: Did a search on the site, you should check Limit the scope of bootstrap styles

How to avoid css conflict when integrating angular 6 app into other app?

We made an angular 6 webapp and we would like to integrate this webapp into one of our customer webshop.
The problem is that we have some css conflict.
For example :
- The webshop uses bootstrap 3 and our app bootstrap 4.
- Some shop css are overriding webapp css.
- Some webapp css are overriding webshop css.
What is the best solution to avoid these conflicts ?
The best solution would be to use one bootstrap version for the whole project. If you mix bs3 and bs4 there will be conflicts because the classnames are (for the most (grid-)part) the same but the underlying css is different.
One solution would be to wrap the webshop in an extra div with a specific class and import bootstrap3 css only for this class, like so (in SASS)
.webshop {
#import all-of-bootstrap3;
}
That way bootstrap 3 only works for everything that's inside this wrapper. Since bootstrap has low specifity, this should be enough to overwrite it.
Ideal solution would still be to use same bootstrap-version for one project.
Edit: This of course also works the other way around, you can also wrap all of your components in one class so that all your css are using the higher specificy. Might even be the better solution if you have to support multiple clients.
you can of course also change the css from bootstrap itself, as explained here Customize Twitter Bootstrap Classnames
Good answer from #cloned
Also, you might try to wrap one app in one class and the other app in another class by putting a class on the html tag.
Then prefix all your styles for one app like this:
html.app1 .some-style {
background-color: pink;
}
And the other app like this:
html.app2 .some-style {
background-color: green;
}
If you are using scss or something similar this should be pretty straightforward since you can use nesting.

How to use bootstrap css and javascript in selected pages in AngularJS?

I am in middle of developing an webapp using a MetroUI CSS. After developing a few pages I understood its css are conflicting with Bootstrap's css, so I removed the Bootstrap's css from the project.
Now in another page where I need to include a class from Bootstrap's css. How can I do that without conflicting the css with MetroUI css?
It sounds like you are trying to use both MetroUI and Bootstrap in your webapp. Since these are two different libraries/frameworks trying to do a lot of the same stuff you are going to have conflicts and that is unfortunately unavoidable.
My recommendation would be to pick the one you plan on using the most and then overwriting any styles you'd like in your own custom style sheet.
For example: You like most things about MetroUI but prefer how Bootstraps buttons look. Well you can reference MetroUI and then pull out the bootstrap button styles you like and include them in a custom style sheet (making sure you overwrite any MetroUI styles you don't like). Then reference your custom style sheet after MetroUI and it will overwrite MetroUI with the Bootstrap button styles you have included.

Different bootstrap CSS files?

I downloaded a Web template which is based on bootstrap version 3.
Inside the template I found CSS files named bootstrap-cerulean.css, bootstrap-journal.css, bootstrap-classis.css. Although, I can not find a file named bootstrap.css. What do bootstrap-cerulean.css, bootstrap-journal & bootstrap-classis define or do? Are they themes for bootstrap? Do I still need to reference bootstrap.css if I reference one of the themes such as bootstrap-cerulean.css?
All the bootstrap.css styles are most probably modified and integrated with those three mentioned custom css files that you got with the template so no, you don't need to link the default bootstrap.css anymore unless you're planning to override certain elements on the page to the default style (which I would recommend using a new css file with the few changes kept there for overriding the template's style rather than linking the whole bootstrap.css to the template.

jQuery UI and using/not using themes

We're using jQuery UI Tabs at the top of the page (with no themes, using our own styles in the screen.css file) and using jQuery UI Datepicker later on down the page.
We want to use a jQuery Theme for the Datepicker, but we want to use our own styles for the Tabs. But as soon as we include the Themes, it (obviously) styles both completely in a particular style.
Is there anyway of setting a jQuery UI component to have a theme or not? Some sort of configurable? Or is it purely about the style class names and doing what you need there? ... It's just having blank (no themes) is easier to style from, then trying to undo what the Theme stylesheets are setting...
jQueryUI completely relies on the class names currently imported to the html page. They all of start with ui-
Since it's just plain CSS you can do one of two things:
cut and paste the classes you want from the theme's css into your own css file.
import the theme's css file and overwrite the classes you are interested in with your own css.
Check out the Advanced Theme Settings link on the right side of this download page, right under the theme dropdown box. There you can define a CSS scope to limit your theme to a particular portion of a page.
Then you just need to put that css scope class on a parent of the datepicker.

Categories