CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
JeanBlaguin
JeanBlaguin

Reputation: 97

Custom CSS over Bootstrap CSS

I'm using Bootstrap in a project and I want to center a text in some columns of my table.

So I use a class, specified in my tag :

<td class="col_etat" rowspan="4"> MyContent </td>

In my CSS I have :

.col_etat {vertical-align: middle;}

And it doesn't work, we can see that the class in Bootstrap CSS is "over" my class :

(https://i.sstatic.net/LlSoW.png)

It works if I do it without a CSS, but it's not what I want :

<td style="vertical-align: middle;" rowspan="4"> MyContent </td>

If someone knows what I have to do to make it works !

Upvotes: 0

Views: 1679

Answers (3)

user1959978
user1959978

Reputation: 3

This looks like it might be an issue with specificity. See: custom css being overridden by bootstrap css for reference.

But in your case, the specificity of your styling class .col_etat is at 10, whereas the bootstrap .table>thead>tr>th is at 13, which is more specific than your styling. You can specify more elements in your custom css in order to make your css override bootstrap's. I would try to avoid using !important if possible.

Upvotes: 0

NicoFerna
NicoFerna

Reputation: 613

Make sure to include styles.css file after bootstrap's CSS file. You might also have to be more specific when defining .col_etat, just like Bootstrap is, so:

.table > tbody > tr > td.col_etat {
  vertical-align:middle;
}

There's a good article about CSS Specificity here

Upvotes: 4

bert
bert

Reputation: 4059

I always just edit the bootstrap css file.

Upvotes: -3

Related Questions