Make Bootstrap's Carousel both center AND responsive?
Now (on Boostrap 3+) it's simply:
.carousel-inner img {
margin: auto;
}
How can make bootstrap carousel center
You're simply missing one line of code:
.carousel {
margin: 0 auto;
}
The carousel is a <div>, which is a block-level element, so you centralise it by setting the horizontal margins to auto. The shorthand margin: 0 auto sets the top and bottom margins to 0 while setting the horizontal margins to auto.
Here's a working example (click 'Full page' after running the snippet):
.navbar.transparent.navbar-inverse .navbar-inner { border-width: 0px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; background-color: rgba(0, 0, 0, 0.0); background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0%, rgba(0, 0, 0, 0.00)), color-stop( 100%, rgba(0, 0, 0, 0.00))); background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);}
#Intro { display: inline-block;}
#topnavbar { top: 20px;}
.carousel { width: 600px; height: 400px; margin: 0 auto;}
.carousel-inner>.item>img { margin: 0 auto;}
div.c-wrapper { width: 100%; /* for example */ margin: auto;}
.carousel-inner>.item>img,.carousel-inner>.item>a>img { width: 100%; /* use this, or not */ margin: auto;}
.container { border: 1px;}<!DOCTYPE html><html lang="en">
<head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
<body> <div class="container" style="border:1px solid #cecece;"> <div id="Intro" class="col-md-offset-5"> LOGO </div> <nav id="topnavbar" class="navbar transparent"> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collection of nav links, forms, and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Product</a></li> <li><a href="#">Promo</a></li> <li><a href="#">Competition</a></li> <li><a href="#">Ladies Room</a></li> <li><a href="#">Need Help?</a></li> </ul> </div> </nav> <div class="c-wrapper"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="https://dummyimage.com/600x400/000/fff"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> <div class="item"> <img src="http://via.placeholder.com/350x150"> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </div> </div></body>
</html>Centering images (both vertically and horizontally) in Bootstrap 4 carousel
Here we go, you will need to add a <div> within the .carousel-item, and within that div your image will be placed. We are taking this mediator div to apply the flex centering effect.
If you try to apply flex classes such as d-flex on .carousel-item the carousel will not work as expected.
here I have added the <div class="parent d-flex justify-content-center"> which places the image within it to exact center of the div. Also you will have to give the div min-height equivalent to the .carousel-item OR some standard height for you carousel, so that it don't collapse if the inner image is smaller in size.
you can get to know more about flex here, also if you would like to try out with some examples go here.
#myCarousel { height: 100%; width: 100%;}
.carousel-indicators { margin-bottom: 8px;}
.carousel-indicators>li { width: 10px; height: 10px; border-radius: 100%;}
.carousel-inner { height: 100%; background-color: #213B74;}
.carousel-item { text-align: center;}
.parent { min-height: 200px;}
.carousel-item img { display: block; margin: auto;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><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>
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ul>
<div class="carousel-inner"> <div class="carousel-item active"> <div class="parent d-flex justify-content-center"> <img src="https://placehold.it/100x200/c0392b/000"> </div> </div> <div class="carousel-item"> <div class="parent d-flex justify-content-center"> <img src="https://placehold.it/200x100/c0392b/000"> </div> </div> <div class="carousel-item"> <div class="parent d-flex justify-content-center"> <img src="https://placehold.it/150x150/c0392b/000"> </div> </div> </div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div>Center images within bootstrap carousel
set display:inline-blockin img and set text-align:center in .item
check snippet below-
.tales { width: 100%;}.carousel-inner{ width:100%; max-height: 400x !important;}.item{text-align:center;}.carousel-inner img{display:inline-block !important;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol>
<!-- inner --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/1200x600/2c3e50/000" alt="Sample Image"> </div> <div class="item"> <img src="http://placehold.it/600x1200/d35400/000" alt="Sample Image"> </div> <div class="item"> <img src="http://placehold.it/600x600/c0392b/000" alt="Sample Image"> </div> </div>
<!-- controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>bootstrap carousel center image vertical and horizontal
We can achieve this using display table & display table cell.
.item row{ display:table;}
.img-center-vertical{ display:table-cell; vertical-align:middle; height:300px; float: inherit;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="container"> <div class="col-md-12 text-align-center"> <h2 class="bold_font">FEATURED PARTNERS</h2><br> </div> <div class="row"> <div class="col-xs-4"> <a href="../cards/list-partners.php"> <div class="hvrbox"> <img src="http://placehold.it/300/f44336/000000" class="img-responsive hvrbox-layer_bottom"> <div class=" hvrbox-mwc-orange hvrbox-layer_top hvrbox-layer_slideright"> <div class="hvrbox-text"> <h2>BROWSE<br>PARTNERS</h2> </div> </div> </div> </a> </div> <div class="col-xs-8"> <div id="imageCarousel" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" data-wrap="true"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-md-6 img-center-vertical"> <img src="http://placehold.it/300/f44336/000000" class="img-responsive"> </div> <div class="col-md-6 img-center-vertical"> <img src="http://placehold.it/200/f44336/000000" class="img-responsive"> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-6 img-center-vertical"> <img src="http://placehold.it/300/f44336/000000" class="img-responsive"> </div> <div class="col-md-6 img-center-vertical"> <img src="http://placehold.it/200/f44336/000000" class="img-responsive"> </div> </div> </div>
</div>
<a href="#imageCarousel" class="carousel-control left" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#imageCarousel" class="carousel-control right" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
</div> </div> </div>How do I align carousel image center with bootstrap?
Use this best answer
Make Bootstrap's Carousel both center AND responsive?
It can figure this question out perfectly.
Add this in Css
div.c-wrapper{
width: 80%; /* for example */
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}
Related Topics
How to Flatten Nested Divs to Display Them in a CSS Grid
Selecting the Last Element Among Various Nested Containers
Height Calculation by Browsers:Containing Blocks and Children
Why Use Schema.Org Microdata to Mark Up Web Page Elements
Bootstrap Navbar. When I Press the Button Nothing Happens
Disabling Safari Autofill on Usernames and Passwords
Can Comments Appear Before the Doctype Declaration
How to Apply an Opacity Without Affecting a Child Element with HTML/Css
How Do Change the Color of the Text of an <Option> Within a <Select>
How to Do Awesome Refreshless Page Changes Like Github Do
Why Does Chrome Incorrectly Determine Page Is in a Different Language and Offer to Translate
What's Default HTML/CSS Link Color
Html/CSS How to Add Image Icon to Input Type="Button"
Add a Pipe Separator After Items in an Unordered List Unless That Item Is the Last on a Line
How to Show Disable HTML Select Option in by Default
Equal Sized Table Cells to Fill the Entire Width of the Containing Table