Checkbox overlapping checkbox label

Question

I am trying to add checkboxes to a login page using code that I found at react-bootstrap.github.io

The problem I'm having is the checkbox is overlapping the label.

My code (register.js) is below

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import { request } from './services/Request';
import { Button, FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
//import { FormRow } from 'react-bootstrap/Form';
import "./Styles/register.css"

export const Register = () => {

    return (
        <div style={{display: "flex", justifyContent: "center"}}> 
        <h1> Register </h1>
            <div className="Register">
                <form onSubmit={handleSubmit}>
                   
                    </FormGroup>
                    <FormGroup controlId="email" bsSize="large">
                    <FormLabel>Email</FormLabel>
                    <FormControl
                        required
                        autoFocus
                        type="email"
                        //value={email}
                        onChange={ onChangeHandlerFn }
                    />
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                    <FormLabel>Password</FormLabel>
                    <FormControl 
                        required
                        autoFocus
                        type="password"
                        //value={password}
                        onChange={ onChangeHandlerFn }
                    />
                    </FormGroup>

                    <FormGroup controlId="password" bsSize="large">
          

                    {['checkbox'].map((type) => (
                        <div key={`default-${type}`} className="mb-3">
                          <FormCheck 
                            type={type}
                            id={`default-${type}`}
                            label={`I am an individual`}
                          />
                        </div>
                    ))}
                    <Button variant="primary" type="submit" block>Register</Button>

                    <span>
                        Have an account? 
                        <a href="/login"> Sign in</a>
                    </span>
                    <ul>
                        <li><Link to="/privacy">Privacy & Terms</Link></li>
                    </ul>
                </form>
            </div>
        </div>
    );

};

The problem is the checkboxes are overlapping their labels:

Here is my css:

@media all and (min-width: 480px) {
    .Register {
      padding: 60px 0;
    }
  
    .Register form {
      margin: 0 auto;
      max-width: 320px;
    }
  }

 ul {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
  }

Everything works, for the sake of length, I've done post all of the code.

Any help would be greatly appreciated.

Answer 1

What about adding to the left padding of the label so it clears the checkbox?

label {
  padding-left:15px;
}