Topic: How to have widgets with spacings between them
                  
                  Parascus
                  free
                  asked 1 year ago
                
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
                      
                      Kamila Pieńkowska
                      staff
                        answered 1 year ago
                    
Margins add additional width outside of element. So normally two  col-6 would fit in single row, but if you add margin they don't anymore.
So you have a few options. You can wrap input fields in additional div like this:
  <div class="col-6">
    <mdb-form-control class="m-2">
      <input mdbInput type="text" id="firstname" class="form-control" />
      <label mdbLabel class="form-label" for="firstname">Firstname</label>
    </mdb-form-control>
  </div>
You can divide fields into rows and add gutter. Examples of forms with different layouts used: https://mdbootstrap.com/docs/angular/forms/overview/#section-layout
And here is a page on the alternative to margins way of setting space between elements:
https://mdbootstrap.com/docs/angular/layout/gutters/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB Angular
 - MDB Version: MDB5 7.0.0
 - Device: PC
 - Browser: Firefox
 - OS: Linux Mint
 - Provided sample code: No
 - Provided link: No