How to have widgets with spacings between them

Hello,

I'm evaluating which library of angular I should use. MDB5 looks really good.But I'm stuck on the first meters... I try to create a box with some input fields. because some of them should have the full width and some only half of it I try to use the col-classes of bootstrap. But doing this all input fields are glued to each other with no spacing between them. Using m-3 e.g. for a margin works but the fields will overflow the surrounding rectangle. How do I get some pixels distance between my fields?

The code is:

<div>
    <h3 class="mt-3" *ngIf="headerStyle=='BIG'">
        Register
        <hr>
    </h3>

    <div class="row justify-content-start">
        <mdb-form-control class="col-6 m-2">
            <input mdbInput type="text" id="firstname" class="form-control" />
            <label mdbLabel class="form-label" for="firstname">Firstname</label>
        </mdb-form-control>
        <mdb-form-control class="col-6 m-2">
            <input mdbInput type="text" id="lastname" class="form-control" />
            <label mdbLabel class="form-label" for="lastname">Lastname</label>
        </mdb-form-control>
        <mdb-form-control class="col-12 m-2">
            <input mdbInput type="email" id="email" class="form-control" />
            <label mdbLabel class="form-label" for="email">Email address</label>
        </mdb-form-control>
        <mdb-form-control class="col-6 m-2">
            <input mdbInput type="password" id="password" class="form-control" />
            <label mdbLabel class="form-label" for="password">Password</label>
        </mdb-form-control>
        <mdb-form-control class="col-6 m-2">
            <input mdbInput type="text" id="passwordrepetition" class="form-control" />
            <label mdbLabel class="form-label" for="passwordrepetition">Repeat password</label>
        </mdb-form-control>
    </div>
</div>

Best regards and thanks for your help

Parascus