Highlighted

Center image in Carousel boostrap-4.4.1css

Community Beginner ,
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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

 

TOPICS
Bootstrap, Code, How to

Views

56

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

Center image in Carousel boostrap-4.4.1css

Community Beginner ,
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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

 

TOPICS
Bootstrap, Code, How to

Views

57

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
Aug 05, 2020 0
LEGEND ,
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
Reply
Loading...
Aug 05, 2020 1
Community Beginner ,
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
Reply
Loading...
Aug 05, 2020 0
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Aug 05, 2020 0
Community Beginner ,
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
Reply
Loading...
Aug 05, 2020 0
Adobe Community Professional ,
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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Aug 05, 2020 0
Rogelio1 LATEST
Community Beginner ,
Aug 05, 2020

Copy link to clipboard

Copied

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
Reply
Loading...
Aug 05, 2020 1