Add margin or padding to React-Bootstrap's Form.Label

Question

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.

How it looks now:

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".

The first thing I tried was adding a CSS stylesheet using className="formLabel" with the style for .formLabel being: padding: 10px. But that doesn't actually push the other elements away as with regular CSS. Instead I get this:

(Border added to make it easier to see what's going on)

I tried adding style={{ paddingBottom: "10px" }} as well in the style of this thread. I also read the React Bootstrap Forms docs page but found no mention of how to style a <Form.Label> element.

So suppose you want to replicate what I've done in those images, see the code below:

// 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
               <Form>
                    <Form.Label className="formLabel">
                        Frontend Frameworks
                    </Form.Label>
                    {this.state.checked.map((obj, index) => {
                        let box = null;
                        if (obj.category === "framework") {
                            box = (
                                <Form.Check
                                    inline
                                    label={Object.keys(obj)[0]} // returns values like "vue"
                                    type={"checkbox"}
                                    id={index}
                                />
                            );
                        }
                        return box;
                    })}
                </Form>
                <Form>
                    <Form.Label className="formLabel">Frontend</Form.Label>
                    {this.state.checked.map((obj, index) => {
                        let box = null;
                        if (obj.category === "frontend") {
                            box = (
                                <Form.Check
                                    inline
                                    label={Object.keys(obj)[0]} // returns values like "vue", "react"
                                    type={"checkbox"}
                                    id={index}
                                />
                            );
                        }
                        return box;
                    })}
                </Form>
        )
    }

export default Homepage;

// home.css

.formLabel {
    font-size: 18px;
    margin-bottom: 15px;
}

.testLabel {
    font-size: 18px;
    padding: 10px;
    border: 1px solid black;
}

Answer 1

Try to add "display" to "formLabel" in your stylesheet. It should be something like this:

.formLabel {
    font-size: 18px;
    margin-bottom: 15px;
    padding: 20px;
    display: inline-block;
}