Full width col on the left

Question

How can you force a col to expand to the full width on right which is inside a container

<div class="container">

    <div class="row">

      <div class="col-5">

        Lorem ipsum
      </div>

      <div class="col-7 img-col">
         <img class="img-fluid" src="https://placeimg.com/640/480/nature/sepia"/>
      </div>

    </div>

  </div>

I've tried to use position absolute on the right col but isn't going to stretch to the left

https://jsbin.com/cikuragaba/edit?html,output

Related if not duplicate - https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns — Paulie_D, Apr 09 '19 at 14:32

score 0 · Answer 1 · answered Apr 08 '19 at 20:28

.container {
  position: relative;
}

.img-col {
  position: fixed;
  right: 0px;
  width: 100%;
  top: 0;
}

.img-fluid {
  width: 100%;
}

This will set it to the full width but if you explain what you're trying to do I think there will be a better way than this to achieve it.

score 0 · Answer 2 · answered Apr 08 '19 at 20:30

0

I believe that the div is already at full width, but the image is not. Add this CSS:

.img-fluid {
    width: 100%;
}

answered Apr 08 '19 at 20:30

Kevin Vandy

401
3
10

score 0 · Answer 3 · answered Apr 08 '19 at 20:33

0

Use:

.img-col .img-fluid {
     width: 100%
}

This will make your image within the img-col 100% width. .img-fluid only specifies the max-width. Being specific with .img-col first doesn't make ALL .img-fluid 100% width.

answered Apr 08 '19 at 20:33

Howard E

5,454
3
15
24

Full width col on the left

3 Answers3