I want to have my table not take all available space. In my bootstrap.css, I have:
.table {
width: 100%
...
In Chrome Dev Tools, I cancel it and the table shrinks.
How can I override this in my CSS files without modifying the bootstrap file.
Thanks
Ensure your own stylesheet is included after Bootstrap in your HTML.
Override Bootstrap's 100% width style declaration by setting the .table's width to 'auto' in your stylesheet:
.table {
width: auto;
}
Option 1
If it's possible to add your CSS file AFTER your Bootstrap file, this is really all it takes :
.table {
width: auto;
}
Option 2
If it's not possible to add your CSS file AFTER your Bootstrap file, you could increase the specificity like this :
table.table {
width: auto;
}
Note that this would also work if you put this code after your Bootstrap file. Option 1 is just slightly simpler.
Option 3 (not recommended)
You could also add an !important declaration to your rule, which means your rule will override the Bootstrap style no matter (1) whether it's before or after your Bootstrap file, and (2) regardless of specificity :
.table {
width: auto !important;
}
Because CSS rules with !important declarations can override any rule without !important declarations no matter where they're defined or what's their specificity, styles with lots of !important declarations are difficult to maintain and debug. Therefore, it is recommended to avoid using !important, so you should use either option 1 or option 2, depending on whether your CSS comes before or after your Bootstrap file.
.table {
width: initial;
}
or
.table {
width: unset;
}
does the trick.
.table{Width :100% !important;}
Related
I am trying to convert my bootstrap theme to a RTL layout. I load two stylesheets due to the orders you see below:
#import "mycss.css";
#import "RTL.css";
How I can disable any CSS property in mycss.css by overriding them with a second CSS property in the second stylesheet?
I tried the initial value for this property, but not working.
Look at my example here:
First property in mycss.css stylesheet:
.myclass { right: 64px; }
Second property should be disabled and override by the code below:
.myclass { left: 64px }
The problem is that, after writing the second CSS property, both properties remain. I expected the disabling or deleting of the first property with only the second property remaining.
I have a similar problem with background-color, too.
For disabling you can use 'unset'.
For example background-color: unset;
All css properties have a default value. You can reset the value to this default to make it ignored.
In the case 'right', the default is 'auto' - MDN
.myclass {right: auto; left: 64px; }
I am setting the width on an image:
<img class="someImageClass" src="someImage.jpg">
I use the following css styles:
.someImageClass {
max-width: 30px;
}
But I also have a global css style for images as well:
img {
max-width: 100%;
}
The max-width in the someImageClass style is being overwritten by the one that is global and I don't understand why. If I apply the css class directly on the element, it should take precedence over any global style.
try
img.someImageClass {
max-width: 30px;
}
There must be another rule using img.className somewhere. But in normal cases you can calculate the specificity of CSS rules. How is explained here https://www.w3.org/wiki/Inheritance_and_cascade#Specificity
Are you aware of the term important ?
.someImageClass {
max-width: 30px !important;
}
I am trying to increase bootstrap 3.0 navbar height which is used with fixed top behavior.
How can I do it?
Without seeing your code it is hard to help but in Bootstrap 3 typically,
This is the less variable #navber-height and #navbar-padding-vertical will adjust the height of the navbar.
But in my current Bootstrap app I have it set up different using
header.navbar {
height: 54px;
}
The easiest thing to do would be to inspect element on the navigation bar then look at the css to see where the height value is. Adjust it to the desired height.
Then create a rule in your css with !important to override the existing Bootstrap css.
This is another example without less.
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
Create new css file and put your overrides in it.
<link rel='stylesheet' href='/stylesheets/bootstrap.css'/>
<link rel='stylesheet' href='/stylesheets/overrides.css'/>
inside overrides.css
If this css rule exists inside Bootstrap when you inspect element then override it in the overrides css file you have added now.
remember use !important
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
If you are using the .less or .scss version, you can edit the following $navbar-height variable in code:
https://github.com/twbs/bootstrap/blob/master/less/variables.less#L360
If not, you need to override it with a rule by statiing:
.navbar {
height: {new height};
}
I look on Stack Overflow, and didn't find the solution, I know how to override style if style exists, just change its property. But now I have a strange style to override
Here is an example of what I have
First I have this one:
.slikezamenjanje img{
max-width: 100%;
max-height:150px;
padding-right:7px;
}
Now I need to override that style with just this one:
#zoomTarget .slikezamenjanje img {
max-width: 100%;
}
The problem is that first style appends second, but I don't want that, in this second style what I need is just one line, not to append from the first style?
Instead of override you can add another class to the element and then you have an extra abilities.
for example:
HTML
<div class="style1 style2"></div>
CSS
//only style for the first stylesheet
.style1 {
width: 100%;
}
//only style for second stylesheet
.style2 {
width: 50%;
}
//override all
.style1.style2 {
width: 70%;
}
You just have to reset the values you don't want to their defaults. No need to get into a mess by using !important.
#zoomTarget .slikezamenjanje img {
max-height: auto;
padding-right: 0px;
}
Hatting
I think the key datum you are missing is that CSS comes with default values. If you want to override a value, set it back to its default, which you can look up.
For example, all CSS height and width attributes default to auto.
I have a css file with this style:
.filefield-element .widget-edit {max-width: 70%;}
I wanted to increase the max-width without modifying that css file, so I created a custom css file with this style:
.filefield-element .widget-edit {max-width: 99%;}
In the "html/styles" pane, I see that the styles are listed in the correct order:
.filefield-element .widget-edit {
max-width: 99%;
}
.filefield-element .widget-edit {
float: left;
max-width: 70%;
}
However, "max-width: 99%" is not overriding "max-width: 70%". It seems that the more restrictive value (70%) is used, even when the less-restrictive value (99%) comes first.
Is there a way to override a max-width value with a larger (less restrictive) value?
You can override (unset) max-width with
.foo{ max-width:none; }
... to clear any inherited max-width.
Try using !important, or selector with higher specificity.
Example:
max-width: none !important;
This is a specificity issue. Take a look at http://htmldog.com/guides/cssadvanced/specificity/.
Basically, you need to make one more specific than the other. Put the containing element before .filefield-element .widget-edit and it will be overridden
Use JavaScript to set max-width to none first, then reassign a new value.