How to remove margins in Bootstrap lists in Wordpress?

Question

How to remove margins in Bootstrap lists in Wordpress?

I'm making a Wordpress template using the Bootstrap 3 Framework.X, adapting it to WP lists li shows them to me with margins, plus it also hurts the way categories are displayed in each article.

I show you some catches so you can see how it's looking:

Is there a way to remove those margins from the lists so they look right?

5

Author: César, 2015-12-27

Source

1 answers

score 2 · Answer 1

One solution with Bootstrap would be to make use of the pair of classes that make lists have no styles or margins:

list-unstyled: removes the style from the list (list-style) and the margin from the elements. It's important to know that this style only applies to direct children; if you have a sublist, you'll need to add the Class list-unstyled for that as well.
list-inline: removes the style from the list (list-style) and the elements, though it adds a bit of padding . As the class name indicates, it converts the list to inline and is very useful for horizontal lists such as in menus or article categories.

And if you want them to still have list style (the hyphen or icon that appears next to each element), you can define their own class with the property list-style and add it in combination with those already mentioned.

Other bootstrap independent solution would be to define your own styles with a margin and left padding of zero for the list (ul and / or ol) and the list items (li):

ul, li {
    padding-left:0;
    margin-left:0;
}

You can be more specific if you want and put only the lists that interest you (indicating classes or identifiers). If that doesn't work, it may be because some bootstrap style (or other file) takes precedence over the style and you can use the !important modifier to give it priority to your styles:

ul, li {
    padding-left:0 !important;
    margin-left:0 !important;
}