Tips for adjusting the thickness of the next/prev icons in the Bootstrap carousel

Exploring the world of HTML/CSS and Bootstrap.

There's a carousel with these previous/next buttons :

<button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="visually-hidden"> Previous </span>
</button>

<button class="carousel-control-next" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="visually-hidden"> Next </span>
</button>

Desiring to adjust the thickness of the buttons, I attempted adding this code to my CSS stylesheet :

.carousel-control-prev {
    border-width: 35px;
}

.carousel-control-next {
    border-width: 35px;
}

I also experimented with :

.carousel-control-prev-icon {
    border-width: 35px;
}

.carousel-control-next-icon {
    border-width: 35px;
}

Unfortunately, no changes were observed. Just to clarify, I aim to modify the thickness rather than height/width of the buttons. Any suggestions on how to achieve this?

Appreciate any insights!

Answer №1

Bootstrap v5 now utilizes a pre-determined collection of icons (https://getbootstrap.com/docs/5.2/extend/icons/). Previous versions have used Glyphicons (https://getbootstrap.com/docs/3.3/components/). You have the option to swap out the referenced icon within the set, switch to a different icon set (such as Font Awesome, Material Design Icons, etc.), or create your own custom icon if you're up for the challenge and link it with CSS.

As per the Bootstrap Manual, you can also redefine the $carousel-control-prev-icon-bg and $carousel-control-next-icon-bg variables with any SVG data of your choice (https://getbootstrap.com/docs/5.2/components/carousel/)

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 way to eliminate the left margin entirely in CSS?

I am attempting to create an image view that fully covers the window, without any margins. I have tried various solutions such as setting the body margin and padding to 0, but they do not seem to work. body { margin: 0px; padding: 0px; } or *, html { ...

What could be causing the embedded dropdown to automatically select the initial option every time?

I am encountering an issue with a page that includes an html table rendered using node with express and ejs. The table contains a select dropdown in one of the cells, and it populates correctly with the right values. However, regardless of which option I ...

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...

Attempting to align the text perfectly while also adding a subtle drop shadow effect

Trying to center text with a drop shadow without using the CSS property. I'm utilizing span and :before for cross-browser compatibility. Here is what it currently looks like: The HTML: <h3 title="Say hello to Stack Overflow"><span>Say ...

When the font size is set below 16px on an iPhone, iOS will automatically zoom in to compensate

Currently, I am running tests on my app using an iPhone. Everything seems to be working correctly on the iPad, but when I try clicking on a text field on the iPhone, the view automatically zooms in. It appears that setting the font size to 16px or larger r ...

How to make a drop-down select list remain open even after selecting an option

In my current project, I have a dropdown box that holds a list of files which can be deleted. The user needs to select the file they want to delete from the dropdown each time and then the process repeats for every file. I would like to implement a feature ...

Adjust the vertical positioning according to the percentage of the width

Currently, I am attempting to modify the position of my navigation bar on the screen in relation to the screen width rather than the height. I previously attempted using top: 10% in CSS, but realized this is based on the screen's height instead of its ...

javascript alter css property display to either visible or hidden

I am struggling with a CSS id that hides visibility and uses display: none. The issue arises when I want the element to be visible upon clicking a button, but removing the display:none property is causing design problems due to it being an invisible elemen ...

Understanding the distinction between .navbar and .navbar a in CSS

Can you explain the distinction between .navbar and .navbar a? .navbar { overflow: hidden; background-color: #333; font-family: Arial; } .navbar a { float: left; font-size: 16px; color: white; ...

Guide on positioning an SVG button within a form

I am attempting to design a form with two input fields and a button. Rather than using a plain text button, I prefer to utilize an SVG graphic for the button; however, it is not aligning correctly. Consider the following HTML and CSS: body { backg ...

Materialize CSS dropdown select arrow out of position

Here is a snapshot of the Materialize CSS, which can be viewed at: However, I am encountering an issue where the dropdown arrow appears below the list instead of on the side. I am currently using Django 3. How can I resolve this? https://i.sstatic.net/d ...

Adjust the size of a div while maintaining its aspect ratio based on the width and height of its parent element using CSS

After exploring various methods to create div aspect ratios using CSS, I had success with a demo. However, I encountered an issue with setting the height of my container when the width-to-height ratio is larger (#1 scenario). https://i.sstatic.net/VNdJ5.p ...

What is the best way to right-align a label in a vertical MUI Slider in ReactJS?

I am currently working with ReactJS/TS and MUI (Material-UI) to develop a vertical slider that requires the label to be positioned on the right side. By default, MUI places the label on the left for vertical sliders. I have reviewed the API documentation e ...

Creating an animated background slide presentation

After creating a button group, I wanted the background of the previous or next button to move/slide to the selected one when the user clicks on it. I achieved this effect using pure CSS and simply adding or removing the 'active' class with jQuery ...

How to Retrieve Checkbox Values from Multiple Rows Using JavaScript

I have a variety of module rows that allow users to manage access rights by selecting specific options. My goal now is to extract the checked boxes from these checkboxes with the name "config{{$field->id}}". Below is the current functioning code. HTM ...

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

Managing iframes in React using reference methods

Trying to set the content of an iframe within a React component can be a bit tricky. There is a component that contains a handleStatementPrint function which needs to be called when the iframe finishes loading. The goal is to print the loaded iframe conten ...

Arranging elements in a list according to their position on the canvas using AngularJS

I am currently working on drawing rectangles on an html5 canvas using the JSON format provided below. My goal is to sort the array based on the x and y locations of each element. { "obj0": { "outerRects": [ { "outerRectRoi": { "x1": 0, " ...

Hover over to see the impressive special effect produced by Scriptaculous Effect.Appear

Having an issue with using scriptaculous Effect.Appear() as a menu option. I'm trying to create a flash-like menu using pure css and scriptaculous. I've managed to achieve the desired outcome where hovering over a box triggers a text (with displ ...

Expand a section of the webpage to fill the entire screen

I'm working with some HTML code that looks like this: <header>title</header> <content class="container-fluid"> <div class="row"> <div class="col-sm-3 leftside"> <ul> <li>test</li> ...