I'm developing a web app which must have an option to see an area with Bootstrap4.1 or Bootstrap3. All app is developed with Bootstrap3:
I have logic implemented to switch between BT4 and BT3
But when I insert the Bootstrap4 all page is affected.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
How can I apply Bootstrap4.1 only into specific area?
OK. You've got some work to do.
First download Bootstrap 4's source files and open the bootstrap.scss file.
Enclose the whole CSS with a class-name of your choice.
Example:
.your_class_name {
/*Source files*/
}
Now you have an SCSS file.
Then go to this link and copy paste your code and convert it to CSS file.
You'll notice that all the Bootstrap's classes have be preceded with your class name.
Copy that file to your project.
In the HTML code, whenever you want to use the Bootstrap 4 classes, simply start with
<div class="your_class_name"> and enclose your contents in it.
Bootstrap 4's classes will be applied only to the enclosed div's children.
Related
I want to change the style of a commonly used component whose style is applied by framework, only in one case (component). I'm using Devextreme as framework with React JS.
I can mutate the corresponding class (.dx-texteditor.dx-editor-filled::after) in browser Inspect. Changing the style of the class in the main CSS or any other CSS file will be applied to all similar components. Also, if I use module.css, it doesn't work because I don't apply the class myself (It is applied by framework). What is the best way to change the style of such a class only for a specific component?
What is module.css? I'm going to assume it's your own CSS file...
I don't know if it will help, but the application of a style sheet depends on the order given in the page.
So your CSS file should be placed after that of DevExtreme's CSS files, if I'm not mistaken.
This means that you should therefore obtain an order like this:
<head>
<!-- ... -->
<!-- DevExtreme -->
<link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="false">
<link rel="dx-theme" data-theme="generic.light.compact" href="css/dx.light.compact.css" data-active="false">
<!-- Customs CSS -->
<link href="css/module.css" />
</head>
The 2nd solution to test, but which I do not recommend at all, is to put !important after your CSS properties:
.dx-texteditor.dx-editor-filled::after {
color: red !important;
}
Otherwise you have to go through your own CSS class and add it to the DevExtreme component.
I specify that I have not tested these solutions, but these are some leads that I can give you
I am loading basic semantic-ui.min.css through CDN, ie:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
However, my page has other divs like this:
<div id="wrapper">
<div id="menu-in-react"></div>
<div id="container-for-non-react-stuff"></div>
</div>
I would like semantic-ui css to be applied selectively to only:
div #menu-in-react
and not to
div #container-for-non-react-stuff
However, right now, by including the semantic-ui-css file, it is applying its style to div #container-for-non-react-stuff too.
How do I limit the application of semantic-ui.css to only specific divs (or exclude from certain divs)?
Note: I also tried using require('./myDist/semantic.css') using webpack to load the css, but this also ended up in semantic-ui taking over all my divs.
Thanks!
If you use sass, you can nest the entire semantic ui framework inside a parent selector so that it only applies to elements within:
#menu-in-react {
#import 'semantic-ui';
}
See here for more info:
https://codepen.io/trey/post/nesting-sass-includes
Do note that you'll have to save the framework css as a local sass partial like _semantic-ui.scss in order for this to work, as sass imports will not parse externally hosted resources.
I wouldn't recommend importing the entire framework without cleaning up some of it at least; the framework css includes some dom element styles (ie. html, body, etc) which would be quite useless when nested in a parent selector.
By default, Angular 2 compiles the CSS into JavaScript, especially when using WebPack as in Angular-CLI. I would rather this not happen for a couple of reasons.
The first reason is that when I'm developing, I find it really helps to be able to see in the developer tools exactly what style sheet a specific style rule was coming from and what line number it was on. The second reason is that I think compiling CSS into the code kind of misses the point of good CSS, which is that you can apply a different style sheet and have an entirely different look and feel with the same markup.
Is there a flag somewhere that I can set to leave the CSS in .css files, where IMO it belongs?
This is the whole point of encapsulated components.
A component should have it's own styles encapsulated with it so it can be shipped with the styles.
Imagine you want to publish one of your components to be used by others, shouldn't it have its own styles with it ?
That means Angular needs a way to link those css to the component , thus seperates them into chunks and injects them into head tag.
To solve your problem though , you have couple of options :
1- Not using the Emulated Encapsulation :
Components by default have a property called encapsulation which is set to Emulated , you need to change it to None:
#Component({
encapsulation:ViewEncapsulation.None
})
Then , you can put all you css in the head tag your self like you'd do with a normal html page.
2- If the problem is theme ing , you can make your component themeable .
You can have a theme attribute for your component and then based on that change the styleing :
#Component({
selector:'my-component',
styles:[
`
:host{
[theme="blue"]{
change what ever you want :
h1{
color:blue;
}
}
}
`
]
})
And then , using this component would be like :
<my-component [attr.theme]='"blue"'></my-component> // would be blue theme
<my-component></my-component> // would be default
Go to your base Html file(where the root module, main app is injected) and link the CSS stylesheets in your header section.
Webpack will not include it in it's compiled/combined css file which is injected into the page. The css file will still be included at run time in the browser.
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>dummy</title>
<meta name="viewport" content="width=device-width">
//was not injected/modified by webpack
<link rel="apple-touch-icon" sizes="57x57" href="app/images/apple-icon-57x57.png">
//webpack's injected this below from other components's imported/inline css rules
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>
With angular-cli 1.6.5 you can do this:
ng serve --extract-css
You will still have the style-encapsulation features, but devtools will now point to the component css source file.
I use the angular-cli as well (v1.0.0-beta.22). When I am ready to build for production I run the following command:
ng build -prod -aot
This generates all my production-ready files (bundled, tree-shaken and minified etc). Of particular note is that it will generate two versions of the style sheets.
One in js:
styles.b2328beb0372c051d06d.bundle.js
And another version is plain css:
styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css
I run some post-processing on the css file with gulp and use the css version for my production build. I am not sure if the same holds true for lazy loading (where the cli will produced different chunks), but it works for sure when lazy loading is not being used (I haven't launched a production-ready project yet with lazy loading).
I also tried a build with JiT compilation:
ng build -prod
It also produced the raw/minified version of the css style sheet.
Now, I know for sure the folowing does NOT work:
ng build
This will produce all the css embedded within js file, styles.bundle.js.
Since you want to use the raw css file during development, the only workaround I can think of is that you run ng build -prod in order to get the css file. Copy/paste this manually into your assets folder. Run "format" on the file to un-minify the file. Then do a normal build with a modified index.html file referencing your raw css file, and removing the styles.bundle.js script reference. Not pretty, but it might work.
Put a wrapper class in html example-
<div class="component-1-wrapper">
all yout html here inside component-1-wrapper
</div>
Structure your sass(scss) in the following way. Since your styles are wrapped inside component-1-wrapper, therefore it will apply only to component-1-wrapperclass
.component-1-wrapper{
// all the styles for component-1 here
.class-hello{
// styles
}
}
You can compile your css with sass and put all the css(seperated by modules) in seperate folder.Start the filenames by _, sass can import them:
You can refer your styles-main.scss in app.ts file
#component({
styleUrls:['styles/styles-main.scss']})
The style-sheets will be structured this way and individual component's class styles will be applied to particular component since there is a wrapper class in html
Hope it helps!!!!!!
I developed an application, and I used header and footer from another app. I created a separate style sheet for my app, called TestStyleapp.css. When I run my new application, the stylesheet I used from the other app is overriding my new CSS file.
Is there a way to include/reference the Teststyleapp.css (I tried calling it last) other than using !important in front of all the elements in teststyleapp.css?
When I use FireBug, I do not see Teststyleapp.CSS at all.
Even if it is LAST, if it is NOT more SPECIFIC (the other page items are more specific) it will not override what is above it in the stack.
Example:
div .myclass (background-color: red);
other (yours has)
.myclass(background-color:green);
you still see red.
<link rel="stylesheet" href="TestStyleapp.css" type="text/css" media="screen" />
It should be linked as such, between the head tags. Make sure the case is correct. I like using all lowercase and _ as a word separator. Just my personal style.
First, get the .css file to show in the NET tab in Firebug and we'll take it from there.
I'd like to use Bootstrap from Twitter in my ASP.Net MVC 3 application. I downloaded bootstrap.css and added it to my project in the Content folder. I opened _Layout.cshtml and added a link to the file:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
When I run the application no stylesheet is applied. How do I reference both Site.css and bootstrap.css from my _Layout.cshtml file?
I think the issue here is the inheritance, cascade and specificity CSS. Bear in mind that Twitter's Bootstrap resets all styles.
'If Site.css is before bootstrap.css only bootstrap is applied (which I didn't realize at first). Reverse the order and both work. Strange'
Actually, this makes complete sense. Site.css is loaded with all it's style declarations and immediately afterwards Bootstrap.css is loaded which resets most(if not all styles) thus declarations within Bootstrap.css will be applied. It only appears that both work probably because Bootstrap.css might not have a defined style or Site.css has very specific style defined using html ids or classes.
Reverse the order (with Bootstrap.css first), you are now resetting all styles first and then other styles are being applied. Since Site.css is loaded second, the styles defined therein will be applied to your site.
For your own interest, try to define an inline style within your html doc that has been defined within both 'Site.css' and 'Bootstrap.css', and see how the style gets applied by adding/removing the style definition.
I tried finding a good supporting explanation for CSS cascading, and the best graphic and simple explanation I found was this which notes
If selectors within external and embedded style sheets conflict but
have the same specificity, the final tie-breaker is based on the order
of apperance of the rules: the rule declared later wins. This applies
not only to the order of rules within a single sheet, but also to the
order that the sheets are linked, imported or embedded in the head of
the (X)HTML page.
You can copy and paste the CSS from the bootstrap file into your single .css file in order to cut down on the HTTP requests.
Just place all the bootstrap code at the very beginning and then your personal CSS following it, for organizational purposes.
However what you've done should work. Can you post an example on JSFiddle of what your markup looks like?
For more information see:
http://www.w3.org/TR/html4/present/styles.html#h-14.3