• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Center Images in Reduced Sized Carousel

New Here ,
Jan 24, 2022 Jan 24, 2022

Copy link to clipboard

Copied

Hi Everyone,

 

I looked eveywhere for a soution, but maybe I am not understanding the CSS syntax as I am pretty new at coding; but I am having trouble centering images in a carousel when it is reduced in resposive width. How could I do this? I am pretty sure I need to modify or add a class but unsure at this point.

 

My code is visible below, but can be viewed live at (link removed by moderator). Example of uncentered image below:

 

Screenshot 2022-01-24 235117.png

 

All help is appicated!

 

HTML

 

<aside>
	<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color:rgba(255,255,255,0.75)">
    <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="mx-auto d-block" src="images/stock_assets/AdobeStock_261250340_Sustainablity.jpeg" alt="First slide" style="width: 640px; height: auto">
        <div class="carousel-caption">
          <h5>First slide Heading</h5>
          <p>First slide Caption</p>
        </div>
      </div>
      <div class="carousel-item"> <img class="mx-auto d-block" src="images/stock_assets/AdobeStock_183600437_Shared.jpeg" alt="Second slide" style="width: 640px; height: auto">
        <div class="carousel-caption">
          <h5>Second slide Heading</h5>
          <p>Second slide Caption</p>
        </div>
      </div>
      <div class="carousel-item"> <img class="mx-auto d-block" src="images/stock_assets/AdobeStock_447959775_Co-Op.jpeg" alt="Third slide" style="width: 640px; height: auto">
        <div class="carousel-caption">
          <h5>Third slide Heading</h5>
          <p>Third slide Caption</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>
	</aside>

 

 

CSS

 

aside {
    float: left;
    width: 47%;
    margin-left: 2%;
    margin-right: 1%;
    padding-top: 1.5%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    margin-top: 20px;
    padding-bottom: 1.5%;
    margin-bottom: 20px;
}

 

 

TOPICS
Bootstrap , Code , How to

Views

181

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

Community Expert , Jan 25, 2022 Jan 25, 2022

Bootstrap 4 uses Flexbox for alignment, not floats. And Carousels are block level (full width) elements. 

Your're complicating matters by putting your Carousel inside a floated container. 

It would be best to use 2 columns aligned with Flexbox and get rid of the floats.

 

<div class="container">

<div class="row">

 

<div class="col-lg-6">

Column 1

</div>

 

<div class="col-lg-6">

Column 2

</div>

 

</div>

</div>

 

Votes

Translate

Translate
LEGEND ,
Jan 25, 2022 Jan 25, 2022

Copy link to clipboard

Copied

Add the 'img-fluid' class to the other classes you have set on the img.

 

That should make the image responsive which will maintain its aspect ratio when the browser viewport is widened and narrowed.

Votes

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
New Here ,
Jan 25, 2022 Jan 25, 2022

Copy link to clipboard

Copied

LATEST

I appreciate the help on this, thank you for the input.

Votes

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 Expert ,
Jan 25, 2022 Jan 25, 2022

Copy link to clipboard

Copied

Bootstrap 4 uses Flexbox for alignment, not floats. And Carousels are block level (full width) elements. 

Your're complicating matters by putting your Carousel inside a floated container. 

It would be best to use 2 columns aligned with Flexbox and get rid of the floats.

 

<div class="container">

<div class="row">

 

<div class="col-lg-6">

Column 1

</div>

 

<div class="col-lg-6">

Column 2

</div>

 

</div>

</div>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
New Here ,
Jan 25, 2022 Jan 25, 2022

Copy link to clipboard

Copied

Thank you so much for the help! I appreciate being pointed in the right direction on this.

Votes

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