title: aligning text and images with bootstrap
body: <p>I'm new to learning bootstrap for web development and am designing a webpage that has a section that will be split by 2 different colors with an image in the middle covering both of the colored sections and a form on the right-hand side.</p>
  
  <p>these are the colors and how the section is split:</p>
  
  <p><a href="https://i.stack.imgur.com/5xlzB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5xlzB.png" alt="enter image description here"></a></p>
  
  <p>this is the code I have so far.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
  
  div.container-fluid
  {
      background-color: blue;
      padding-left: 150px;
  }
  div.container-fluid_1
  {
      background-color: #75838C;
      height: 450px;
  }
  h2
  {
      color: white;
      size: 30px;
      font-weight: bold;
      font-family: 'Roboto Condensed', sans-serif;
      text-align: left;    
      
  }
  p
  {
      color: white;
      size: 14;
      font-family: 'Roboto Condensed', sans-serif;
      font-style: normal;
      font-weight: 400;
      text-align: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="page"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="twristband"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"&gt;
                &lt;h2&gt;the heading for the text below&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;br&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"&gt;
                &lt;p&gt;this will have a bit of text here&lt;/p&gt;
              &lt;/div&gt;        
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="container-fluid_1"&gt;
          &lt;div class="bwristband"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"&gt;
                &lt;h2&gt;Hello&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"&gt;
      
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>any help would be appreciated with this as at the moment I have split the section but the other color doesn't display and currently have no idea how I would add the image to the page</p>