I have the following line in my tables.less, that I do not want in my code.
th {
text-align: left;
}
Problem is, that I do not have tables.less in my website directory, so I can't remove the line - and I cannot override the text-align, as I don't want any text-align at all.
How can I edit or remove elements from the Bootstrap 3 tables.less?
To remove this you can go to http://getbootstrap.com/2.0.4/less.html and learn how to generate CSS from the Bootstrap LESS code and how to use that in your code. You can modify some things on the webpage, but I think you'll need to get the LESS files, remove this snippet you don't want and compile the CSS.
Otherwise you can download and edit the bootstrap CSS where you remove this code. Then you'll need to use your version of the bootstrap CSS
Or the simplest thing would probably be to create your own CSS rule to override the Boostrap rule and place it in your own CSS file or script
Related
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
Zurb Foundation's text field have a 1em bottom margin that I want to remove.
I couldn't find custom scss in zurb foundation documents.
I'm overwriting the stylesheet by using !important option.
But if possible I don't want to use it.
Is there better way to remove the margin from foundation form text field?
I'm using foundation in a rails project.
You can override the styles without using !important option.
If there are multiple contradictory CSS file then whichever gets called LAST will override the previous one.
For example if you add below styles in your CSS file and include it after docs.css then it gets highest priority.
Have a look at the JS Fiddle
input[type="text"]{
margin: 0;
}
If you want to use the SCSS method you want to change the value for $form-spacing;
Forms | Foundation for Sites 6 docs
$form-spacing: rem-calc(16);
I was looking for a (simple) WYSIWYG Editor jQuery Plugin that's compatible with Bootstrap 3. I've seen a lot WYSIWYG Editors jQuery Plugin that were compatible with the previous Bootstrap, but my website uses Bootstrap 3, so each time I implemented such a jQuery Plugin, my Bootstrap 3 would ruin the buttons and mess the whole editor up.
So now I'm asking whether there is an option to enable the Bootstrap 2 stylesheet only for one div and its contents.
I assume a iframe could work, but then, I need the WYSIWYG Editor's contents (which are in the iframe then), along with text inputs on the 'non-iframe'.
One way you might be able to solve this would scope your css for that div. This is what I have implemented with a content management system that I have created.
Let say for example you give the WYSIWYG Div an ID of HTMLEditable.
you could target that div with your css and all the css within that div.
#HTMLEditable .WYSIWYG{
....css goes here
}
#HTMLEditable p{
....css goes here
}
The above css will only apply to that div.
Then its just a case of finding the correct css that you need in that div.
Note you may need to override/reset the css for that div to stop your bootstrap3 applying to it.
Here is an example of a reset css. (You will need to scope this as well to make sure you don't reset all your css).
EDIT: use LESS
To make this easier you can use LESS which is what bootstrap uses.
#HTMLEditable {
//import the modal css
#import "bootstrap.css";
}
you will need to make a file 'HTMLEditable.less'. Then Add the code to similar to the above.
The less will them compile the above into css and will scope everything in the css to #HTMLEditable
Check out the LESS site and look ate the nesting. This is what you are after. This site will also show you how to compile it.
You need to put the class or id of this div before all css rules. You can do it like this if you need a css file and not less.
#HTMLEditable{
paste in all of your css
}
than copy all of this paste it here: http://less2css.org/ in the less area and it will generate the right css for you.
How would I create a CSS ID #sidebar that is equal to span4? I mean I could do <div id="sidebar" class="span4">, but I would prefer to abstract that into #sidebar by not typing span4 and not have to specify width dimensions manually in #sidebar either.
Is that possible with just plain CSS?
Edit: Found a great article on this issue: Please stop embedding Bootstrap classes in your HTML
No it is not possible using only css.
Another solution is to make a custom build of bootstrap. You can add your a custom less style and build the bootstrap css from it.
ex
#sidebar {
.span4;
}
What you need to do is to
1. Clone the bootstrap repository
2. Add a custom.less files under less directory
3. Add custom.less file at the bottom of bootstrap.less file
4. Compile the bootstrap.less file with a tool like Cruch!
5. Instead of the default bootstrap.css file use the custom file
in my <head> tags, ive placed the location of bootstrap.css
if i place <div class="container"> it creates a fixed width.
what i wanted to happen is manipulate the default values of the container width by importing another set of stylesheet.
another scenario is, if i placed a span8 how do i put background colors on it without actually editing the bootstrap.css rather, customize it using a new stylesheet.
does putting 2 stylesheet possible? then inherit / manipulate all values in the bootstrap.css in a new stylesheet?
i apologize if my explanation aren't that clear. its kinda hard to express verbally what i wanted to happen. :)
When you add a second stylesheet, you can override rules of the first one. Just make sure you add them to your html page in the right order.
If you want to make sure a rule won't be overridden you can add !important to it. Example:
.example {
color: red !important;
}
Yes it is possible. That is what the "Cascading" part of CSS is. Short answer is to add your own style sheet after the bootstrap.css and before the responsive.css and your styles will be used because they are the latest definition, i.e. the rules "cascade" down.
Long answer is take a look at the docs. There's a lot to learn there if you have the time.
Also have a look at the bootstrap customization page