I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
I am trying to use more flexbox and css grids so I am not seeing the full use of stuff like materialize css and bootstrap. However I do like the designs of their stuff like(card panels from materialize) but I don't want really want to import all their stuff stuff(css, js) just for a few styles.
So I am wondering if there is just a style that has like the css code for making buttons, card panels and etc that I could just copy into my own css files.
I know I can just go with the inspector and grab the styles from bootstrap and materialize but alot of times styles are getting overwritten and multiple classes are being applied.
I see three options for you:
Easy and obvious: Include just CSS files, not JS, to achieve the same styles.
Dirty and tedious: Copy out styles manually into your code.
Right and educating: Utilise some CSS metalanguage like SCSS. Then if you get e.g. Bootstrap with package manager like npm i -D bootstrap you can import e.g. button styles with:
#import 'node_modules/bootstrap/scss/variables';
#import 'node_modules/bootstrap/scss/buttons';
or materialize-css:
#import 'node_modules/materialize-css/sass/components/variables';
#import 'node_modules/materialize-css/sass/components/buttons';
i am working on helpdesk system and i am creating this system in mvc.
i am designing this system in bootstrap framework.i have created my master page with bootstrap template.
i am using bootstrap.min.css file for bootstrap design.
so my question is can i use my own css for my render body design and can i create my own css file and add those css class and so my website will be responsive ???
or should i have to write those css in bootstrap.min.css file.
but when i am adding my own css class in bootstrap.min.css then there is no effect of css.
can u guys me some suggestions please????????
you should write your own css and add link. don't change bootstrap.min.css.
and your site will be responsive
Bootstrap.min.css is only for the default styling of spans and rows using Bootstrap. You can and should write your own css file to override any of the basic styling, instead of modifying Bootstrap.min.css.
You can always use your own css independently of the css of the framework "bootstrap", of course.
Write the properties in the bootstrap.min.css is not well. It's more clean to write your property in a new css file or directly in the html tag of which you want add your property with the 'style' attribute.
Example :
<a style="text-decoration:none;color:red;">
Now, if you use your own property css, it can happen that some properties is applied to your component by default because you use bootstrap. To use your property value and not coming from 'bootstrap', you have to use "!important".
Example :
color : black !important;
Do not edit the bootstrap.min.css file. Use that as your base and then include your own CSS roles after it so that any changes you make will overwrite the bootstrap.min.css file leaving you with the code that you customized.
I have a project that I am trying integrate with the twitter bootstrap. I added the bootstrap-responsive.scss and use #import to add it. When I look at the compiled CSS file it shows the entire file but when I go to the HTML and add a class from the bootstrap like .span8 or something the element will not inherit those classes. They do not show when I inspect the element in chrome. Am I doing something wrong here? I figured I had acces to any classes that are in the bootstrap file when I imported it?
You need to add bootstrap and bootstrap-responsive. bootstrap-responsive on its own won't work.
I have an existing website with lots of old pages and forms laid out with tables which I am trying to gradually transition to CSS. I want to use the Twitter Bootstrap stylesheets - particularly the styles for forms - but only on sections of pages where I have explicitly requested them. For example, I might surround the whole form in a div like so:
<div class="bootstrap">
<!-- everything in here should have the Bootstrap CSS applied -->
<form>
<p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
</form>
</div>
I want all other forms to remain the same as they are now, because I won't be able to change them all at the same time. Is there a simple way to do this? I could go through every single style in the Bootstrap CSS and add a parent selector (e.g. 'p' would become 'div.bootstrap p'), but that would take a long time and it would be easy to miss styles.
Edit: If such a thing isn't possible, is there a free tool which can extract all the styles from a file, add a prefix and then save them back again?
For Bootstrap 3, it's easier if you use less:
Download the Bootstrap source code and make a style.less file like this:
.bootstrap {
#import "/path-to-bootstrap-less.less";
#import "/path-to-bootstrap-responsive-less.less";
}
Finally, you have to compile the less file; there are many alternatives
https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS
https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js
Or use npm to install less then compile the style.less file to style.css:
npm install -g less
lessc style.less style.css
The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is:
Concatenate the two Bootstrap files (bootstrap.css and bootstrap-responsive.css) into bootstrap-all.css.
Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
Append bootstrap-all.css to bootstrap-all.scss.
Close the div.bootstrap selector by appending } to bootstrap-all.scss.
Run SASS on bootstrap-all.scss to produce a final CSS file.
Run YUI Compressor on the final file to produce a minimised version.
Add minimised version to head element and wrap everything I want the styles to apply to in <div class="bootstrap"></div>.
I came up with a CSS solution if you can't use LESS/SASS because of work/other reasons.
I used this site, http://www.css-prefix.com/, and copy/pasted bootstrap.min.css into there. I set prefix ='.bootstrap' and spacer =' '. It will prefix everything with .bootstrap except not perfectly.
If you do a grep for '.bootstrap #media', you will find that the first class to the right of the opening bracket doesn't have .bootstrap as the parent. Add .bootstrap to all these occurrences, about 68 for me.
Then replace all '.bootstrap #media' with '#media'.
Final step is to replace all '.bootstrap #' with '#' (should be about 5 occurrences).
Example:
.bootstrap #media (min-width:768px){.lead{font-size:21px}}
needs to be replaced to
#media (min-width:768px){.bootstrap .lead{font-size:21px}}
Kind of a brute force method, so definitely try the LESS/SASS method above first.
<div>
No Bootstrap
</div>
<div class="bootstrap">
Yes Bootstrap
</div>
I have an easy solution.
Copy bootstrap css content to this (http://css2sass.herokuapp.com/) online css to scss/sass converter.
Add your tag information (e.g. div.bootstrap{ ) to the start of scss content and close the tag at the end.
Copy the whole scss content to this scss to css converter (https://www.sassmeister.com/) and convert it :)
I wasn't satisfied with any of these answers. Using Less to scope the rules created all sorts of defects. Clearfix, for example was all messed up. And rules like button.close became button.bootstrap close instead of what I really wanted: .bootstrap button.close.
I took a different approach. I'm using PostCSS to process the out-of-the-box CSS that is delivered with Bootstrap. I'm using the Scopify plugin to scope every rule with .bootstrap.
This mostly gets there. Of course, there are the html and body rules that become .bootstrap html and .bootstrap body which become non-sensical. No worries... I can just write a PostCSS transform to clean them up:
var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
return function(css, result) {
css.walkRules(function(rule) {
rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
});
}
});
Now, I can isolate all Bootstrap styling by adding a class="bootstrap" at the top level.
That's tough. You can't Apply different css stylesheet for different parts of the same web page.
I suspect the only way to do this is to make a separate file for your content to take the bootstrap styles, and i-frame it into the page like this:
<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>
then in content-to-take-bootstrap-styles.html
reference the bootstrap style-sheet in the header. But then you have all the complications of iframes -- e.g.: the iframe element won't grow to accommodate the length of your content.
You can use ready to use isolated css for Bootstrap 4.1 (compiled with LESS) -
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
It have isolated css for themes -
bootstrapcustom.min.css - default bootstrap 4.1 isolated style
https://bootswatch.com/cerulean/ darkly.min.css - isolated css
https://bootswatch.com/darkly/ flatly.min.css - isolated css
https://bootswatch.com/flatly/ litera.min.css - isolated css
https://bootswatch.com/litera/ lux.min.css - isolated css
https://bootswatch.com/lux/ minty.min.css - isolated css
...
To use Bootstrap CSS, simply wrap your HTML in a div with the class bootstrapiso, like so:
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
And use any css style from folder css4.1 like so:
<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>
// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
Done!