How i can underline the current page inside my bootstrap

Question

I have the following bootstrap code which define our main menu navigation :-

<div class="col-xl-9 col-lg-9">
                                <div class="main-menu  d-none d-lg-block">
                                    <nav>
                                        <ul id="navigation">
                                            <li><a href="/">home</a></li>
                                            <li><a href="/home/FAQ">FAQ</a></li>
                                            <li><a href="/home/contact/">Contact</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>

but i need to make the current page underline using bootstrap if possible?

score 1 · Answer 1 · answered Jun 18 '20 at 14:18

1

Put a class in the one that is active and in css give the underline to the class Like this:

<li class="active"><a href="/">home</a></li>

css:

.active{
    border-bottom: xxxx;
    border-color:xxxx;
    border-style:xxx;
    }

answered Jun 18 '20 at 14:18

João Garrido

69
3
8

But how i can know the active one? – John John Jun 18 '20 at 14:26
Are you using php? – João Garrido Jun 18 '20 at 14:29
okay so i think this link explains it https://stackoverflow.com/questions/20410623/how-to-add-active-class-to-html-actionlink-in-asp-net-mvc – João Garrido Jun 18 '20 at 14:44

score 0 · Answer 2 · answered Jun 18 '20 at 14:19

0

You need some JavaScript for this. Basically, you need to add a class dynamically, e.g. active to your active <li> element and then add some styles to this class. Check this article for further details.

answered Jun 18 '20 at 14:19

jphawk

70
2
2
11

How i can underline the current page inside my bootstrap

2 Answers2