Skip to main content
J
jaydax1
New Participant
September 30, 2023
Answered

Why won't my Bootstrap button link work in browsers?

  • September 30, 2023
  • 1 reply
  • 1435 views

I'm trying to add a button link to my page at http://iwadasn.info The page uses bootstrap. The link is 
<a href="stories.html" class="btn btn-primary">Read More</a>

The same link is used on other pages such as stories.html and works fine but for some reason doesn't work on the index.html page. Anyone got any ideas? Yes - I have uploaded the bootstrap-4.4.1.css file to my css folder and called it in the page header with <link href="css/bootstrap-4.4.1.css" rel="stylesheet">

I'm using Dreamweaver 21.3 build 15593

    This topic has been closed for replies.
    Correct answer osgood_
    quote

    That doesn't seem to be the answer but since it was a good idea, I adopted it


    By @jaydax1

     

    Then think again, it most certainly was the issue and a very common issue it is, for newbies to web development. I've seen it a zillion times before. l tested your page locally so nothing to do with your files not being uploaded to your server.

     

    Actually it's not a very good idea, it's more of a hack, which you should not need to use assuming the construction of the page has been built properly.

    1 reply

    O
    osgood_
    Brainiac
    September 30, 2023

    Its because:

    <div class="img"></div>

    has been positioned over the top of all the other content on the page. That's what happens when you use position: absolute; The element gets taken out of the natural html flow and creates havoc UNLESS you know what you are doing. On this ocassion its blocking access to any user related content like links.

     

    A quick fix would be to to add the inline css style below to your button as shown in bold text:

     

    <a href="https://iwadasn.info/stories.html" class="btn btn-primary" style="position: relative; z-index:100;">Read More</a>

     

    This will force it above the <div class="img"></div> container and it then becomes clickable.

     

    Unfortuantely the same problem is happening with your copyright link.

     

    Can you not attach background image to another container like:

    <div class="jumbotronb jumbotron-fluid text-center">

     

    ALSO it seems you are editing the default bootstrap.css file. YOU SHOULD NEVER DO THAT - guaranteed problems will arise. If you require to alter the default Bootstrap css properties or even add your own css then do that in a seperate css style sheet and link it to the page AFTER the link to the default bootstrap.css file.

    J
    jaydax1Author
    New Participant
    September 30, 2023

    That doesn't seem to be the answer but since it was a good idea, I adopted it. Investigating further I found that changes I made to the page were not being uploaded to the server, despite Dreamweaver asking me if dependant files should be uploaded. To fix it I found that deleting the server index.html file then uploading the client-side file did the trick.

    Seems this may be a bug in Dreamweaver or perhaps there's a setting I may not be aware of in my copy.

    O
    osgood_Correct answer
    Brainiac
    September 30, 2023
    quote

    That doesn't seem to be the answer but since it was a good idea, I adopted it


    By @jaydax1

     

    Then think again, it most certainly was the issue and a very common issue it is, for newbies to web development. I've seen it a zillion times before. l tested your page locally so nothing to do with your files not being uploaded to your server.

     

    Actually it's not a very good idea, it's more of a hack, which you should not need to use assuming the construction of the page has been built properly.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices