title: Three column with image with Bootstrap
body: <p>I am using a Bootstrap layout that contains two columns. But now I want to have a little image to the right to an input field. The image has to appear next to the input field snippet.</p>
  
  <p>This is my html layout:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12 col-md-6"&gt;
          &lt;p&gt;Op deze pagina kun je de mail die aan nieuw personeel wordt verzonden aanpassen naar je eigen smaak. Pas de content aan en bekijk de preview van de mail voor het te verwachten resultaat.&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
  
          @Html.HiddenFor(m =&gt; m.Afzender, heeftSchrijfrechten)
  
          &lt;div class="property extra-margin"&gt;
              &lt;label&gt;Onderwerp&lt;/label&gt;
              @Html.EditorFor(m =&gt; m.Onderwerp, heeftSchrijfrechten)
          &lt;/div&gt;
  
          &lt;div class="property extra-margin"&gt;
              &lt;label&gt;Titel&lt;/label&gt;
              @Html.EditorFor(m =&gt; m.Titel, heeftSchrijfrechten)
          &lt;/div&gt;
  
          &lt;div class="property extra-margin"&gt;
              &lt;label&gt;Snippet&lt;/label&gt;
              @Html.EditorFor(m =&gt; m.Snippet, heeftSchrijfrechten)
          &lt;/div&gt;
  
          @*&lt;div class="col-sm-5" &gt;
              &lt;img src="~/Images/EmailTemplate_Snippet.png" /&gt;
          &lt;/div&gt;*@
  
          @if (Html.GebruikerContext().Klant.LogoIDSpecified)
          {
              &lt;div class="property wide extra-margin"&gt;
                  &lt;br /&gt;
                  &lt;label&gt;
                      Kies header logo
                  &lt;/label&gt;
                  &lt;div class="email-logo"&gt;
                      &lt;label&gt;
                          &lt;span class="email-logo-image" id="EmailTemplateCursor"&gt;
                              &lt;img src='/Beheer/Images/mainlogo_274x122.png' /&gt;
                          &lt;/span&gt;
                          &lt;span class="email-logo-button"&gt;
                              @Html.RadioButton("logo-selectie", "standaard", !Model.GebruikKlantLogo, new { @name = "logoKeuze" })
                              &lt;span&gt;standaard logo&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="email-logo"&gt;
                      &lt;label&gt;
                          &lt;span class="email-logo-image" id="EmailTemplateCursor"&gt;
                              &lt;img src='/Beheer/Document/Download?documentID=@(Html.GebruikerContext().Klant.LogoID)' /&gt;
                          &lt;/span&gt;
                          &lt;span class="email-logo-button"&gt;
                              @Html.RadioButton("logo-selectie", "klant", Model.GebruikKlantLogo, new { @name = "logoKeuze" })
                              &lt;span&gt;eigen logo&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          }
  
          &lt;div class="property"&gt;
              &lt;label&gt;Introductietekst&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="property"&gt;
              @Html.EditorFor(m =&gt; m.IntroductieTekst, "HtmlEditorEmailTemplate", heeftSchrijfrechten)
          &lt;/div&gt;
  
          &lt;div class="property"&gt;
              &lt;br /&gt; &lt;label&gt;Afzendertekst&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="property"&gt;
              @Html.EditorFor(m =&gt; m.AfzenderTekst, "HtmlEditorEmailTemplate", heeftSchrijfrechten)
          &lt;/div&gt;
  
          @if (heeftSchrijfrechten)
          {
              &lt;div class="navigatie alignRight"&gt;
                  @ButtonHelper.Button(ButtonType.Default, ButtonSize.Large, "Herstel standaard mail", id: "herstel-standaard", icon: "glyphicon-refresh")
                  @ButtonHelper.Button(ButtonType.Primary, ButtonSize.Large, Messages.Global_Action_Opslaan, "opslaan", icon: "glyphicon-floppy-save")
              &lt;/div&gt;
          }
      &lt;/div&gt;
  
  
      &lt;br /&gt;
      &lt;div class="col"&gt;
          &lt;img src="~/Images/EmailTemplate_Snippet.png" /&gt;
      &lt;/div&gt;
  
      &lt;div class="col-sm-12 col-md-6"&gt;
          &lt;div id="email-template-edit" class="panel panel-default basisViewEdit"&gt;
              &lt;div class="panel-heading panel-heading-sub"&gt;
                  Mail Preview
                  &lt;a id="previewEmail" href="#"&gt;
                      &lt;span class="glyphicon glyphicon-repeat right"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="preview-container"&gt;
              &lt;div id="preview" class="backgroundTemplateStyle"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to have a little image next to the snippet input field. I also added an image for clearness.</p>
  
  <p><a href="https://i.stack.imgur.com/fEexB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fEexB.png" alt="enter image description here"></a></p>
  
  <p>I have it now like this:</p>
  
  <pre><code>&lt;div class="property extra-margin input-group"&gt;
      &lt;label&gt;Snippet&lt;/label&gt;
      @Html.EditorFor(m =&gt; m.Snippet, heeftSchrijfrechten)
  
      &lt;div class="input-group-append"&gt;
          &lt;span class="input-group-text border-0 bg-white" id="snippet"&gt;
              &lt;i class="fa fa-info-circle" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it looks now like this:
  <a href="https://i.stack.imgur.com/2bnyv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2bnyv.png" alt="enter image description here"></a></p>