Relative Content

Tag Archive for cssbootstrap-5

How to customize bootstrap vertical pills for different active colors, mouse hovering, etc?

I want to make a vertical list of tabs for a guide I am working on – which uses bootstrap I believe (sorry, I know next to nothing about coding) and I want to make it so the background color is green and the text is white when you hover over the “pill” with your cursor, but for it to have a white background and green text when not active or you are hovering over it. How would I go about this?

no gutter space for a particular div

refer the divs with text “why no gutter space for this?”. why is there no gutter space between these two particular divs inside a row? I’ve tried adding gx-2 to the parent row but its still not adding space between those 2 columns.

footer doesn’t stick to the bottom when there isn’t enough content

<div class=”container text-secondary bg-dark”> <footer class=”sticky-bottom”> <div class=”col-md-4 d-flex align-items-center”> <a href=”/” class=”mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1″> <svg class=”bi” width=”30″ height=”24″><use xlink:href=”#bootstrap”></use></svg> </a> <span class=”mb-3 mb-md-0 “>2024</span> </div> <ul class=”nav col-md-4 justify-content-end list-unstyled d-flex”> <li class=”ms-3″><a class=”text-body-secondary” href=”#”><svg class=”bi” width=”24″ height=”24″><use xlink:href=”#twitter”></use></svg></a></li> <li class=”ms-3″><a class=”text-body-secondary” href=”#”><svg class=”bi” width=”24″ height=”24″><use xlink:href=”#instagram”></use></svg></a></li> <li class=”ms-3″><a class=”text-body-secondary” href=”#”><svg […]

Bootstrap – Can’t overwrite class values

I am trying to overwrite color values in the navigation bar and just can’t get it to work. I must be doing something wrong. I defined the classes active and inactive to change colors in the navigation.