Hi, can anyone tell me why Bootstrap only underlines links when hovered over?

We’re migrating to a Bootstrap based Web UI and all our old hyperlinks used to be underlined, but now they’re not.

A quick search about why is fruitless, is it because underlined hyperlinks aren’t mobile / accessibility friendly? Any direction much appreciated as we have a rough policy to not move away from Bootstrap standards but user feedback is that Links aren’t as obvious as they’d like.

Thanks

I’d imagine just down to underling links becoming less of a standard these days with there being more elegant ways of doing it.

Bootstrap is only a starting framework, most users customising it to a varying degrees, 3 lines of css would sort it for you.

It’s definitely not a ‘standard.’ As james said, it’s a starting point.

Just make sure when you add back in the underlining, it doesn’t have an unexpected effect elsewhere. Anchor tags are used all over the place in bootstrap for buttons, dropdown menus, accordians etc.

Probably easiest just create an ‘underlined’ class so you can be specific about which ‘links’ you want underlining.

add this CSS:

a {text-decoration: underline;}

See if anything changes

Bootstrap has it explicitly set to none by default. Removing that (just looked) will underline loads of stuff that shouldn’t be underlined. An additional class is the way forward.

Technicallyinept makes a good point. It would usually be very easy, but if it applies them to loads of other stuff, it could be a bit of a ball-ache changing it. Have a check where the hover state is set, because that should be setting the same elements you want to change.

There could be something in the custom configuration options when you download it too. Might be worth trying.

As above though. Bootstrap is what it is. It’s there to make life a little easier, and it’s designed to be changed. It’s not a de-facto standard.