bootstrap one column within container and other column extend to screen edge

Question

I want to achieve something like this.

I have tried container fluid and manually setting margin-left on the left column, but this is not 100%. I also tried different variations from this article, but this did not work either. https://css-tricks.com/full-width-containers-limited-width-parents/

Markup would be like this

<div class="container">
  <div class="row">
    <div class="col-md-6">left column</div>
    <div class="col-md-6">right column should extend to right screen edge</div>
  </div>
</div>

https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns — Paulie_D, Jan 10 '20 at 13:29

score 0 · Answer 1 · answered Jan 10 '20 at 13:44

0

If you are using bootstrap 4 + version, try below in your second div tag

<div class="col-md-6 text-md-right pr-md-0">right column should extend to right screen edge</div>

answered Jan 10 '20 at 13:44

Rajendar

1

This won't because there is also margin for container on both sides. – Mehmood Jan 10 '20 at 14:48
Try
– Rajendar Jan 10 '20 at 15:17
This way it left margin would be doubled because container has fixed width and mx auto. – Mehmood Jan 11 '20 at 10:43

Lalji Tadhani · Answer 2 · 2020-01-10T13:37:50.883

-1

try this way (Bootstrap 4)

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 offset-md-2">
      Content
    </div>
    <div class="col-md-6 text-md-right pr-md-0">
      Images
    </div>
  </div>
</div>

https://jsfiddle.net/lalji1051/9Lrhwboc/2/

edited Jan 10 '20 at 13:37

answered Jan 10 '20 at 13:30

Lalji Tadhani

14,041
3
23
40

Your fiddle does not seem to show the issue being resolved. – Paulie_D Jan 10 '20 at 13:42

bootstrap one column within container and other column extend to screen edge

2 Answers2