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

Question

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

Yasaman.Mansouri · Answer 1 · 2020-09-27T08:39:32.887

2

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>

edited Sep 27 '20 at 08:39

answered Sep 27 '20 at 08:04

Yasaman.Mansouri

550
1
3
13

1

Thank you Yasaman, based on the CMS I have, I cant change the HTML or change the class based on the row. So every html markup would need to be the same and achieve this ony in CSS alone. – IEnumerable Sep 27 '20 at 08:25
I delete changes of html and you can just use css. – Yasaman.Mansouri Sep 27 '20 at 08:41
Thank you again Yeasaman, still only problem with the css is that I have bootstrap and I would be relectant to change or modify the default bootstrap classes. My codepen for this is https://codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100 – IEnumerable Sep 27 '20 at 08:58

score 1 · Accepted Answer · answered Sep 27 '20 at 09:18

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>

Hey Mehedi, this worked, I added ".checker:nth-of-type(even) .text-wrapper { float:right !important; }" to ensure that the text was also flowing but this solved it. Thank you — IEnumerable, Sep 27 '20 at 09:30
you can also add flex-direction: row-reverse; to your .checker:nth-of-type(even), it will also work — Mehedi Hasan Siam, Sep 27 '20 at 09:33
Live demo: using row-reverse https://000541203.production.codepen.plumbing/ — Mehedi Hasan Siam, Sep 27 '20 at 09:36

score 0 · Answer 3 · answered Sep 27 '20 at 08:04

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>

This is close to what I need. I realise that something is wrong with my nth(even) or nth-child(odd). The checker class is on every row, so the CSS would need to select every second ".checker" as every second sibling — IEnumerable, Sep 27 '20 at 08:24
I looked up a psuedo selecter ".nth-of-type(even)". Still no luck but I think its getting close to being what I need — IEnumerable, Sep 27 '20 at 08:31
Not yet, still cant get it as I need. I have a codepen https://codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100 — IEnumerable, Sep 27 '20 at 08:57

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

Full example

3 Answers3