How to align image of the Bootstrap carousel?

Question

How to align image of the Bootstrap carousel?

Navigation

#1 by (1 votes)

0

I would like to know how do I centralize the images (or the slider) of the carousel in bootstrap 4?

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

	  <!-- The slideshow -->
	  <div class="carousel-inner center-block">
	    <div class="carousel-item active">
	      <img src="https://www.adminserver.com.br/imagens_banner/1274.png"alt="Los Angeles">
	    </div>
	    <div class="carousel-item">
	      <img src="https://www.adminserver.com.br/imagens_banner/1275.png"alt="Chicago">
	    </div>
	  </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>

I wish she would stay like this

Butitlookslikethis...

html css twitter-bootstrap bootstrap-4

asked by anonymous 16.05.2018 / 18:36

1 answer

Redirect to page after API consumption Check how many Products were sold in the year 2017

score 1 · Answer 1

Is this what you're looking for?

$('.carousel').carousel()

.navbar {
 background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

<div class="container">
   <div class="row">
      <div id="demo" class="carousel slide" data-ride="carousel">

	  <!-- The slideshow -->
	  <div class="carousel-inner center-block">
	    <div class="carousel-item active">
	      <img class="d-block w-100" src="https://www.adminserver.com.br/imagens_banner/1274.png"alt="Los Angeles">
	    </div>
	    <div class="carousel-item">
	      <img class="d-block w-100" src="https://www.adminserver.com.br/imagens_banner/1275.png"alt="Chicago">
	    </div>
	  </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>
 </div>