Search code examples
htmlcss

Remove Bootstrap's v4.3.1 padding-inline-start

I am trying to remove Bootstrap's default padding-inline-start: 40px; property from my <ol>'s list items in a particular class. I tried:

.myclass ol {
    display: block;
    list-style-type: none;
    padding-inline-start: 0px;
    padding-left: 0px;
}

Used in HTML as:

<ol class="mb-4 myclass">
    <!-- the rest of the code -->
</ol>

The left padding for all list items still remains. How to remove it?

Solution

  • Your CSS code doesn't target correctly what you have in HTML. CSS should be:

    ol.myclass  {
  display: block;
  list-style-type: none;
  padding-inline-start: 0px;
  padding-left: 0px; 
}

    Sometimes, you may need to increase Specificity of your rule(s) to override something from bootstrap As a last resort, you can use !important to enforce your rule. But try to avoid this.