Михаил Р.

если bootstrap ее ограничивает

видимо бутстрап такого не предусматривает

<div class="container"> <!-- max-width: 1200px -->
	<div class="row">content</div>
</div>

<div class="container-fluid"> <!-- max-width: 100% -->
	<div class="row">content</div>
</div>

.dropdown:hover>.dropdown__container {
  visible: visible;
  opacity: 1;
  pointer-events: all;
}

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, shrink-to-fit=no">

зачем нужен препроцессор sass если css нормальный

.container {
width:100%;
height:100%;
background:grey;
background-position: 0% 50%;
}

<div class="container" >
<svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="none" >
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <polygon points="0,1 0,0.5  0.5,0.67 1,0.5 1,1"></polygon>
    </clipPath>
  </defs>
  <image xlink:href="http://placeimg.com/400/300/any" clip-path="url(#clip)" width="100%" height="100%" />
</svg>
</div>

<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1200 600" preserveAspectRatio="xMinYMin meet" >

<rect id="rectFon" width="100%" height="100%"  />
<path id="rightLine" d="M1197 261 600.25624 376.79371c0 0 0 21.41258-0.25624 23.20629l597-113z"  />
<path id="leftLine" d="M0 261 661.53747 388.79371 598.97502 400.51249 0 287Z"/>
</svg>  
</div>

.container {
width:100%;
height:100%;
}
#rectFon{
fill:black;
}

#rightLine {
fill:#ffa896;
stroke-width:4;
stroke:#ffa896";
}
#leftLine{
fill:#ca432b;
stroke-width:4;
stroke:#ca432b;
}

*, :before {
  -webkit-transition:  all 0.2s ease-in-out;
  -moz-transition:  all 0.2s ease-in-out;
  -o-transition:  all 0.2s ease-in-out;
  -ms-transition:  all 0.2s ease-in-out;
  transition:  all 0.2s ease-in-out;