Custom CSS over Bootstrap CSS

Question

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 !

".col_etat" could be "html body td.col_etat" to over-power bootstrap without using !important;, which is a bad idea and causes maintenance woes. you should only "go nuclear" and use !important after all else fail, ask any designer... — dandavis
– dandavis, Commented Aug 12, 2014 at 16:30
See developer.mozilla.org/en-US/docs/Web/CSS/Specificity for info on how it works. — tcooc
– tcooc, Commented Aug 12, 2014 at 17:41

NicoFerna · Accepted Answer · 2014-08-12 16:37:44Z

4

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

answered Aug 12, 2014 at 16:37

NicoFerna

6134 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JeanBlaguin Over a year ago

You're right, it works, I didn't know I had to be more specific, thank's for your help !

Community · Accepted Answer · 2017-05-23 12:20:50Z

0

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.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Aug 12, 2014 at 16:44

user1959978

34 bronze badges

1 Comment

JeanBlaguin Over a year ago

That's it ! I didn't know the "!important" keyword, but I won't use it, thank's for the advice !

bert · Accepted Answer · 2014-08-12 16:29:56Z

-3

I always just edit the bootstrap css file.

answered Aug 12, 2014 at 16:29

bert

4,0794 gold badges19 silver badges32 bronze badges

1 Comment

omma2289 Over a year ago

-1 It is considered bad practice to edit core files for any framework/plugin

Collectives™ on Stack Overflow

Custom CSS over Bootstrap CSS

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related