Full width block

with Bootstrap 4

by ondrejruzicka

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
<div class="container">
   
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nihil in ex nam eos, commodi, dolorum voluptatem beatae eligendi, libero, quae suscipit temporibus perferendis qui voluptas quis architecto porro. Expedita.</p>


  <div class="full-width-image">
    <img src="http://placehold.it/1200x150" alt="">
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magnam cupiditate minus, culpa omnis, nulla accusantium, id totam sit cumque distinctio vel ad assumenda porro odit illum est a! Libero!</p>
   
</div>

CSS

.full-width-image {
  width: 100vw;
  position: relative;
  left: 50%;  
  margin-left: -50vw;
}

.full-width-image img {
  width: 100%;
}