title: Removing bootstrap styling from certain elements
body: <p>I've created mockups of elements with precise css styling.
  They work great! But I want to incorporate them into a bootstrap site.
  When they happens, they lose all the nice looking styling I've made:</p>
  
  <ul>
  <li>Is there a way to <strong>not use</strong> bootstrap css on certain classes within a bootstrap site?</li>
  </ul>
  
  <p>For example, here's the item with and without bootstrap:</p>
  
  <p>with bootstrap:</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>.pkmn-pc {
    color: white;
    margin: 10px;
    display: inline-block;
  }
  
  .pkmn-summary, .pkmn-info {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
  }
  
  .pkmn-summary {
    width: 193px;
    background: #745fb5;
    background: linear-gradient(15deg, #745fb5, #9a6dbb);
    border-radius: 5px 0 0 5px;
    box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
    white-space: nowrap;
    border-bottom: solid 5px grey;
    text-align: left;
    padding-left: 5px;
  }
  
  .pkmn-summary:after {
      content: '';
      position: relative;
      left: -182px;
      bottom: -31px;
      height: 5px;
      background: green;
      /**width: 73%;**/
      display: inline-block;
      border-radius: 0 0 0 5px;
  }
  
  .pkmn-summary:after {
    width: 73%;
  }
  
  .pkmn-info {
    background: #333538;
    border-radius: 0 5px 5px 0;
    width: 70px;
    text-align: center;
  }
  
  .pkmn-outer {
    padding-bottom: 2px;
  }
  
  .pkmn-inner {
    display: inline-block;
    width: 3px;
  }
  
  .pkmn-sprite {
    vertical-align: middle;
  }
  
  .pkmn-name {
    font-size: 1.2em;
  }
  
  .pkmn-lvl {
    font-size: 0.8em;
    display: block;
  }
  
  .crown {
    padding-top: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="pkmn-pc"&gt;
    &lt;div class="pkmn-summary"&gt;
        &lt;img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /&gt;
    &lt;code class="pkmn-name"&gt;15Characterssss&lt;/code&gt;
    &lt;/div&gt;
    &lt;div class="pkmn-info"&gt;
    &lt;img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /&gt;
      &lt;div class="pkmn-outer"&gt;
        &lt;img class="heart" src="https://image.ibb.co/kB8vi6/heart.png"&gt;
        &lt;div class="pkmn-inner"&gt;&lt;/div&gt;
        &lt;img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"&gt;
      &lt;/div&gt;
      &lt;code class="pkmn-lvl"&gt;lvl 100&lt;/code&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>without bootstrap</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>.pkmn-pc {
    color: white;
    margin: 10px;
    display: inline-block;
  }
  
  .pkmn-summary, .pkmn-info {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
  }
  
  .pkmn-summary {
    width: 193px;
    background: #745fb5;
    background: linear-gradient(15deg, #745fb5, #9a6dbb);
    border-radius: 5px 0 0 5px;
    box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
    white-space: nowrap;
    border-bottom: solid 5px grey;
    text-align: left;
    padding-left: 5px;
  }
  
  .pkmn-summary:after {
      content: '';
      position: relative;
      left: -182px;
      bottom: -31px;
      height: 5px;
      background: green;
      /**width: 73%;**/
      display: inline-block;
      border-radius: 0 0 0 5px;
  }
  
  .pkmn-summary:after {
    width: 73%;
  }
  
  .pkmn-info {
    background: #333538;
    border-radius: 0 5px 5px 0;
    width: 70px;
    text-align: center;
  }
  
  .pkmn-outer {
    padding-bottom: 2px;
  }
  
  .pkmn-inner {
    display: inline-block;
    width: 3px;
  }
  
  .pkmn-sprite {
    vertical-align: middle;
  }
  
  .pkmn-name {
    font-size: 1.2em;
  }
  
  .pkmn-lvl {
    font-size: 0.8em;
    display: block;
  }
  
  .crown {
    padding-top: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pkmn-pc"&gt;
    &lt;div class="pkmn-summary"&gt;
        &lt;img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /&gt;
    &lt;code class="pkmn-name"&gt;15Characterssss&lt;/code&gt;
    &lt;/div&gt;
    &lt;div class="pkmn-info"&gt;
    &lt;img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /&gt;
      &lt;div class="pkmn-outer"&gt;
        &lt;img class="heart" src="https://image.ibb.co/kB8vi6/heart.png"&gt;
        &lt;div class="pkmn-inner"&gt;&lt;/div&gt;
        &lt;img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"&gt;
      &lt;/div&gt;
      &lt;code class="pkmn-lvl"&gt;lvl 100&lt;/code&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>thanks!</p>