I am having an issue with the <a> element in my bootstrap carousel, as it is displaying a dead link

My carousel has an issue with the anchor tag, causing it to show a dead link. I am unable to hover over it and the link is not functioning when clicked. Everything else seems to be working fine in the div. All files from Bootstrap have been used and no changes have been made to the scripts.

HTML:

<div class="carousel-inner">
    <div class="item active">
        <div class="fill" style="background-image:url('images/slide1.jpg'); background-size:cover;"></div>
        <div class="carousel-caption">
        <h1>Caption 1</h1>
        <p></p>
        <a href="#" class="read">Read More &raquo;</a>
        <br/>
        <div class="tech">
            <img src="images/tech.png" />
        </div>
    </div>
</div>
<div class="item">
    <div class="fill" style="background-image:url('images/slide2.jpg'); background-size:cover;"></div>
    <div class="carousel-caption">
        <h1>Caption 2</h1>
        <p></p>
    </div>
</div>
<div class="item">
    <div class="fill" style="background-image:url('images/slide3.jpg'); background-size:cover;"></div>
        <div class="carousel-caption">
            <h1>Caption 3</h1>
        </div>
    </div>
</div>

Answer №1

When commenting on patel.milanb's answer, the author provides a live example of the problem at hand:

The main issue: The carousel indicators within the <ol> are overlapping with a link, making it unclickable.

To resolve this, simply remove the line bottom: 10px; from the .carousel-indicators CSS rule.

CSS Code:

.carousel-indicators {
    position: absolute;
    /*bottom: 10px; <- remove this*/
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;
}

Answer №2

Based on my interpretation of your query.

The link seems to not be functioning properly within the DIV element.

It appears that you have not included a URL in your <a> tag

<a href="#" class="read">

Please replace it with:

<a href="http://www.google.com/" class="read">

Additionally, make sure to remove any conflicting styles from your CSS file.

.carousel-indicators {
   top: 180px;
}

Check bootstrap.css line no: 6590

You can also remove bottom: 10px; from the .carousel-indicators class on Line no: 6523

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best approach to execute the jquery script exclusively on mobile devices?

I want to modify this code so that it only functions on mobile devices and is disabled on computers. How can I achieve this? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul id="pri ...

Tips for hiding one sub-navigation menu when hovering over another sub-navigation menu

Setting up the main navigation menu: <ul class="menu12"> <li><a href="/">Home</a></li> <li><a href="/">About</a> <ul> <li><a href="/">History</a></li> <li ...

Exploring Django Crispy Forms and How They Handle Static Files

I have integrated Django Crispy Forms with Twitter-bootstrap by installing crispy forms as per the instructions on this link. However, I am struggling to locate the uni-form files that need to be included in my HTML code. Can anyone provide guidance on ho ...

Issues persisting with vertical alignment in table cells on Firefox browser

I've successfully managed to vertically center the contents of .onesizechart in Chrome and Safari, but I'm facing issues with Firefox and IE. Interestingly, the contents of .homepage-sizechart are displaying correctly, leading me to believe that ...

Creating a sidebar navigation in HTML and CSS to easily navigate to specific sections on a webpage

Here's a visual representation of my question I'm interested in creating a feature where scrolling will display dots indicating the current position on the page, allowing users to click on them to navigate to specific sections. How can I achieve ...

Vue 3 has officially deprecated the use of ::v-deep as a combinator. Going forward, please utilize ::v-deep(<inner-selector>) instead

Recently, an error message has been popping up in Vue 3 regarding the use of ::v-deep. The warning states that using ::v-deep as a combinator is deprecated. Instead, it recommends using ::v-deep(<inner-selector>) Here is an example of the CSS ...

The CSS within the WebComponent nesting is not valid

Upon testing, I have found that writing CSS directly using nesting is effective. However, when used within a WebComponent and nested with the :host selector, it becomes invalid. Below is a demo code snippet showcasing this issue. My Chrome version number i ...

having trouble with changing the button's background color via toggle

I've been experimenting with toggling the background color of a button, similar to how changing the margin works. For some reason, the margin toggles correctly but the button's color doesn't. <script> let myBtn = document.querySele ...

Step-by-step guide on replicating a website along with its CSS styles and scripts

I've been exploring the idea of cloning a webpage, such as Instagram's login page, along with its CSS elements and JavaScript, to use locally. Basically, I want to duplicate the login page and host it on my test server in a way that allows it to ...

Adjust the width of an item on CSS Grid upon hovering

I recently created a basic CSS grid layout with the following structure... .container { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; } .col1 { padding:20px; background:red; color:white; text-align:center; } .col2 { padding:20px; ...

Creating a navigation bar that smoothly slides into view from the top

In my Angular app (version 2+), the current code I have is: .header { background: rgba(white, 0); &.fixed-top { background: rgba(white, 1); border-bottom: solid whitesmoke 1px; position: fixed; top: 0; right: 0; left: 0; ...

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...

Adjusting the height of a table cell in HTML: td without making it

Here's the issue I'm facing: I have an HTML <table> with a fixed height of 100px and no border. Inside this table, there is one row (with a 100% height) containing 5 td elements (each also with a height of 100%). Within each td, there is a ...

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

Mouse over condensed text to show more information without impacting nearby elements

I have implemented a text-overflow: ellipsis on an element, and then added a hover effect to expand the text. How can I prevent this expanded text from affecting other elements above or below it? Here's how I've set the text: .box h3 { overfl ...

The process of adding a tooltip icon to a Select component in Material-UI

I'm currently working with the material UI tooltip component and I want to position my tooltip to the right of a dropdown, right next to the down arrow as shown in the image below: https://i.stack.imgur.com/O2gwh.png However, the way it is set up no ...

What could be the reason for the misalignment between md-menu and md-button when ng-href is included in the button?

Check out the demo by clicking here: http://codepen.io/audiodude/pen/vLyNvw The main distinction between the top and bottom sections lies in the fact that the top section utilizes an md-button with an ng-href attribute, which Angular Material compiles int ...

Steps for adding an overlaying image in HTML and SCSS

First step: background-size: cover; Second step: background-size: contain; background-repeat: no-repeat; The third step is what I need: the first background image to be set as cover and the second one as an overlay with no-repeat Currently, my HTML incl ...

Issue with AdminLite 2.4.0 data table functionality malfunctioning

Check out this template that I'm using. I've copied all the contents for the bower_components and dist folders, and made sure to link and require everything properly. There are no 404 errors, only status code 200. Here is a snippet of my code: ...

How can I make a div or iframe stretch to fill the remaining space using javascript, jQuery, or css?

I'm looking for a way to make the middle iframe dynamically fill the remaining space between two fixed height iframes (one at the top and one at the bottom) regardless of the window screen size. Is there a technique or method that can achieve this? th ...