Unable to hyperlink in a div containing the my-auto class in Bootstrap

I am facing an issue with my carousel layout. I have 3 columns, and one column is reserved for Prev & Next carousel controls. These controls are vertically aligned using the my-auto class. However, after adding this class to the column, the links within it stop working. I tried using overflow:auto on the column div, but it didn't solve the problem. Any suggestions or advice on how to fix this? I am using Bootstrap 4.4.

For reference, here is a quick JS-fiddle example of what I have currently set up. Any help would be greatly appreciated!

<div id="carouselOfferings" class="carousel slide" data-ride="carousel" data-interval="3000">
    <div class="container">
        <ol class="carousel-indicators">
            <li data-target="#carouselOfferings" data-slide-to="0" class="active"></li>
            <li data-target="#carouselOfferings" data-slide-to="1"></li>
        </ol>
    </div>
    <div class="container-fluid carousel-inner">
        <div class="carousel-item active">
            <div class="row">
                <div class="offset-lg-1 col-lg-5 carousel-offerings-txt">
                    <h2>Heading 1</h2>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
                <div class="offset-lg-1 col-lg-1 align-self-center" >
                    <a href="#carouselOfferings" class="left carousel-control small-uppercase-txt" data-slide="prev">prev</a>
                    <a href="#carouselOfferings" class="right carousel-control small-uppercase-txt " data-slide="next">next</a>
                </div>
                <div class="col-lg-4 col-img-full-div">
                    <img src="https://c402277.ssl.cf1.rackcdn.com/photos/2325/images/hero_small/mountains-hero.jpg?1345838509">
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="offset-lg-1 col-lg-5 carousel-offerings-txt">
                    <h2>Heading 2</h2>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    </p>
                </div>
                <div class="offset-lg-1 col-lg-1 align-self-center" >
                    <a href="#carouselOfferings" class="left carousel-control small-uppercase-txt" data-slide="prev">prev</a>
                    <a href="#carouselOfferings" class="right carousel-control small-uppercase-txt " data-slide="next">next</a>
                </div>
                <div class="col-lg-4 col-img-full-div">
                    <img src="https://c402277.ssl.cf1.rackcdn.com/photos/2325/images/hero_small/mountains-hero.jpg?1345838509">
                </div>
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4carousel

Answer №1

To ensure proper functionality, you need to change the .carousel-indicator's CSS property from position:absolute to relative.

If left unchanged and combined with your current styling, it will cover the entire carousel, preventing any pointer interactions:

https://i.sstatic.net/PMwEa.png

Another approach (if you wish to maintain the position setting) is to assign display: inline-flex to contain it within its indicators.

It's important to note that overriding default Bootstrap styles in this way can lead to issues if you plan to use another Bootstrap carousel elsewhere on your site. It is advisable to create a custom class or ID for targeted customization instead of directly modifying Bootstrap classes.

Even if you think "I only have one carousel on my site," restricting yourself in this manner may cause problems in the future if you decide to add another carousel or make updates to the existing one.

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

Expanding and collapsing UI elements within an ngRepeat loop in AngularJS

I have been attempting to incorporate collapsible panels within an ngRepeat loop. Below is the code I have been using: <div class="panel panel-default" ng-repeat="element in elements"> <div class="panel-heading"> ...

javascriptangularjstwitter-bootstrap

Lightbox Thumbnail feature in Wordpress theme

Looking for some help with customizing code in my WordPress theme. The current setup includes a thumbnail image with two icons on top - one is a lightbox gallery icon that I want to focus on, and the other is a like button. My goal is to remove the lightb ...

phphtmlcsswordpresslightbox

Converting Markdown files to HTML with the help of marked.js

While working on my project, I encountered the need to render a markdown file (.md) within a <body> component of an HTML page. After some research, I discovered marked.js. The documentation outlines a method for achieving this: marked.parse('# ...

javascripthtmlmarkdown

When you hover over a dropdown menu, the content underneath it is raised slightly and a margin is formed on the right side of the page

I am facing some technical difficulties with my photography website, specifically on the "Contact" and "Bio" pages. The issue arises when the screen is resized, causing layout changes. When hovering over the "Albums" menu tab and the drop-down menu appears ...

htmlcssdrop-down-menu

Generating a unique JavaScript array by extracting data from an HTML input element

I am working on a basic HTML form that requests a number between 1 and 10 from the user. Depending on this number, I aim to generate a new array. Currently, the code displays an alert box with the newly created array, but my end goal is to have a table p ...

javascripthtmlarraysfunction

Ways to modify the color of a particular list item

I am looking to change the color of only the items in a list that contain a number to blue. Specifically, I want to target the first list (the ol li) that starts with a number in it. ol li { color: blue; } <ol> <li>League 1<br> ...

htmlcss

Tips for implementing a hover transition effect in the navigation menu

I have a specific query regarding a particular issue that I am unsure how to address but would like to implement on my website. 1) My requirement is that when the parent li element has a child, I want the navigation to remain in a hovered state with the s ...

htmlcssdrop-down-menunavigationcss-transitions

Flexible layout design for mobile devices

Check out how my desktop page looks: Desktop version If you want to see how it should appear on mobile, click here: Mobile Version This is the HTML/CSS code for the desktop version, and everything seems to be working fine. .skills { width: 80%; ba ...

htmlcss

Set up dynamic restrictions for the length of an HTML paragraph with PHP

I am attempting to dynamically set the limit of content retrieved from a database in PHP. Specifically, I need to trim the input from the database before assigning it to an HTML paragraph. I attempted to use the substr function but was unsuccessful. Can y ...

phphtml

What is the best way to ensure an image fits perfectly within a div container

I'm attempting to design a straightforward card layout where the image spans the entire width of the container div. My vision is for it to resemble something like the example in the linked image below. https://i.sstatic.net/X5oJD.png I experiment ...

htmlcss

Padding with Bootstrap 4 for smaller screens

Using Bootstrap 4 for my website, I have a navbar that includes signup and login buttons. To create some space between the buttons, I added padding which looks great on larger screens but on smaller screens, the padding seems to disappear as shown in the i ...

twitter-bootstrapbootstrap-4

I am encountering difficulties in accessing my component's property within the corresponding template while working with Angular 5

When I call an HTTP POST method to retrieve table names from the backend, I attempt to display them in the template using ngFor. However, the table names are not appearing on the screen. The tNames property is inaccessible in the template. As a beginner i ...

htmlangulartypescript

Creating a custom variable assignment in Bootstrap within the custom.scss file

I've been searching for a solution to this problem for half a day now. My goal is to change the value of the $primary variable from the default $blue to the $orange variable. I tried following the instructions in the documentation: $primary: red; @imp ...

csssassbootstrap-5

Issue with Bootstrap z-index preventing element from being clickable. In search of a solution to properly layer elements behind one another

Encountering an issue with the accordion on my website - only the first item opens. The culprit is not the data-target. If I disable CSS in my code, everything works fine... Upon further investigation, I discovered that the problem lies with the Z-INDEX p ...

cssbootstrap-4accordionz-indexbootstrap-accordion

transforming unicode into regular characters prior to being presented on a webpage

I am currently utilizing the openinviter class to import contacts from emails. Sadly, it is showing Unicodes of non-English characters, like Polish, such as u0117 (and similar code types), instead of regular characters. Is there a way to convert these Unic ...

phphtmlunicode

Whenever I hit the refresh button, `$locationprovider.html5mode` seems to deactivate my CSS styling

Things go smoothly as long as I remove $locationprovider.html5mode(true). However, enabling html5mode seems to be causing some troubles. The main issue is that the css styles stop working after page refreshes. Any ideas on what could be causing this and ...

javascriptcssangularjsangular-ui-router

Can you use logical AND in Selenium XPath to combine multiple contains() filters?

My objective is to identify a specific element using Selenium: <a class="ABC" href="#" data-test-id="XXX|YYY|ZZZ"> There are various elements on the page with attributes matching "ABC", "XXX", " ...

pythonhtmlxmlseleniumxpath

creating a multi-page form using HTML and JavaScript

I need help creating a multi-page form with a unique tab display. The first page should not have a tab-pill, while the following pages should display tabs without including the first page tab. Users can navigate to the first page using only the previous b ...

javascripthtmljquerycsstwitter-bootstrap

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

cssreactjsmaterial-ui

The :not() selector in CSS3 seems to be ineffective on sibling elements

In my simple design, I have specified that text should appear in red unless it is within a footer element. This style is applied successfully to p tags, a tags, and others. However, for some reason, the styling does not work when I target the footer tag. ...

htmlcsscss-selectors