CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Carpetfizz
Carpetfizz

Reputation: 9189

Linking within a page with Bootstrap

I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:

<a name="about">
    <div class="container">
        <div class="starter-template">
            <h1>About.</h1>
                <p class="lead">#about</p>
        </div>
    </div>
</a>

Thank you for any help!

~Carpetfizz

Upvotes: 3

Views: 41769

Answers (1)

Marc
Marc

Reputation: 11633

The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:

<h1 id="about">Here's the About Content</h1>

Clicking the link will jump to that spot in the page.

Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:

http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also

However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:

<a href="http://www.yahoo.com">Yahoo</a>

Or target any other link in your site.

They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.

Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.

This behavior is built into HTML; it's not something unique to using Bootstrap.

Upvotes: 10

Related Questions