CSS (Override bootstrap core) - css

Question

I wrote the following CSS:
MyForm.css
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
If i use it in my code:
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
It doesn't work. If I delete the subclass .my-inner it works properly.

Answer 1

Is it really possibe to use the subclass that way?
I would have done something like:
.my-container [class^="col-md"] .my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
}
...depending of what you try to acheve.

Answer 2

Based on the markup, it looks like you're trying to use a preprocessor like LESS or SASS. The reason the CSS isn't outputting correctly is because you didn't close .my-inner.
If you're using a preprocessor, it should look like this:
.my-container [class^="col-md"] {
.my-inner {
padding : 10 px;
background-color: #eee;
.... etc...
} <-- forgot this closing tag
}
If you're using plain CSS, see Fredric's answer.

Answer 3

Please change your html code to this
HTML
<div class="container my-container">
<div class="col-md-4" id="divTabPortfolios">
<div class="my-inner">
</div>
</div>
<div class="col-md-4" id="divTab">
<div class="my-inner">
</div>
</div>
</div>
You missed the double quotes , maybe this is causing problem in your html code and also check this for css code.
CSS
.my-container [class^="col-md"]
.my-inner
{
padding : 10 px;
background-color: #eee;
.... etc...
}

Answer 4

Are removing subclass .my-inner from MyForm.css or the HTML page?
As Dead has said, you stylesheet must be after bootstrap's, so I
ask, is that in the correct order?
If you inspect your page in
the browser, can you see your custom properties there?
Try to write you .my-inner class directly (removing .my-container [class^="col-md"]).
If none of that work, try to post more details about.