skip to Main Content

I am using Twitter Bootstrap for a project.

I have a widget type list-group, which is a list of elements that are used for navigation.

For some reason I can’t make those links to work. Although the correct link appears when hovering, they don’t take me there.

I created a fiddle to ilustrate the problem.

Can anyone help?

Regards.

4

Answers


  1. Never put http protocols in the href for many reasons, one of which the protocol might be the wrong one ! (http vs https).

    As for the internal link it is working properly in the JSfiddle once you actually create an element with that id.

    Plus the list group should be in a LIST not a bunch of divs

    Login or Signup to reply.
  2. Have a look at Bootstrap’s documentation for list-group. When I put your links into a UL, things seem to work:

    <ul class="list-group">
       <li><a 
          href="http://www.google.com" 
          class="list-group-item active"
          >External link not working</a></li>
          <li><a 
          href="#my_local_anchor" 
          class="list-group-item active">
          Internal link not working
       </a> </li>  
    </ul>
    
    Login or Signup to reply.
  3. When you specify http in the link it will not work in an https site.

    Mixed content error

    Login or Signup to reply.
  4. I checked the internal link and it worked when yo use your anchor as an ID

    <h1 id="my_local_anchor">

    And the external link worked when I added:

    <a href="https://www.google.com" target="_blank">

    Which opens the link in a new tab which is usually better as your website will keep a presence in the users browser

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search