title: Bootstrap 4 - customized button with text and image on right, flexed for bootstrap
body: <p>I would like to create a div that is a button, and it includes a picture of a flag and a abv of a country, I've put some code in to what I want, but its not bootstrap's way, I'm struggling to get my head around it and how I can do this with bootstrap.</p>
  
  <pre><code>    &lt;div class="countrylink"&gt;
  &lt;div class="abvcountry"&gt;
      AFG
  &lt;/div&gt;
  
  &lt;div class="countryflag"&gt;
  &lt;img src="../../Downloads/afghanistan_texture.gif"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  
      
  
      
  
      
  
      
  
  
  
      
  
      
  
      
  
      
  
  
  <p>and here is the styling.</p>
  
  <pre><code>        .countrylink {
      position:relative;
      width: 260px;
      height: 60px;
      background:olivedrab;
      margin-left: 55px;
      margin-top: 20px;
      float:left;
  } 
  
  .abvcountry {
      position:absolute;
      display: inline;
      background-color:#FFBF55;
      width: 60px;
      background:tomato;
      height:60px;
      left:0px;
  }
  
  .countryflag {
          position: absolute;
          display: inline;
          background-color: #0FF;
          width: 200px;
          background: blue;
          left: 60px;
          height: 60px;
  }
  
  .countryflag img {
  width: 100%;
  height: 100%;
  }
  </code></pre>
  
  <p>I just feel it will look a lot better through Bootstrap when displayed on a mobile or tablet</p>