title: Add margin or padding to React-Bootstrap's Form.Label
body: <p>I am trying to style a React-Bootstrap form so that a few lists of checkboxes have properly outstanding headlines. I want the text "Frontend" "backend" "databases" etc to have a padding of about 10-20 pixels.</p>
  
  <p>How it looks now:</p>
  
  <p><img src="https://i.imgur.com/JHOVDGF.png" alt="How it looks now"></p>
  
  <p>This is not simple HTML/CSS, but what I would like to do is the equivalent of simply adding "padding: 10px" to the headlines "Frontend Frameworks, Frontend, Backend, Databases".</p>
  
  <p>The first thing I tried was adding a CSS stylesheet using <code>className="formLabel"</code> with the style for .formLabel being: <code>padding: 10px</code>. But that doesn't actually push the other elements away as with regular CSS. Instead I get this:</p>
  
  <p>(Border added to make it easier to see what's going on)
  <img src="https://i.imgur.com/cWgMgir.png" alt="It doesn&#39;t work!"></p>
  
  <p>I tried adding <code>style={{ paddingBottom: "10px" }}</code> as well in the style of <a href="https://stackoverflow.com/questions/54342227/how-to-add-padding-margin-in-react-bootstrap">this thread</a>. I also read the <a href="https://react-bootstrap.github.io/components/forms/" rel="nofollow noreferrer">React Bootstrap Forms docs page</a> but found no mention of how to style a <code>&lt;Form.Label&gt;</code> element.</p>
  
  <p>So suppose you want to replicate what I've done in those images, see the code below:</p>
  
  <pre><code>// this code should nicely generate a "Homepage" component to use in React
  import React, { Component } from "react";
  
  
  import { Form } from "react-bootstrap";
  
  import "./home.css";
  
  class Homepage extends Component {
      state = {
          checked: [
              { vue: false, category: "framework" },
              { angular: false, category: "framework" },
              { react: false, category: "framework" },
              { html: false, category: "frontend" },
              { css: false, category: "frontend" },
              { javascript: false, category: "frontend" },
              { python: false, category: "backend" },
              { SQLite: false, category: "database" }
          ]
      };
  
  
      render() {
          return (
                 // will generate the "framework" and "frontend" checkboxes
                 &lt;Form&gt;
                      &lt;Form.Label className="formLabel"&gt;
                          Frontend Frameworks
                      &lt;/Form.Label&gt;
                      {this.state.checked.map((obj, index) =&gt; {
                          let box = null;
                          if (obj.category === "framework") {
                              box = (
                                  &lt;Form.Check
                                      inline
                                      label={Object.keys(obj)[0]} // returns values like "vue"
                                      type={"checkbox"}
                                      id={index}
                                  /&gt;
                              );
                          }
                          return box;
                      })}
                  &lt;/Form&gt;
                  &lt;Form&gt;
                      &lt;Form.Label className="formLabel"&gt;Frontend&lt;/Form.Label&gt;
                      {this.state.checked.map((obj, index) =&gt; {
                          let box = null;
                          if (obj.category === "frontend") {
                              box = (
                                  &lt;Form.Check
                                      inline
                                      label={Object.keys(obj)[0]} // returns values like "vue", "react"
                                      type={"checkbox"}
                                      id={index}
                                  /&gt;
                              );
                          }
                          return box;
                      })}
                  &lt;/Form&gt;
          )
      }
  
  export default Homepage;
  
  </code></pre>
  
  <pre><code>// home.css
  
  .formLabel {
      font-size: 18px;
      margin-bottom: 15px;
  }
  
  .testLabel {
      font-size: 18px;
      padding: 10px;
      border: 1px solid black;
  }
  </code></pre>