title: Styling components and react-bootstrap
body: <p>I'm fairly new to React and started checking out React-Bootstrap and the way the components are styled. The documentation clearly styles components with <code>variant</code>: </p>
  
  <pre><code>&lt;Button variant="primary"&gt;Success&lt;/Button&gt;
  </code></pre>
  
  <p>However, this code seems to work just as well with the traditional <code>className</code>. Functionally, and aesthetically, if I change the above code to something like,</p>
  
  <pre><code>&lt;Button className="bg-primary"&gt;Success&lt;/Button&gt;
  </code></pre>
  
  <p>the output is the exact same. Personally, I find using the <code>className</code> attribute much easier as I can write vanilla bootstrap classes like <code>btn btn-primary...</code> instead of different react-bootstrap classes. </p>
  
  <p>Is there any functional difference between the two and is there a reason to use <code>variant</code> over <code>className</code>?</p>