The functionality of the Bootstrap carousel seems to be malfunctioning

I'm currently struggling to center the content in my Bootstrap carousel on my website. I attempted using Grid, but it didn't yield the desired outcome. How can I address this issue? Below, you will find my code and an accompanying image for reference. At this point, no CSS has been implemented for the carousel.

<section class="services-about">
                <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- The slideshow -->
                    <div class="carousel-inner">
                        <!-- Slide 1 -->
                        <div class="carousel-item active">
                            <div class="card-columns">
                                <div class="card card-effects">
                                    <img src="./resources/images/data.png" alt="" class="img-fluid card-img-top mx-5"
                                        style="height: 10%; width: 15%;">
                                    <div class="card-body">
                                        <h3 class="card-title text-center" style="color: #686868 !important;">
                                            WEB DEVELOPMENT
                                        </h3>
                                        <hr style="border: .01px solid #333 !important;">
                                        <p class="card-text text-center"
                                            style="color: rgba(255,255,255,.755) !important;">Lorem
                                            ipsu dolor sit amet consectetur adipisicing
                                            elit.
                                            Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
                                            unde
                                            praesentium, quidem soluta incidunt enim dolore veritatis at quis
                                            molestias
                                            corporis
                                            quod inventore porro!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Add more slides here -->

                    </div>

                    <!-- Left and right controls -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>

                </div>
            </div>
        </section>

Feel free to review this image displaying the issue with the carousel.

cssbootstrap-4

Answer №1

To achieve center alignment, you can utilize the CSS property position.

Simply include the following code:

.carousel-item {
   position: relative;
}

.card {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(50%, 50%);
}

With this adjustment, your content will be perfectly centered within the slide. 😊

Answer №2

Give this a shot... try adding style="margin:auto" to the card.

<div class="card" style="width:400px; margin:auto;">
  <div class="carousel-caption">
    <div class="card-body">
      <h4 class="card-title">Jane Smith</h4>
      <p class="card-text">An example of some text.</p>
      <a href="#" class="btn btn-primary">View Profile</a>
    </div>
    </div>
  </div>

Answer №3

Considering the utilization of bootstrap classes:

Experiment with incorporating 

d-flex justify-content-center align-items-center
within the parent div element.

Furthermore, it is highly recommended to discontinue the practice of inline CSS styling and instead transfer your CSS code into an external file.

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

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Hey there, I've been working on styling the input[type="file"] element and could use some assistance. Like the saying goes, "One JSfiddle is worth 1000 words," so here's the link to my example: --- For more details, click here: http://jsfiddle.n ...

javascriptjqueryhtmlcsscss-float

Ways to adjust the positioning of an image

Seeking assistance, I am currently working on building a portfolio using HTML while following a tutorial. I utilized undraw to insert an image but unfortunately, the image is fixed to the right-hand side: I would like to position the image below my icons, ...

javascripthtmlcss

Applying class to target specific screen size in Bootstrap

I've been utilizing bootstrap for my project. My objective is to assign multiple classes based on screen size, such as sm-col and xs.col. For example, let's say I have a text id <div id="text" class="xs-format lg-format ..."></div> ...

csstwitter-bootstrapbootstrap-4column-count

Bootstrap 4's img-fluid class ensures images stretch to fit mobile resolutions

I have a challenge with making an image responsive to 100% width while still maintaining responsiveness overall. When I try using: <div class="container-fluid"> <div class="row"> <img src="images/centre-mob.jpg" alt="" class="i ...

bootstrap-4responsive

Using various colors to highlight specific sections of a letter or number

I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...

javascripthtmlcss

Is there a way to implement a confirmation form within the properties_list view to ensure the user intends to delete the property

Is there a way to modify the code below so that instead of directly deleting the property, a confirmation form (such as a modal) is displayed for the user to decide whether to proceed with the deletion or not? views.py def property_list(request): proper ...

javascriptpythonhtmlcssdjango

Are the maps intersecting within the field of vision?

I have 2 components in my angular application each showing a map from mapbox. Here is the code for one of the components: Component import { Component, OnInit } from '@angular/core'; import * as mapboxgl from 'mapbox-gl'; @Component( ...

cssangularmapboxmapbox-gl

Utilize the keyboard's vertical arrows to adjust values as needed

Implement the functionality to increase and decrease the value in a label or p tags using the onkeydown and onkeyup events, without requiring a textbox input. I have come across numerous examples, but they all rely on textboxes. I am looking for a soluti ...

javascripthtmlcss

Position the div at the bottom of the card-body in Bootstrap 4

I'm currently experimenting with Bootstrap cards and I have successfully implemented card headers and footers. In the card body, there is a card title that can span either one or two lines. Additionally, within the card body, there is some information ...

javascripthtmlcssbootstrap-4

Adjusting font sizes based on window dimensions

I am currently in the process of building a website that requires the inclusion of images along with corresponding headings and descriptions. When viewing the website in full screen, the heading displays on a single line. However, as the browser width decr ...

htmlcssruby-on-railstwitter-bootstrapweb

Overlapping Bootstrap cards conundrum

Does anyone know how to align Bootstrap cards and make them responsive? I have them centered, but they are overlapping and sticking to the left side. This is for email development with a maximum width of 680px. Any assistance would be greatly appreciated! ...

htmlcsscard

Ways to manage the size of Material-UI vertical tabs?

After receiving assistance from others on the thread about Creating a Material-UI tab with image tabs instead of text labels, I was able to successfully implement images for my Material-UI tabs. However, I am facing an issue where I am unable to control th ...

cssreactjsmaterial-ui

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

javascripthtmlcsshtml-table

Showing information to several classes using JavaScript

I am currently developing a "Gamebook Engine" that enables users to set a custom username. The user name is extracted from an input element with the id="setUserNameInput" and stored using the function setUserName(). It is then displayed or loaded into an e ...

javascripthtmlcssclass

How can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

I need help figuring out how to revert an element back to its original size after it has been modified with .resizable. I attempted the following: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//code. ...

javascripthtmljquerycss

Utilize an SVG to function as a block-level element

I've been struggling to find a solution for making my SVG element act as display: block. I want to display an image right below the SVG, but it keeps overlapping the SVG. I've attempted changing the properties to "display: block" and even creatin ...

htmlcsssvgdisplay

Mono repo project utilizing Angular 4+ and Typescript, enhanced with Bootstrap styling

Looking for a project to practice with Angular 4+ using Typescript and a Bootstrap template. Hoping for a setup where I can just run npm install and ng serve to start. Any recommendations for mono repos would be highly valued! ...

angulartypescriptnpmbootstrap-4

Success message in Bootstrap 4 swiftly flashes after an ajax request

My Bootstrap 4 form modal displays a success message briefly upon submission before disappearing. Despite the successful data insertion into my database and alert box popup, I'd like to resolve this issue properly. Javascript <script& ...

jqueryajaxbootstrap-4bootstrap-modal

Refresh all color pickers with Bootstrap 4 Colorpicker - enforce the update of every color selector

Currently, I am utilizing the Bootstrap 4 color picker library which can be found at this link: In my code, I have defined color pickers that look like this: <div class="input-group cpicker"> <input type="text" class="form-control input-lg" ...

javascriptbootstrap-4color-picker

Utilizing CSS to incorporate percentage points

Currently, I am facing a challenge in implementing a vertical line with percentage marks. It needs to be positioned relative to the percentage bar, just like how it appears in the screenshot below: https://i.stack.imgur.com/CNWUV.png I attempted a basic ...

htmlcssflexbox