New feature in Bootstrap 4 beta allows carousel arrows to be positioned outside of the

I created a text-based carousel using Bootstrap 4 beta. Is it possible to move the arrows off of the slider area and position them outside of it? I have tried searching on Google and in other forums, but I couldn't find a solution. The issue is that since the carousel contains only text, the carousel control arrows end up overlapping some parts of the text.

Here is the complete code that I have used: https://codepen.io/mlegg10/pen/wrLJVN 

.carousel {
  margin: 1.5rem;
}
.carousel-inner {
  height: auto;
}

.carousel-control.left {
  margin-left: -25px;
}

.carousel-control.right {
  margin-right: -25px;
}
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item col-md-6 active">
                
<blockquote class="blockquote">
<p>Attendees Rated The Program An Overwhelming Success. Your Tools, Techniques And Thought Provoking Ideas On Leadership, Communication Skills And Attitude Left Folks Wanting More.</p>
<footer class="blockquote-footer"><cite>Vickie Doyle, Vice President, Membership<br>
Tucson Convention & Visitors Bureau</cite></footer>
</blockquote>          
</div>
  
     
<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires.</p>
<footer class="blockquote-footer"><cite>Dominic R. Palmiers, CEO<br>
Odyssey Foods, LLC</cite></footer>
</blockquote>       
</div>
            
...remaining code...

</div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
            
<span class="sr-only">Previous</span>
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
            
<span class="sr-only">Next</span>
</a>
    
</div>
</div>
<div class="clearfix"></div>

htmlcsstwitter-bootstrapcarouselbootstrap-4

Answer №1

your class naming is incorrect :

.carousel-control.left {
  margin-left: -25px;
}

.carousel-control.right {
  margin-right: -25px;
}

should be renamed with increased margin :

.carousel-control-prev {
  margin-left: -100px;
}

.carousel-control-next {
  margin-right: -100px;
}

here is a demonstration of the corrected code: 

.carousel {
  margin: 1.5rem;
}
.carousel-inner {
  height: auto;
}

.carousel-control-prev {
  margin-left: -100px;
}

.carousel-control-next {
  margin-right: -100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item col-md-6 active">
                
<blockquote class="blockquote">
<p>Attendees Rated The Program An Overwhelming Success. Your Tools, Techniques And Thought Provoking Ideas On Leadership, Communication Skills And Attitude Left Folks Wanting More.</p>
<footer class="blockquote-footer"><cite>Vickie Doyle, Vice President, Membership<br>
Tucson Convention & Visitors Bureau</cite></footer>
</blockquote>          
</div>
  
     
<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires.</p>
<footer class="blockquote-footer"><cite>Dominic R. Palmiers, CEO<br>
Odyssey Foods, LLC</cite></footer>
</blockquote>       
</div>
            


...
... (continued content)
...
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Peter Scott's Programs Are All About Content & Core Values.</p>
<footer class="blockquote-footer"><cite>Dr. Thomas Dullien, Executive Director Human Resources & HR Development<br>
Barona Resort & Casino</cite></footer>
</blockquote>        
</div>
       
 
</div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
            
<span class="sr-only">Previous</span>
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
            
<span class="sr-only">Next</span>
</a>
    
</div>
</div>
<div class="clearfix"></div>

Answer №2

I wanted to verify G-Cyr's solution, but noticed a problem that led me to propose an alternative solution.

Issue Using margin values to adjust the position of an element may cause it to move away from its original position, potentially making it invisible. This occurs when the carousel arrows are pushed outwards and the viewport is not favorable. Refer to the images below for clarification:

Here, the arrows are visible due to a favorable viewport.

https://i.sstatic.net/8TQvn.png

However, in this scenario where the viewport does not change to the next breakpoint, the carousel arrows become invisible as they move further away from their original position. https://i.sstatic.net/lDefJ.png

Solution: To address this issue, I suggest utilizing the flex classes offered by Bootstrap. Firstly, set the absolute position of the arrows as shown in the CSS below. Then rearrange the HTML elements to prioritize carousel-control-prev, carousel-inner, and carousel-control-next. Additionally, apply the appropriate Flex classes to the carousel container as demonstrated by the classes "d-flex justify-content-around align-items-center" in my example. To ensure the arrows are clickable throughout the height of the slider, assign them the "align-self-stretch" class. Here is a sample implementation:

CSS

.carousel-control-prev, .carousel-control-next {
    position: inherit;
}

HTML

<div id="word-carousel" class="carousel slide d-flex justify-content-around align-items-center" data-ride="carousel" data-interval="false">
    <a class="carousel-control-prev align-self-stretch" href="#word-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="Second slide">
        </div>      
    </div>
    <a class="carousel-control-next align-self-stretch" href="#word-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Notes: Remember to adjust the color of the arrows if needed, as they are initially white. In my example, I opted for a clean look by omitting the fill of the Carousel items. Any suggestions for enhancement are welcome.

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

Troubleshooting common issues with PHP's simple HTML DOM parser

I've encountered an issue while working on a scraper for a website that involves crawling through links. The error message I'm receiving is as follows: PHP Fatal error: Uncaught Error: Call to a member function find() on null in D:\Projekti ...

phphtml

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...

htmlcsstailwind-css

Issue with the visibility of nested dropdown list on the website

I am encountering an issue with a web page I am working on. On the menu bar, there is a button that triggers a dropdown list of components. These components have submenu items as well. Unfortunately, I am struggling to properly display this structure. I ne ...

htmlcssbootstrap-4bootstrap-5

Steps to alter background image and adjust its height upon function activation

I am working on a search page with an advanced search option that only certain users can access. I need the height of my div to increase accordingly and also change the background image to a larger size when the advanced search is selected. How can I make ...

htmlcssangularjs

Guide to making a toggle button with a Light/Dark mode functionality

I have implemented a light/dark toggle button and now I want to integrate the functionality for switching between light and dark themes on my webpage. The switch should toggle the theme between dark and light modes when clicked. Some basic styling has been ...

javascripthtmlcsstogglebutton

Utilizing ElementRef in Angular 4 to close dropdown when clicking outside of it

I recently came across this helpful tutorial, but I'm having trouble grasping how it actually functions. Here's the code snippet I've incorporated into my TypeScript file: @Component({ host: { '(document:click)': 'onOuts ...

javascripthtmlangulardropdown

CSS styling not rendering consistently across various web browsers

Hey everyone! I've encountered an issue with my webpage. Feel free to check out the code on my CodePen here. When I view this page on Safari, everything looks perfect. However, when I switch over to Chrome or Firefox, the layout is all messed up. Ele ...

htmlcsscross-browser

Using jQuery for slide shows in Ruby on Rails framework

I'm attempting to create a slideshow using jQuery and have the images stored in an array. However, I'm struggling with the implementation of the slideshow functionality. I've checked out 'http://jquery.malsup.com/cycle/' for guidan ...

jquerycssruby-on-railsajax

What is the best way to center a SVG and a span vertically within an inline unordered list?

My <ul> element contains 2 <li> items with styling using display: inline-block. Unfortunately, the SVG and text inside each <li> are not vertically aligned. I attempted to use vertically-align: middle since they're both inline-block ...

htmlcsssvghtml-lists

Customizing media queries, Overriding styles from parent elements

Currently tackling a responsive website design challenge where I'm dealing with conflicting styles in media queries and parent css. Here's the CSS from the parent style sheet: .sec1 p { text-align: left; width: 55%; margin-left: 8%; float:lef ...

htmlcssresponsive-designmedia-queriesstylesheet

Issue with CSS pseudo-elements :before and :after in Internet Explorer

I am attempting to create a heading with lines on both sides, but I am facing an issue where it only seems to work on the left side in IE. Check out the code here h2 { position: relative; overflow: hidden; text-align: center; } h2:before, h2:afte ...

htmlcssinternet-explorer

Include chosen select option in Jquery form submission

Facing some challenges with a section of my code. Essentially, new elements are dynamically added to the page using .html() and ajax response. You can see an example of the added elements in the code. Since the elements were inserted into the page using . ...

javascriptjqueryhtmlajaxforms

What is the method to determine the encoding that the user is using to input into the browser?

After reading Joel's insightful article about character sets, I have decided to follow his advice by using UTF-8 on both my web page and in my database. However, one thing that confuses me is how to handle user input. As Joel aptly points out, "It doe ...

phphtmlencodingutf-8

Utilizing DOMStringMap data to populate CSS URLs

I am attempting to create a universal CSS modification for a webpage element that resembles: <button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="lo ...

javascripthtmlcssdomjellyfin

Looking for a way to make CSS text color for a:hover have higher priority than a:visited?

I'm having an issue with my CSS code that changes the background color when hovering over a link. The text color is white on a blue background during hover, but if there is no hover, it's blue with a white background. Additionally, once the link ...

css

What is the best way to shade the background when a hyperlink is pressed?

I am currently working on customizing the navigation bar for my website. My navbar consists of five elements, and I want to make an element appear darker when it is clicked. Here's what I have attempted so far: Utilizing jQuery to modify the ac ...

phpjqueryhtmlcssnavbar

Utilize an A-frame conditional statement to check a variable and dynamically display various glTF models depending on its value

Is it possible to use JavaScript and A-frame () to create a scenario like this? I want to have an onload function named load() that will evaluate the value of variable x. If x is equal to one, I want the gltf with the ID of 1 to be visible while hiding th ...

javascripthtmlthree.jsaframewebvr

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry. I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified. Howe ...

javascripthtmlcssreactjsnext.js

Image positioned above the text in the mobile layout following the text

Can the layout be adjusted so that on desktop, the image is on the right and text on the left in the lower box, but on mobile, the image appears above the text? https://i.sstatic.net/hbPxa.png I understand that placing the image tag after the text tag in ...

htmlcsssass

Inquiring about CSS classes for numerous elements

table.rightlist td { text-align:right; } table.rightlist th { text-align:right; } This code snippet is intended to align both the table cells (td) and headers (th) to the right within a table with the "rightlist" class. However, upon testing the ...

css