Steps for aligning items in a column horizontally in Bootstrap 5

After creating a Grid system with only 2 columns, I placed text in the first column and a carousel in the second. Despite setting a custom size for the carousel image, I'm facing difficulty centering it horizontally within the column.

.title-sec {
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}

.carousel {
  width: 400px;
  height: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2323383f383e2d3c0c79627d627f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container title-sec">
  <div class="row">
    <div class="col text-center my-auto">
      <h1 class="heading1"> Sample Text</h1>
      <h2 class="heading2">Sample Breifing</h2>
    </div>
    
    <div class="col m-auto">
      <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://via.placeholder.com/300" class="d-block w-100" alt="...">
          </div>
          
          <div class="carousel-item">
            <img src="https://via.placeholder.com/300" class="d-block w-100" alt="...">
          </div>
          
          <div class="carousel-item">
            <img src="https://via.placeholder.com/300" class="d-block w-100" alt="...">
          </div>
        </div>
        
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f948b9489">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

javascripthtmlcsstwitter-bootstrapbootstrap-5

Answer №1

To center the carousel, apply the styling directly to the carousel element instead of the container, unless you are using flexbox which is not necessary in this case.

I added the class .mx-auto to the .carousel element.

.title-sec {
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}

.carousel {
  width: 400px;
  height: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d2c9d6c9d4">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container title-sec">
  <div class="row">
    <div class="col text-center my-auto">
      <h1 class="heading1"> Sample Text</h1>
      <h2 class="heading2">Sample Breifing</h2>
    </div>
    
    <div class="col bg-secondary">
      <div id="carouselExampleFade" class="carousel slide carousel-fade mx-auto" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
          </div>
          
          <div class="carousel-item">
            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
          </div>
          
          <div class="carousel-item">
            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
          </div>
        </div>
        
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b140b16">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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

Retrieve the current system datetime with just a click of a button

Does anyone know how to use JSF + RichFaces to automatically display the current date and time in an inputText field when a button is clicked? Any guidance on this would be greatly appreciated. Thank you! ...

javajavascriptajaxrichfaces

The MySQL query is returning a blank result with only the column headings displaying

I have been working on improving my skills in PHP and AJAX by developing an application that enables users to search a database for real-time product stock information. Currently, I am facing an issue where the headings are displayed when a user types a le ...

phphtmlcssmysqlajax

What could be the reason for NPM failing to work following an update?

Just two days ago, I updated NPM and now it's suddenly not working on my Windows 10 20H2 platform. Every action I take results in the same error message: C:\Users\ethan>npm internal/modules/cjs/loader.js:883 throw err; ^ Error: Canno ...

javascriptnode.jsnpm

Chart.js encountered an uncaught TypeError when attempting to resolve the module specifier for "@kurkle/color"

Currently, I am utilizing Chart.js 4.2 within a Laravel project that is integrated with Bootstrap 5.1. The chart is functioning as expected; however, an error in the console has been causing frustration: Uncaught TypeError: Failed to resolve module specifi ...

chart.jsbootstrap-5

Trouble updating document with MongoDB updateOne when using ID as filter

I need to update a property value of a specific document by sending a request to my NextJs API using fetch. // Update items in state when the pending time in queue has passed, set allowed: true items.map((item) => { const itemDate = new Date(item.adde ...

javascriptmongodbnext.js

Issue with Initiating Html5Qrcode Scanner Automatically Following Form Submission

I'm currently utilizing the Html5Qrcode scanner within a WordPress plugin to scan barcodes for products. My workflow involves: 1. Initiating the Html5Qrcode scanner and scanning a barcode. 2. Using the decoded barcode value to search for and display ...

javascriptjqueryajaxwoocommerce

What is the best method in JavaScript to create three different shades of a color?

My sass function generates lighter and darker versions of a base color, here is the code snippet: $colors: ( betpawa-green: #107A3D, lime-green: #8DC63F, yellow: #FBCD00, ); @mixin color-generator { @each $name, $hex in $colors { &-#{$nam ...

javascripthtmlfor-loopsasstemplate-literals

Picture emerges from the lineup

My dilemma involves repositioning an image within a row > col-md-6. To address this, I devised two classes - .pos1 and .pos2 .pos1 { position: relative; } .pos2 { position: absolute; right: 0px; } However, when applying these classes, the ...

htmlcsstwitter-bootstrap-3

challenges with Next.js dynamic routing when dealing with spaces

I am facing an issue with accessing dynamic routes using a product name from my API when the name contains spaces. However, I can access the routes without any problem if the product name is just a single word. utils/api.js export async function getProduc ...

javascriptreactjsurlnext.jspathname

Experiencing a Number TypeError Issue with Mongoose Schema?

The server encountered a 500 internal error with the message: Error: TypeError: path must be a string The specific line causing the error in ItemCtrl.js is line 35. console.log('Error: ' + data); The stack trace for this error is as follows: ...

javascriptnode.jsangularjsmongodbmongoose

What is the best way to establish a default selection in Angular?

After retrieving JSON data from the server, it looks something like this: $scope.StateList = {"States": [ { "Id": 1, "Code": "AL", "Name": "Alabama" }, { "Id": 2, "Code": "AK", "Name": "Alask ...

javascriptangularjs

Font family 'anticon' is not recognized

While following a coding tutorial on YouTube, I encountered an error message that has me stumped. Despite having the correct import statement and dependency installed, the issue persists. Error message in iOS simulator: https://i.stack.imgur.com/LOVCQl. ...

javascriptreactjsreact-nativedependencies

"Obtaining Data from Local Storage on a Different Page: A Step-by-

``How can I transfer JSON data stored in local storage from one page to another within the same domain? In MainPage.html, the "user" data is stored in local storage and displayed. However, when data is added in AddEmploye.html and then returning to MainPa ...

javascriptjson

Having difficulty managing asynchronous Node JS API requests

I'm a beginner in Node.js and I've taken on a project that involves querying both the Factual API and Google Maps API. As I put together code from various sources, it's starting to get messy with callbacks. Currently, I'm facing an issu ...

javascriptnode.jsgoogle-maps-api-3asynchronousexpress

error encountered during module import in Ember.js

I am struggling with removing diacritics from a string in my Ember.js app. After discovering the 'fold-to-ascii' plugin on GitHub, I added it to my project using npm. Although the plugin is visible under the node_modules folder, I'm unsure o ...

javascriptember.jspluginsnpmrequire

Trigger an event on an element upon first click, with the condition that the event will only fire again if a different element is clicked

Imagine having 5 span elements, each with an event listener like ` $('.option1').on("click", function(){ option1() }) The event for option 1 is also the default event that occurs on page load. So if no other options are clicked, you won&apo ...

javascriptjqueryeventslogic

Determine the SVG arc connecting two given points

My situation involves having coordinates for points X and A, A',... as follows: X [x,y] (starting point) A [a,b], A'[a',b'], etc. (ending points) I also have information about angles XCA, XCA', etc. However, I am struggling t ...

javascriptmathsvgcoordinates

Nextjs unexpectedly displays blank page upon fetching data from Firebase Firestore without any error messages

I am currently facing an issue when trying to retrieve page details from Firebase Firestore using getStaticPaths and getStaticProps in my Next.js project. Despite following the code structure correctly, I am encountering a scenario where the page appears e ...

javascriptreactjsgoogle-cloud-firestorenext.jsgetstaticpaths

Utilize THREE.js to control the camera with a button click

I'm looking to add separate buttons on my website, where each button triggers the camera to move to a different position within the scene. How can I achieve this? Currently, I have set up a system where pressing a button leads to a sequence of predefi ...

javascriptbuttoncamerathree.jsposition

Is there a way to extract a single value from an array of data and convert it into a series of values separated by commas, all using JavaScript but without

Here is an array data in a specific format: const data= [ { name: "productname", id: "1356", price: "0.00", category: "Health", position: "1", list: "New Products", ...

javascriptnode.jsarraysstringweb