Center image in Carousel boostrap-4.4.1css

Community Beginner ,
Aug 05, 2020 Aug 05, 2020

Copy link to clipboard

Copied

I am working on DreamWeaver Version 20.2 but I cant find a way to center the image on Carousel, I know its something really easy just adding a line in boostrap-4.4.1css could some one help me out in order to get this silved, thank you in advance.

TOPICS
Bootstrap , Code , How to

Views

505

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Aug 05, 2020 Aug 05, 2020

Try this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Latest Bootstrap 4.5.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="backg
...

Likes

Translate

Translate
LEGEND ,
Aug 05, 2020 Aug 05, 2020

Copy link to clipboard

Copied

Not a Bootstrap user myself but try adding 'text-center' to the 'carousel-inner' div:

 

<div class="carousel-inner text-center ">

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 05, 2020 Aug 05, 2020

Copy link to clipboard

Copied

<!-- Carousel Inicio -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" style="background-color: black">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-50" src="images/card-img.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="images/forex_en_mexico_bull_bear.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="images/Carousel_Placeholder.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Carousel Fin -->

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 05, 2020 Aug 05, 2020

Copy link to clipboard

Copied

With Bootstrap, there are various kinds of centering classes:

  • text-center to center display-inline elements & column content
  • mx-auto for centering inside flex elements
  • offset-* or mx-auto can be used to center columns (col-)
  • justify-content-center to center columns (col-*) inside row

If you show us your code, we can be more specific.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 05, 2020 Aug 05, 2020

Copy link to clipboard

Copied

<!-- Carousel Inicio -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" style="background-color: black">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-50" src="images/card-img.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="images/forex_en_mexico_bull_bear.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="images/Carousel_Placeholder.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Carousel Fin -->

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 05, 2020 Aug 05, 2020

Copy link to clipboard

Copied

Try this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Latest Bootstrap 4.5.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background: black">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="d-block mx-auto" src="https://dummyimage.com/500x350" alt="Placholder 1">
<div class="carousel-caption">
<h5>Slide #1</h5>
<p>Caption #1</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="https://dummyimage.com/500x350" alt="Placholder 2">
<div class="carousel-caption">
<h5>Slide #2</h5>
<p>Caption #2</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="https://dummyimage.com/500x350" alt="Placholder 3">
<div class="carousel-caption">
<h5>Slide #3</h5>
<p>Caption #3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" 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="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 05, 2020 Aug 05, 2020

Copy link to clipboard

Copied

LATEST

Nancy O´Shea, ACP,

 

Thank you so much for the code, it worked!!! Also I did try with my code I did add up the "mx-auto" left the code like this:

<div class="carousel-item">
<img class="d-block w-50 mx-auto" src="images/forex_en_mexico_bull_bear.jpg" alt="Second slide">
</div>

 

So its working as wel thank you so much!!!!!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines