Override Bootstrap CSS with custom CSS [duplicate] - html

This question already has answers here:
Customizing Bootstrap CSS template
(9 answers)
Closed 1 year ago.
I have a small problem overriding some of Bootstrap's CSS style.
The standard definition of a bootstrap table has the following code:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
I would like to set margin-bottom to 0px, using my own css code, but I'm having some problems overriding it.
This is my code:
table .table.table-responsive .table-middle {
margin-bottom: 0px;
}
How to fix it?
Thanks in advance! :)

Don't add important. That is a bad habit to fall into and will cause you even more headaches in the future. Plus, I doubt it will solve the problem. Instead, try to find out why your targeting (table .table.table-responsive .table-middle) isn't targeting and overriding the table you want.
The easiest way to do this is via Chrome or Firefox's "Inspect Element". Take a look at the table you want to change. See where the margin-bottom lies. Maybe it's on .table.blue or .container .table or something.
However, judging by your targeting, I doubt that is an issue. Instead, I believe you aren't targeting the element you want.
table .table.table-responsive .table-middle
will look for all <table> elements, then look for children of that <table> element with the classname of table AND table-responsive, and then look inside that element for children with the classname of table-middle.
Your HTML would have to look like this:
<table>
<??? class='table table-responsive>
<??? class="table-middle">
Instead, I'm guessing you have a <table> element that looks something like this:
<table class="table table-responsive table-middle">
Simply writing table.table or table.table-responsiveshould override bootstrap. Worst comes to worst, .table.table-responsive.table-middle will almost certainly work.
Remember
.classname .another-classname
with a space goes parent -> child
.classname.another-classname
without a space is one element that has both of those classes.

try adding the important.
table .table.table-responsive .table-middle {
margin-bottom: 0px !important;
}

Try Using !important after the css text. I have shown a example below
padding-bottom: 4.5rem !important;

Related

CSS - Class not registering when combined with bootstrap

I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.

Unable to override bootstrap css

I am trying to override the following found in the bootstrap class of "modal-footer"
margin-top: 15px;
I have the following HTML code that does this:
<div class="modal-footer my-modal-footer-override"></div>
and the following custom css :
.my-modal-footer-override {
margin-top: 0px
}
But this does not work.
Any suggestions ?
You could try a more specific selector. This could do the trick
.modal-footer.my-modal-footer-override {
margin-top: 0px;
}
Multiple class selectors should work in everything newer than IE6. Please note the absence of whitespace between the classes: this means that both classes are applied on the same element.
If this still does not cut it, you could put .modal before this selector, so: .modal .modal-footer.my-modal-footer-override.
The important! declaration could be used as a dirty hack, but I would advise against it.
Check your CSS import order. Make sure your custom css is loaded after Bootstrap. Use firebug or chrome dev tools to see if your styling is being overriden because of something imported laterin the html.
Have you tried this?
.my-modal-footer-override {
margin-top: 0px !important;
}
Using !important before the ";" will give this rule more weight than the bootstrap css.
You can add that inside yout HTML using ..css.. in the head, or in a new css document.

How to change the colour of a row in Bootstrap 3?

I want to change the background colour of alternating rows in a Bootstrap 3 grid. I thought that I could create some CSS and add it to the class in the div but the colour doesn't change.
Here's my CSS:
.row-buffer {
margin-top:20px;
margin-bottom:20px;
}
.row-even {
background-color:#76A0D3;
}
.row-odd {
background-color:#BDE3FB;
}
And my row is being defined like so:
<div class="row row-buffer row-even">
or:
<div class="row row-buffer row-odd">
The row-buffer is working perfectly but the row-even and row-odd don't seem to be making any difference? (My rows are being defined within a container.)
Am I barking up the wrong tree?
Without being able to see your exact situation I'm going to guess that you are having a problem due to selector specificity. If bootstrap has a more specific selector than just .class, then your rule will never override it. You either need to match or be more specific in your selector than bootstrap.
An easy way to typically gain a lot of specificity is to add an id to your selectors like :
#myrows .row-even {
background-color:#76A0D3;
}
#myrows .row-odd {
background-color:#BDE3FB;
}
I created a small example of how specificity can cause problems:
http://jsfiddle.net/path411/JyUy2/
These are the specific selectors you can override to change the color of odd rows in Bootstrap:
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: #your-color;
}
I assume you are trying to create different background styles/colors for alternating rows in a table.
The simplest way is to just add a self enclosing tag
<AlternatingRowStyle CssClass="danger" />
inside your table before the data.In a gridview control in asp.net just place this after the asp
gridview tag and before the columns tag.
You will immediately see the effect since Bootstrap has this predefined.
I hope my answer will help somebody in the future.
Cheers !

Why won't my paypal button center in my page

So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.

Replace html css style with condition from css file

I have this problem and I don't know how to fix it. In my project many html files have defined for div an width style, for example:
<div style="width:200px" id="boom">/*****/</div>
In css file if I put a condition like:
`div#boom{width:auto !important;}`
is ignored because style is defined in html for that div and from what I know html condition beat css condition.
How is possible to fix that? I don't want to edit all html pages because I would take a long time.
You are doing something wrong. Because !important makes the style the highest priority, so it always use the width: auto; and not the inline CSS.
An live example that this works: http://tinkerbin.com/wzrFiyaq
And a tutorial: http://css-tricks.com/override-inline-styles-with-css/
div[style] {
width:auto !important;
}​