full width .col- in .container > .row

Question

Is there a way to create a .col on a bootstrap page so that it goes all the way to the edge of it's container?

I would like the image in the example (which is in a .col-xs-12 inside a .row inside a .container) to use up all the space up until the edge of the container. I can solve this with pure JS resizing it as needed but I would prefer to solve this using pure CSS approach (if possible). As it is now I have tried several different variants of negative margins and relative positioning but all end up with it either not being perfectly aligned to the edge or messes something else up as well.

Here is a base example of how the page is coded: https://www.bootply.com/wVw5jnKa35

Answer 1

Here if you want to achieve your requirement than you can add custom class in your col-xs-12 class

Like this

HTML

<div class="col-xs-12 no-pad">
   <img class="FullWidth" src="http://calendar.volego.ru/img/users/wallpapers/20160215081029217.jpg">
</div>

CSS

.no-pad {
   padding: 0;
}

Answer 2

You don't need to define and use a custom class for this purpose. simply, At line 8, change:

<div class="col-xs-12">

to

<div>