Fullwidth Section

Fullwidth Section or image in a container with limited width

by Rubbel De Katz

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container" stlye="background: #f0f0f0;">
  <div class="row">
    <div class="col">
      <h1>
      Ein Blindtext
      </h1>
      <blockquote>
      <i>Beispiel mit Bootstap 4. Der Contaimer ist zu Demonstrationszwecken auf 560 Pixel beschränkt. Um den Effekt zu verdeutlichen die Breite der HTML Ausgabe verändern.</i>
      </blockquote>      
      <p>Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen. Erstens: wir haben nicht offensiv gespielt.</p>
      <div class=" fullwidth">
  <img src="https://www.feenders.de/images/testbanner.jpg" alt="Testbanner" class="img-fluid" style="width: 100%;">
  </div>
  <p>Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern. Letzte Spiel hatten wir in Platz drei Spitzen: Elber, Jancka und dann Zickler. Wir müssen nicht vergessen Zickler.</p>
  <p>Zickler ist eine Spitzen mehr, Mehmet eh mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke. Offensiv, offensiv ist wie machen wir in Platz.</p>
  <div class=" fullwidth section">
    <div class="container">
      <h3>Fußball</h3>
      <p>Es gibt unterschiedliche und viele Überlieferungen über die Anfänge des Fußballspieles. Schon etwa im 3. Jahrhundert v. Chr. wurde in China ein fußballähnliches Spiel mit dem Namen Cuju (Ts’uh-küh) ausgetragen.</p>
    </div>
  </div>
  <p>Zweitens: ich habe erklärt mit diese zwei Spieler: nach Dortmund brauchen vielleicht Halbzeit Pause. Ich habe auch andere Mannschaften gesehen in Europa nach diese Mittwoch. Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein Idiot!</p>
 ...

CSS

body {
  background: #ffffff;
  padding: 20px;
}

.container {
  max-width: 560px;
}

/* Beispiel für container in voller breite */
.fullwidth {
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
  width: calc(100vw - 10px);
  margin-left: calc(-50vw + 5px);     
  left: 50%;
}

/* Beispiel für inhalt in voller breite */
.section {
  background: #2a2a33;
  color: #ffffff;
  padding: 15px;
}