pangpang pangpang - 5 months ago 194
CSS Question

How to remove a list item border in bootstrap list group?

I just want to remove the first list-group-item top border:

<ul class="list-group">
<li class="list-group-item borderless">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>

.borderless li {
border-top: none;
}


but doesn't work, Anybody can help me, Thanks in advance!

Answer

Problem:

The current code you are trying is a descendant selector and will only work when li is the child of .borderless like below:

<div class="borderless">
  <li></li>

Solution:

Try the below multiple class selector which selects the list items which has a class borderless.

li.borderless { border-top: 0 none; }

Output:

li.borderless {
  border-top: 0 none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="list-group">
  <li class="list-group-item borderless">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Comments