Skip to main content
lemonade2
Known Participant
Oct 14, 2019 1:35 PM UTC
Answered

Images centered side-by side

Hello,

 

trying to put two images centered side-by-side. 

Here´s the code:

 

 <!-- Team Carousel Item 1 -->
 
 
   <div class="item">
            <div class="overlay"></div> 
            <img class="img-fluid mx-auto" src="img/agency/team/PK.jpg" alt="">
            <div class="team-caption">
              <h3>Pekka Koukkunen</h3>
              <hr class="colored">
              <p>Yrittäjä</p>
              <ul class="list-inline list-team-social">
                <li class="list-inline-item">
                   </li>
              </ul>
            </div>
          </div>
 
        <!-- Team Carousel Item 2 -->
 
           <div class="item">
            <div class="overlay"></div>
            <img class="img-fluid mx-auto" src="img/agency/team/LK.jpg" alt="">
            <div class="team-caption">
              <h3>Lisa Koukkunen</h3>
              <hr class="colored">
              <p>KLT</p>
              <ul class="list-inline list-team-social">
                <li class="list-inline-item">
                
                </li>
              </ul>
            </div>
          </div>
    This topic is closed to new replies. Start a new post to keep the conversation going.
    Nancy OShea
    Nancy OSheaCorrect answer
    Community Expert
    Oct 15, 2019 8:53 PM UTC

    Since you're using Bootstrap 4, you can use Flexbox for this.  See my demo below with more recent Bootstrap 4.3.1.

     

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4.3.1 Starter</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<!-- Team Section -->
<section class="page-section bg-light text-center" id="Info">
<h2>Me palvelemme Sinua</h2>
<p class="mb-0">Ota yhteyttä ja laitetaan yrityksesi kirjanpitoasiat kerralla kuntoon.</p>
<hr class="colored">

<!--Flex container-->
<div class="d-flex justify-content-around wow fadeIn"> 

<!--flex item 1-->
<div>
<img class="img-fluid mx-auto" src="https://dummyimage.com/200x200/" alt="placeholder">
<h3 class="team-caption">Pekka Koukkunen</h3>
<hr class="colored">
<p>Yrittäjä</p>
<ul class="list-inline list-team-social">
<li class="list-inline-item">Inline list item</li>
</ul>
</div>

<!--flex item 2-->
<div><img class="img-fluid mx-auto" src="https://dummyimage.com/200x200/" alt="placeholder">
<h3 class="team-caption">Lisa Koukkunen</h3>
<hr class="colored">
<p>KLT</p>
<ul class="list-inline list-team-social">
<li class="list-inline-item">Inline list item</li>
</ul>
</div>
<!--/flex container--></div>
<!--/end section--></section>

<!--first jQuery then popper then Bootstrap js--> 
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
    Nancy O'Shea— Product User & Community Expert
    View reply

    7 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    Oct 15, 2019 8:53 PM UTC

    Since you're using Bootstrap 4, you can use Flexbox for this.  See my demo below with more recent Bootstrap 4.3.1.

     

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4.3.1 Starter</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<!-- Team Section -->
<section class="page-section bg-light text-center" id="Info">
<h2>Me palvelemme Sinua</h2>
<p class="mb-0">Ota yhteyttä ja laitetaan yrityksesi kirjanpitoasiat kerralla kuntoon.</p>
<hr class="colored">

<!--Flex container-->
<div class="d-flex justify-content-around wow fadeIn"> 

<!--flex item 1-->
<div>
<img class="img-fluid mx-auto" src="https://dummyimage.com/200x200/" alt="placeholder">
<h3 class="team-caption">Pekka Koukkunen</h3>
<hr class="colored">
<p>Yrittäjä</p>
<ul class="list-inline list-team-social">
<li class="list-inline-item">Inline list item</li>
</ul>
</div>

<!--flex item 2-->
<div><img class="img-fluid mx-auto" src="https://dummyimage.com/200x200/" alt="placeholder">
<h3 class="team-caption">Lisa Koukkunen</h3>
<hr class="colored">
<p>KLT</p>
<ul class="list-inline list-team-social">
<li class="list-inline-item">Inline list item</li>
</ul>
</div>
<!--/flex container--></div>
<!--/end section--></section>

<!--first jQuery then popper then Bootstrap js--> 
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
    Translate
    Nancy O'Shea— Product User & Community Expert
      lemonade2Author
      Known Participant
      Oct 22, 2019 8:30 AM UTC

      Thanks!

       

       

      Translate
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      Oct 14, 2019 8:16 PM UTC

      Start by fixing your code errors.  You have quite a few unclosed tags that effect the display in browsers.  So fix those first and then we will re-examine the other issues.  See link below for details.

      https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.lemonworks.com%2Ftest2%2F

      Translate
      Nancy O'Shea— Product User & Community Expert
        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        Oct 14, 2019 5:15 PM UTC

        Code snippets don't tell the whole story.  As Jon said, post the URL to your problem page online.  Before I can make suggestion, I need to know exactly which version of Bootstrap you're using among other things.   The online page tells us all we need.

        Translate
        Nancy O'Shea— Product User & Community Expert
          lemonade2Author
          Known Participant
          Oct 14, 2019 6:04 PM UTC
          Hi,
          Translate
          Jon Fritz
          Community Expert
          Jon FritzCommunity Expert
          Community Expert
          Oct 14, 2019 2:10 PM UTC

          That's not the code you need to change. You will need to make modifications to your page's .css stylesheet to get those two item <div> tags to sit side by side.

          If you post a link to your work in progress, the contributors here will be able to offer you guidance much more quickly.

          Translate
            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices