locked
bootstrap is not opening a image file in a fluidgrid RRS feed

  • Question

  • User-605499000 posted

    I build a fluid grid using bootstrap and that works fine. I need to click the image and it takes me to a default page.  Below is the code and I have put * on the line that is not opening.  

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Jen19._Default" %>


    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    </asp:Content>

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
    <div class="container" style="height: 42vh; background: url(Images/Cloudnewheader.png) no-repeat center center; margin-bottom: 20px">

    </div>
    <div class="container" id="mags">
    <div class="row">
    <section class="col">
    <img class=img-fluid src="Images/MissBumples.png" alt="Miss Bumples">

    </section>

    <section class="col">
    <div id="BalloonEnjoy">
    <img class=img-fluid src="Images/BalloonEnjoy.png"alt="Enjoy bumples">
    <a class="noDecoration" title="Enjoy Sample Issue!!" href="Issues/Default.aspx?Issue=10"></a> ***(when I touch the image this does not open)
    <span class="hidden">Enjoy Sample issue!!!</span>
    </div>
    </section>

    <section class="col">
    <img class=img-fluid src="Images/BalloonEnjoyBuds.png"alt="Enjoy Buds">
    <a class="noDecoration" title="Enjoy Sample Buds Issue!!" href="Issues/Default.aspx?Issue=20"></a></a> ***(when I touch the image this does not open)
    <span class="hidden">Enjoy Sample issue!!!</span>
    </section>

    <section class="col">
    <img class=img-fluid src="Images/construction.png"alt="Miss Bumples">
    </section>
    </div>
    </div>
    <div class="container" id="bumples">
    <div class="row">
    <section class="col">
    <img class=img-fluid src="Images/CloudBeaFriend.png" alt="Miss Bumples">

    </section>
    <section class="col">

    <img class=img-fluid src="Images/CloudBeaStory.png"alt="Miss Bumples">
    </section>

    <section class="col">
    <img class=img-fluid src="Images/CloudBecomeaBumple.png"alt="Miss Bumples">
    </section>


    </div>
    </div>








    </asp:Content>

    Thanks,

    Jen

    Tuesday, July 30, 2019 12:41 AM

Answers

  • User-605499000 posted

    It works beautifully. I can't thank you enough. I knew I was close but couldn't get.  I took courses in bootstrap but nothing lead me to your answer.

    Again, thanks so much.  The asp.net forums are great and appreciated.

    Jen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 30, 2019 2:54 PM

All replies

  • User288213138 posted

    Hi bumples18,

    If you want to click the image and it link to a default page, you should put the <img> tag inside the <a> tag.

    <img class=img-fluid src="Images/BalloonEnjoyBuds.png"alt="Enjoy Buds">
    <a class="noDecoration" title="Enjoy Sample Buds Issue!!" href="Issues/Default.aspx?Issue=20"></a></a>

    The code:

    <section class="col">
                    <div id="BalloonEnjoy">                   
                        <a class="noDecoration" title="Enjoy Sample Issue!!" href="Issues/Default.aspx?Issue=10"><img class="img-fluid" src="Images/BalloonEnjoy.png" alt="Enjoy bumples"></a>
                        <span class="hidden">Enjoy Sample issue!!!</span>
                    </div>
                </section>

    Best regards,

    Sam

    Tuesday, July 30, 2019 2:40 AM
  • User-605499000 posted

    It works beautifully. I can't thank you enough. I knew I was close but couldn't get.  I took courses in bootstrap but nothing lead me to your answer.

    Again, thanks so much.  The asp.net forums are great and appreciated.

    Jen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 30, 2019 2:54 PM