Challenges with text in a Bootstrap 5 responsive carousel

I'm currently in the process of developing a new website and I am utilizing bootstrap 5. One issue I have encountered is that the text and button within the carousel in the header section do not appear to be compatible. To provide better clarity, I will be including some images and source code related to this problem.

    <!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

    <!-- Indicators/dots -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="4"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slider/5.png" alt="Los Angeles" class="d-block img-fluid" style="width:100%">
            <div class="carousel-caption">
                <h3>Feel Free to Call Us</h3>
                <p>Technical Support Services</p>
                <p>+90 850 111 11 11</p>
                <button type="button" class="btn btn-outline-danger">More Details</button>
            </div>

        </div>
        <div class="carousel-item">
            <img src="images/slider/1.png" alt="" class="d-block" style="width:100%">
            <div class="carousel-caption">
                <h3>If you are looking for a <span style="color:#0597d4;">3CX</span> Distributor Nearby, You Are at the Right Place.</h3><br />
                <button type="button" class="btn btn-outline-info">More Details</button>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slider/7.png" alt="" class="d-block" style="width:100%">
            <div class="carousel-caption">
                <h3>Fortinet IT Solutions</h3>
                <p><span style="color: red; ">FORTINET IS TURKEY'S</span> SELECT PARTNER</p>
            </div>
        </div>
        <div id="special" class="carousel-item">
            <img src="images/slider/12.png" alt="" class="d-block" style="width:100%">
            <div class="carousel-caption">
                <h3>We Combine Our Industry Expertise with Modern Work Conditions,
                    </h3>
                <p>Envisioned to Provide Tailored Solutions catering to the Internal Dynamics of Organizations.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slider/15.png" alt="" class="d-block" style="width:100%">
            <div class="carousel-caption">
                <h3>As Fortinet, we offer network technology solutions such as local area networks, remote networks, wireless networks, network security, and secure remote access
                </h3>
                <p>we deliver network solutions like installation and operational deployment of network technologies.</p>
            </div>
        </div>
    </div>
</div>
<!-- Carousel -->

CSS code

 .carousel-caption{
transform: translateY(-50%) ;
bottom: initial;
top: 50%;

} enter image description here

enter image description here

Answer №1

Be sure to include the d-flex class in the carousel-caption and also add align-items-center

<div class="carousel-caption align-items-center d-flex">
  <h3>FEEL FREE TO CONTACT US</h3>
  <p>Technical Support Services</p>
  <p>+90 850 111 11 11</p>
  <button type="button” class="btn btn-outline-danger">More Information</button>
</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

Frequently Asked Questions about Bootstrap Navbars

I designed my NavBar to look a certain way, but I have some inquiries regarding it. https://i.sstatic.net/4nypZ.png This is the code for NavMenu.razor: <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class=" ...

Steps to correct alignment in a numbered list when the dot is removed using CSS

Currently, I'm working on developing a rule page for a game. The specific layout requirements dictate that the rules be presented in an ordered list without periods following each number: 1 Rule one 2 Rule two 3 Rule three To achieve this format ...

The dropdown menu is unable to open directly below the main menu item

How can I make the submenu open to the left when hovering over a menu point, instead of directly under it? I have tried adjusting the position attributes but haven't found the right solution yet. The closest I got was by changing the display property ...

What is the best way to show a pop-up message to a visitor on my site for the first time

I am seeking a way to showcase a popup the first time a user lands on my website. At present, the popup appears only upon page refresh. Check out the demo below: var popupdisplayed = false; jQuery(function() { jQuery('[data-popup-close]').o ...

Tips for updating the color of table data when the value exceeds 0

I'm currently working on developing a transaction table that is intended to display debit values in red and credit values in green. However, I would like these colors to only be applied if the value in the table data is greater than 0 via JavaScript. ...

Sneaky spam and ads embedded within Joomla template

Today, while examining the source code of a Joomla site I am developing, I stumbled upon some hidden links that seem to be spam. I have spent an hour searching through various template files but have been unable to locate them. The hidden links in questio ...

The sidebar should remain fixed on top when viewed on mobile devices, but not when viewed on desktop

Prior to beginning a new project, I'm interested in exploring the possibility of implementing a sliding sidebar for mobile and tablets. On desktop, however, I envision a fixed sidebar that is part of the main container layout as shown below: <div ...

What is the quickest way to redirect a URL in WordPress?

Is it possible to redirect a URL instantly in WordPress using this script code? JavaScript Code: jQuery(document).ready(function() { var x = window.location.href; if (x == 'http://example.com/') { window.location.hr ...

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

Is there a way to show escaped html code on the blog editing page?

After developing a Content Management System (CMS), I encountered an issue with code formatting in my blog posts. <pre> <code> &lt;input type=&quot;color&quot; name=&quot;favcolor&quot; /&gt; </code> < ...

What is the best way to resize an SVG to perfectly fit the parent div container?

I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div? For i ...

Error encountered in ngtsc(2345) where an argument of type 'Event' is being used instead of an expected parameter type of 'SortEvent'

I recently started using angular and encountered an issue while trying to sort columns. The error message I received was: Argument of type 'Event' is not assignable to parameter of type 'SortEvent'. Type 'Event' is missing t ...

How can you determine if multiple checkboxes have been checked with "if" statements following a button click?

I am looking to display a message after clicking a button if one or more checkboxes are checked. I would prefer using Jquery for this functionality. Any help on achieving this would be highly appreciated. $(function() { $(".btn").click(function() { ...

Move the dropdown selection above all DIV elements

Check out this link: Make sure to select an option from the dropdown menu. Also, some of the options are hidden behind other elements. I noticed that if I target .join-form and remove overflow: hidden, the layout of the page becomes distorted. Can anyon ...

The Markup() function in Flask is used to generate markup content that is not enclosed within

Before I explain my issue, let me go ahead and share the code with you. Using Jinja in HTML <p>{{ item }}</p> 'Flask' item = Markup('<ul><li>list item 1</li><li>list item 2</li></ul>') ...

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

Unable to modify variable to play audio

As I work on constructing my website, I am incorporating various sounds to enhance user experience when interacting with buttons and other elements. However, managing multiple audio files has proven challenging, as overlapping sounds often result in no aud ...

Using Python to display MySql information in HTML documents

I am currently working on a project that involves displaying a dynamic list of items from a MySQL database on an HTML page. The challenge here is that the list needs to update automatically as the database is modified. Each item on the list should also lin ...

Ways to arrange specific columns within a table

I am facing an issue with aligning text in a table properly. In my table, I have two columns - first column and second column, both with colspan="4": It is supposed to look like this: <tr> <td colspan="4"> First column </td> ...

Show or hide the right element when clicked using ng-show in AngularJS

My goal is to toggle elements based on which one is clicked, not all at once. For instance, if I have 3 form elements and 3 buttons, when I click on button 1, I only want to toggle the corresponding form element. Here is my current code snippet: In Angu ...