CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Dewey Banks
Dewey Banks

Reputation: 323

Bootstrap 4 beta ( latest version ) Change colors of striped table

I have a striped table coded as follows:

<table class="table-sm table-hover table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                   ...
            </tbody>
        </table>

I am using the latest Bootstrap 4 beta version. I want to change the alternating colors that Bootstrap uses to "stripe" the rows. I wasn't able to find anything in the documentation. As per a four year old post here on Stack Overflow, I could just add my own css file. However, I'd like, if it's possible, to do this just using bootstrap classes.

Thanks for your help, Marc

Upvotes: 0

Views: 1942

Answers (2)

user3361996
user3361996

Reputation: 373

If you inspect the element on the demo page Bootstrap v4 tables you will see that they are targeting the Bootstrap .table-striped class. Specifically, the odd rows. Here's a demo that should help JSfiddle.

.table-striped tbody tr:nth-of-type(odd) {
    background-color: red;
}

Upvotes: 2

this.girish
this.girish

Reputation: 1306

you forgot to put table class to your element write like this <table class="table table-sm table-hover table-striped"> should work, or maybe you have not included bootstrap CSS Properly

Upvotes: 2

Related Questions