The resizing feature of Bootstrap Carousel does not support images

I am using the Carousel feature in Bootstrap, but it is displaying the images larger than their original size. I am trying to resize the images within the Carousel using the following code snippet:

.carousel .item.left img{
    width: 80% !important;
}
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="/media/images/02.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="/media/images/05.jpg" class="d-block w-100" alt="">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Despite trying to resize the images to 80%, they are still displayed at the same size. How can I resolve this issue?

htmlcssbootstrap-4

Answer №1

Revise as follows:

<style >
 .carousel-item > img{
    width: 50%;
    height: 100%;
  }
  </style>
    

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

    </ol>
    <div class="carousel-inner">
      <div class="carousel-item">
        <img src="/media/images/02.jpg" class="d-block w-100" alt="">
      </div>
      <div class="carousel-item">
        <img src="/media/images/05.jpg" class="d-block w-100" alt="">
      </div>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Answer №2

Give this a try. The reason it didn't work before is because your CSS was mistakenly placed within <script></script> tags instead of <style></style> tags. This adjustment should resolve the issue.

<style type="text/css">
  .carousel-item>img {
    width: 80% !important;
  }
</style>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="/media/images/02.jpg" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="/media/images/05.jpg" class="d-block w-100" alt="">
    </div>

  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

Is it possible to streamline this HTML using jQuery to generate it?

I've been working on creating little speech bubbles for an upcoming website. While the code to make these divs is functional, I find it repetitive and time-consuming to write out every time I want to add a bubble. My solution is to utilize jQuery and ...

jqueryhtml

What is the best method for deleting the div with id "__next" in Next.js?

I'm currently working on a website using Next.js and I'm aiming to create a header with a position: sticky; effect. Nevertheless, Next.js automatically inserts a div with the attribute id="__next" at the top of my website without my co ...

javascripthtmlreactjsnext.js

bulk purchase discount with HTML/JavaScript/PHP

I am looking to add a slider feature to my "Prices" page in order to provide customers with an instant quote based on the quantity they select. The slider should range from 1 to 500 or even up to 1000, but having an input box for customers to enter the qu ...

javascriptphphtmlcss

Convert JQuery to a click event

I have a code snippet that is currently functioning properly $(window).load(function(){ $(document).ready(function(){ $("input[name ='_sft_product_cat[]']").parent().next(".children").css("background", "yellow"); }) }); My goal is to convert th ...

jquerycss

Offsetting absolute elements in a horizontal landscape view

When I view my page on a mobile browser (tested on Android JB and iOS 6), it renders fine initially in both portrait and landscape modes. However, the issue arises when I switch from landscape to portrait - the absolute positioned divs are offset from thei ...

htmlcssmobile

Gallery Pagination using JQuery is not working properly

I am experimenting with the jquery easy paginate plugin on a separate page of my Blogspot. The images are displaying properly, but the pagination and CSS are not showing up. I need to adjust my CSS to make this jQuery pagination work correctly. Can someone ...

javascripthtmljquerycss

Issue with Rendering Rapheal Pie Chart in Internet Explorer 9

I encountered an issue in IE9 where I received the error message "SVG4601: SVG Path data has incorrect format and could not be completely parsed" while trying to draw a pie chart on an HTML5 page using Raphael JS and SVG. The problem arose when the "d" att ...

htmlsvginternet-explorer-9raphaelpie-chart

To retrieve the first td element by clicking a button within the corresponding row using JQuery

This may seem like a straightforward inquiry, but despite my best efforts, I have been unable to find a solution. I am looking to create a function that will allow me to click a button located in the 3rd td element and display the text from the first td e ...

javascriptjqueryhtml

Adding a Bold Headline in Select2: A Quick Guide

I have thoroughly searched through all of the select2 documentation but unfortunately, I could not find any information on how to add bold headlines. Can anyone please provide a full code example (including CSS) on how to accomplish this? ...

jqueryhtmljquery-select2

What is preventing my CSS variables from functioning in my Vue component that is utilizing SASS?

Currently, I am working with sass and vue version-3. Within one of my components, the following code is present: HelloWorld.vue : <template> <div class="greetings"> <h1>{{ msg }}</h1> <h3> You’ve succe ...

cssvue.jssass

Unsupported MIME format

I'm encountering an issue where my stylesheet is not applying to my handlebars. It was working fine yesterday, but today I'm seeing a MIME error and I'm unsure of the reason behind it. Any assistance would be greatly appreciated. Server Cod ...

cssnode.jsexpress

Tips on customizing default Polymer CSS

Currently, the core-toolbar features an indent class that shifts the title to the right by 60px. However, material design guidelines suggest that the margin should actually be 80px (oddly enough, the number 60 is not mentioned in the documentation). I cou ...

csspolymerweb-componentshadow-dom

Disable the functionality of the next and previous buttons for the Bootstrap carousel when clicking on the outer

Here is the code for the carousel: The next/prev button functions under its respective div, how can I stop it? When I click on the div below the carousel, the carousel continues to move as usual. Below the carousel div, there is another one with a tabbi ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I adjust the font size of information retrieved from a JSON file using ng2-smart-table?

I recently tried using the following CSS code: :host /deep/ ng2-smart-table {font-size:22px;} However, despite implementing this code, I have not noticed any change in the font size. ...

cssangular

Introduce a transition effect to the MUI Chip component to enhance user experience when the Delete Icon

When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...

cssreactjsmaterial-ui

I've been attempting to align the iframe element in the center without success, despite trying out various solutions from

Despite trying to center-align the div using style="text-align: center;", display: block, and align="center", none of these methods seemed to work for me. Here is the code including all attempts: <div align="center" style="text- ...

htmlcssiframebootstrap-4

Angular - The connections between deeply nested object models are established

I have an Angular application that is used to display company and contact person information in a text box format. Here is the code for displaying the Company Email address: <label> Company Email address</label> <input type="text& ...

javascripthtmlcssangularangular2-ngmodel

Discovering the presence of line breaks

I have searched extensively on Google, but I am struggling to find a definitive answer. My goal is to create an email simulation where users can input text into a textarea and save it to the database. They should then be able to return to the page later a ...

javascriptjqueryhtml

Counting the visible elements in Slick carousel

I have implemented slick.js to display a grid of 6 items (2 rows, 3 columns) per slide. I am looking for a way to include both the standard prev and next arrow navigation as well as an indication of the active item count for pagination assistance. For exa ...

javascriptjqueryhtml

Internet Explorer 10 offers 3D transformation capabilities

My 3D rotating image carousel works well in Chrome and Firefox but not in IE. I am aware that IE10+ does not fully support the preserve-3d tag, and although there are workarounds by applying transforms to the children instead, I have been unsuccessful in ...

cssinternet-explorertransform