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

user_692228 0
Viewed 226

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

bootstrap-4 css html
3 Answers

I wish this changes in css and html would help you!!!

.checker:nth-child(odd) > .col-lg-6:last-of-type{
    float:left !important;
}

.checker:nth-child(even) > .col-lg-6:first-of-type{
    float:left !important;

}

img{
  width:100px;
}

.col-lg-6{
  float:right;
}

.row{
  float:right;
  width:100%;
}
<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://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" 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://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
    </div>
</div>

user_75530710

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>

user_100186520

your CSS was correct, but if you need to align the image then you should call img to your css

.checker:nth-child(even) .img-wrapper img {
    float:right;
}
.checker:nth-child(odd) .img-wrapper img {
    float:left;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>



<div class="row m-0 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 m-0 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>

user_100186520
Related