title: How can I override Bootstrap CSS styles?
body: <p>I need to modify <code>bootstrap.css</code> to fit my website. I feel it's better to create a separate <code>custom.css</code> file instead of modifying <code>bootstrap.css</code> directly, one reason being that should <code>bootstrap.css</code> get an update, I'll suffer trying to re-include all my modifications. I'll sacrifice some load time for these styles, but it's negligible for the few styles I'm overriding.</p>
  
  <p>Hw do I override <code>bootstrap.css</code> so that I <em>remove</em> the style of an anchor/class? For example, if I want to remove all the styling rules for <code>legend</code>:</p>
  
  <pre><code>legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
  }
  </code></pre>
  
  <p>I can just delete all that in <code>bootstrap.css</code>, but if my understanding about best practices on overriding CSS is correct, what should I do instead?</p>
  
  <p>To be clear, I want to remove all those styles of legend and use parent's CSS values. So combining Pranav's answer, will I be doing the following?</p>
  
  <pre><code>legend {
    display: inherit !important;
    width: inherit !important;
    padding: inherit !important;
    margin-bottom: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    border: inherit !important;
    border-bottom: inherit !important;
  }
  </code></pre>
  
  <p>(I was hoping there's a way to do something like the following:)</p>
  
  <pre><code>legend {
    clear: all;
  }
  </code></pre>