How to display DIV to the left of another DIV using Bootstrap

IEnumerable Published at Java

IEnumerable

I want to create a page (HTML) in a checkerboard style, so the first row has the image to the left of the content and the second row has the image to the right of the content.

Semantically, I can change the structure of the HTML to achieve this but is there a way to do this purely with CSS + Bootstrap 4 so the HTML doe not need to change.

I originally had a class "left-img" and "right-img" to achieve this but with no success.

Currently I have this in my CSS, where every event element.

.checker:nth-child(even) .img-wrapper {
    float:right;
}
.checker:nth-child(odd) .img-wrapper {
    float:left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>



<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" alt="">
    </div>
</div>
<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" alt="">
    </div>
</div>

Full example

My codepen https://codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100

Mehedi Hasan Siam

you have to just add display: flow-root!important; in your .checker:nth-of-type(even)

.checker .img-wrapper img {
    width:100%;
    height:auto;
}

/* Set the default behaviour */
.checker .img-wrapper {
    padding: 0px!important
}
.checker .text-wrapper {
    padding: 0px!important
}

/* Help determin if we have the right widget */
.checker:nth-of-type(even) {
    background-color:#eeeeee;
    display: flow-root!important;
}


//margin 0 to row
.checker {
  margin-left: 0px!important;
  margin-right: 0px!important;
}
//padding 0 to col
.col-lg-6 {
  padding: 0px!important;
}
h2, .text {
  padding: 12px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
        </div>      
    </div>

  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
        </div>      
    </div>
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
        </div>      
    </div>
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
        </div>      
    </div>
  
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.