How to align image of Carousel Bootstrap?

Asked

Viewed 3,804 times

0

I wonder, how do I center the Carousel images (or slider) 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’d stay like this a

But it stays that way... inserir a descrição da imagem aqui

html css twitter-bootstrap bootstrap-4

  • Jhonattan reading your conversation with in Leandro’s answer I think I understand better what you want. After a glance at my reply I did an edit on it, I just put the standard Bootstrap Row class in the slider div and got 100% wide with centered image.

  • Try to place the class "self-align-items" inside your Carousel div.

4 answers

1

This is what you want?

$('.carousel').carousel()
.navbar {
 background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="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>

  • No. There in the case is limited with the container. I want the slide 100% width but centered on the page, when I zoom in on the page it is in the left corner, in the two prints I attached were with a 50% zoom. The Carousel image is not centered, it is left aligned, which should be Bootstrap’s default

  • See if what Hugo did helps you, because I don’t understand how you want width 100% but centralized.

  • This is the slide from the site: https://i.imgur.com/ptt44KV.png ### This is the slide on my host site: https://i.imgur.com/nKnVX5z.png I want to center this slide image, the prints I put on my post are 50% zoomed in on the pages.

  • The image resolution is very large?

  • This is the image size: 1904 x 290px

  • Guy thinking it’s the size of the image, because in the bootstrap has nothing that subjects the image to either side.

Show 1 more comment

1

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#corNavbar02" aria-controls="corNavbar02" aria-expanded="false" aria-label="Alterna navegação">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="corNavbar02">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(Página atual)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Destaques</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Preços</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sobre</a>
        </li>
      </ul>
      <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Pesquisar" aria-label="Pesquisar">
        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Pesquisar</button>
      </form>
    </div>
  </nav>
</header>

<div class="container">
   <div class="row">
      <div class="col"></div>
         <div class="col-6">
           <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>
      </div>
      <div class="col"></div>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

not understood, all this storm just to centralize, this Voce makes using up <center></center>, if you want responsive, why not use grid ?

copy the code below and paste it on your website

<div class="container">
   <div class="row">
      <div class="col"></div>
         <div class="col-6">
           <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>
      </div>
      <div class="col"></div>
   </div>
</div>

keep <div class="col"></div>, serves as margin, unless you want to have three columns, then you put the content between the Divs.

Set the margin as follows (replacing the class col):

Largura máxima do container:  (auto) |   540px  |   720px  |   960px    |   1140px
Prefixo em classe              .col- | .col-sm- | .col-md- |  .col-lg-  |  .col-xl-

You can use 1 to 6, for example: .col-sm-4, to approach the next class, or keep .col-sm to allow the browser to decide.

0

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">

<style type="text/css">

    .flex{

        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 auto;
    }


</style>


<div class="flex">

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

        <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" width="100%">

            </div>
            <div class="carousel-item">

                <img src="https://www.adminserver.com.br/imagens_banner/1275.png" alt="Chicago" width="100%">

            </div>

        </div>


        <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>          

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

-1

If you just want to center the image:

.carousel-inner> .item> img { 
margem: auto; 
}

Browser other questions tagged html css twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.