Topic: How to have widgets with spacings between them
Parascus free asked 3 weeks 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 3 weeks 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