Tips for styling carousel images seamlessly (HTML/CSS/Bootstrap4)

I am a beginner in HTML, CSS, and Bootstrap and I am currently working on implementing a carousel on my webpage.

Although the carousel is functional, I am facing an issue with the images not fitting properly on the page. The size of the images appears to be too large (height and width) and despite my attempts to adjust it, the problem persists.

Here are my code snippets:

.carousel-inner img{
 width:100%;
 height: 40%;
}
.carousel-caption {
  position: absolute;
 top: 60%;
  transform: translateY(-60%);
}
.carousel-caption h1{
font-size:470%;
text-transform: uppercase;
text-shadow:3px 3px 15px #000;
}
.carousel-caption h3{
  color:  #ffc107;
font-size: 200%;
font-weight: 500;
text-shadow: 3px 3px 10px #000;
padding-botton: 1rem;
}
<!-- Image slider -->
    <div id="slides"  class="carousel slide" data-ride="carousel">
<ul class= "carousel-indicators">
  <li data-target= "#slides" data-slide-to= "0" class="active"></li>
    <li data-target= "#slides" data-slide-to= "1"></li>
      <li data-target= "#slides" data-slide-to= "2"></li>
</ul>
<div class="carousel-inner">
   <div class="carousel-item active">
  <img src="/home/susy/Desktop/GIT/vegan-/imagens/feijuca6.jpg">
  <div class="carousel-caption">
    <h1 class="display-2"> Have you ever tried?</h1>
    <h3> Discover the authentic flavour</h3>
    <br>
  <button type="button" class= "btn btn-outline-light btn-lg"> Click Here</button>
  </div>
    </div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/pudim.jpg">
</div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/meal.jpg">

The first snippet represents the CSS (utilizing CSS 3) while the second comprises the HTML code. Additionally, I have included Bootstrap 4 in my project.

If anyone has insights into what I might be overlooking or any potential mistakes I could be making, kindly let me know. Your guidance on adjusting the sizes to better fit the carousel would also be greatly appreciated. Thank you.

htmlcssbootstrap-4carousel

Answer №1

In my opinion, it is better to utilize the following CSS:

    .carousel-inner img{
       max-width:100%;
       height: auto;
       display: block;
    }

instead of:

    .carousel-inner img{
 width:100%;
 height: 40%;
}

If you require a specific height, you can set it to 300px with the following CSS:

    .carousel-inner img{
     max-width:100%;
     height: 300px;
     object-fit: cover;
object-position: center;
    }

Answer №2

It appears that you are looking to include class="d-block w-100" in your image tag.

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

Shifting Icon to the Right within the Drawer Navigator Toolbar

While modifying the example code for Material UI's drawer navigator, I decided to enhance it by adding a notification icon and a checkout icon with the Admin Panel typography in the toolbar. However, I encountered an issue where the checkout icon app ...

javascripthtmlcssreactjsmaterial-ui

How to set the default value of a select dropdown in PHP

I came across this snippet of code: <td> <select class="versionSelect"> <option value="5" <?php if($item->version === "5") echo "selected='selected'"; ?>>5</option> <option value="6" <?php ...

phphtml

Switching the chosen option in the <select> element repeatedly

I have successfully set the selected value, but now I am wondering how to keep changing it continuously. Initially, my approach was to remove the "selected" attribute from all options and then add it back to the desired option. Surprisingly, this method w ...

javascriptjqueryhtml

Centered content appears smaller than the surrounding div

After spending an hour trying to troubleshoot and searching for solutions, I am turning here for help. I am attempting to insert a Bootstrap Nav-Bar into a Div. I successfully centered the Nav-Bar, but now my Div is taller than the content inside it. This ...

htmlcsstwitter-bootstrap

Is there a way to prevent the Sticky Footer from obscuring the content?

How can I prevent a "sticky" footer from overlapping the content on certain pages while still maintaining its stickiness? I attempted to use min-height: on HTML and body, but it did not resolve the issue. CSS: html { background: black url(images/bg2 ...

htmlcssfootersticky-footer

Is there a method in VBA to access elements generated by javascript code?

After spending several hours conducting thorough research on Google (including browsing StackOverflow), I've been trying to find a method that would allow me to target HTML elements generated by JavaScript in VBA. For instance, using ie.Document.getE ...

javascripthtmlajaxvba

how can I pass a group of values as an argument in math.sum function?

Using math.js for convenience, I was intrigued if I could utilize the math.sum method to calculate the sum of a collection of input values. For example, something along the lines of: Here's a snippet of code to help visualize my concept: $(documen ...

javascripthtmljquerymathmath.js

jquery's animation causing elements to move abruptly when containing text

For the past hour, I've been grappling with jQuery and could really use some assistance. The following example showcases smooth animations: when you click on either of the divs, the selected div will move left or right if the viewport is wider than 70 ...

javascriptjqueryhtmlcssjquery-animate

Ways to incorporate a scroll feature and display an iframe using JQuery

Is there a way to animate the appearance of hidden iframes one by one as the user scrolls down the website using jQuery? I have come across some solutions, but they all seem to make them appear all at once. I'm looking for a way to make the iframes s ...

javascripthtmljquerycssiframe

javascript the unseen element becomes visible upon page loading

my website has the following HTML snippet: function getURLParameters() { var parameters = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { parameters[key] = value; }); return param ...

javascripthtmlcss

There was an issue with the SidebarController function being undefined, as it was expected to be a function

I'm encountering two issues with my demo: Error: [ng:areq] Argument 'SidebarController' is not a function, received undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined ...

phpjqueryhtmlcssangularjs

Deselect one checkbox while selecting another

<?php session_start(); if (count($_POST) > 0) { $_SESSION['link'] = $_POST['link']; } ?> <form method="post"> Gmail: <input type="checkbox" name="link" value="gmail" id="gmail" <?php if ($_SESSION[&apos ...

phphtml

Can tabs be created without the use of javascript?

I'm currently working on implementing a tabbed box layout, and while I've come across several tutorials that use JavaScript to switch between tabs, I'm wondering if there is a way to achieve the same functionality without relying on JavaScri ...

javascriptcss

Choose from a dropdown menu to either activate or deactivate a user account

I'm new to php and I need help getting this code to function properly delete.php <?php include_once 'dbconfig.php'; if($_POST['del_id']) { $id = $_POST['del_id']; $stmt=$db_con->prepare("UPDATE tbluse ...

javascriptphpjqueryhtml

Difficulty in updating Vue variable value following a request

Hello everyone, I am facing an issue regarding a variable value. Within the request, I am comparing each array value to see if there is a match and then updating the match variable to true if a match is found. However, the problem arises when the updated ...

javascripthtmlvue.jsvuejs2frontend

What is the best method for determining the current value of an On/Off switch with labels for both states?

How can I retrieve the current value of an On/Off switch that is labeled as On and Off? Below is the HTML code for this particular switch: <div class="make-switch has-switch"> <div class="switch-on switch-animate"> <input type="checkbox" d ...

javahtmlselenium-webdriver

Am I following the right steps in creating a Bootstrap panel?

Issue: The alignment of lines in a Bootstrap panel seems off, but after reviewing the documentation, I am confident that my code is correct. The columns and rows appear to be structured correctly, yet there is an issue where the right column is taller tha ...

phphtmlcsstwitter-bootstrap

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

When using materialize css tabs, all the divs load one below the other on the initial page load. If I refresh the page, it starts behaving properly. <div class="row"> <div class="col s12"> <ul class="tabs"> <li class="tab col s ...

javascripthtmlcssreactjsmaterialize

Display data when clicking on Tailwind

I am currently displaying a sub menu on hover using Tailwind CSS. However, I am wondering how I can achieve the exact same functionality by triggering an onclick event instead of hovering over the menu. Here is a DEMO showcasing the current setup. CODE: ...

javascriptcsstailwind-css

What are the reasons and situations where it is beneficial to utilize the input type

Could someone provide an explanation on this subject, detailing its purpose and how it should be understood? <input type="hidden" name="msg" value="GATEFORUM|OE180187|NA|0.00|NA|NA|NA|INR|NA|R|gateforum|NA|NA|F|AMIT SINGH|9993523486|gis16|NA|NA|NA|NA ...

javascripthtml