Html Question posted in
Some basic documentation can be found here.

Html – How to make bootstrap list groups highlight color uniform

I’m working on a website that uses Bootstrap’s horizontal list groups. Everything works great, but when I hover over a particular list group, the highlighting effect is not also changing the background color of the text elements, which creates odd looking white boxes. How can I make the background color of those elements also change to the highlight color so the entire list group appears uniform?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<ul class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0" aria-current="true">
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
  </a>
</ul>

<ul class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0" aria-current="true">
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
  </a>
</ul>

<ul class="list-group list-group-horizontal">
  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3 border-0" aria-current="true">
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
    <li class="list-group-item border-0">Some text</li>
  </a>
</ul>

I’ve tried various different css styles, but I’m not good at css so I’m sure I’m not doing it correctly.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is the correct code for anyone that finds this looking for the answer.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
  <div class="d-flex gap-2 w-100 justify-content-between">
    <div class="col">
      Some text
    </div>
    <div class="col">
      Some text
    </div>
    <div class="col">
      Some text
    </div>
    <div class="col">
      Some text
    </div>
  </div>
</a>

<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
  <div class="d-flex gap-2 w-100 justify-content-between">
    <div class="col">
      Some text
    </div>
    <div class="col">
      Some text
    </div>
    <div class="col">
      Some text
    </div>
    <div class="col">
      Some text
    </div>
  </div>
</a>

  2. 0

    If you use google chrome, you can right click and inspect elements which is really helpful in cases like this as you can see the elements you need to target.

    You need to simply add a hover effect onto the list items, aka "list-group-item border-0" and set the background to the same grey colour.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search