Search code examples
cssbootstrap-4datatables

How to override bootstrap datable css

I have modified my datatable to be editable but I ran into a display problem and it looked like below: enter image description here

I played around in firefox's inspector changing some css settings and fixed the issue so now it looks like this.

enter image description here

What I modified is this block of css it was class="col-sm-12 col-md-12", I modified it so that it's just class="col-sm-12 col-md.

enter image description here enter image description here

Now how can I make my css changes permanent for this table only? ps, I know the tags say boostrap-4 but I'm actually using boostrap-5. Couldn't find it in the tags.

Solution

  • Try adding an important tag like this to your main css stylesheet to override your bootstrap.

    .col-sm-12{width:100%!important;}