Topic: MdbCol Spacing
Hi,
1) I need to have a button fully left justified inside a grid. When I use just a DBRow, it works correctly but when I add a MDBCol, there is no way that I can adjust it to left side of the column.
I tried to use "start" as mentioned in the help file and also no-gutter but didn't work.
Do I have to import anything in order to use them?
2) Why after adding "size=xx" beside "sm=xx", it causes that column not to break to another row, is there any other setting to have at the same time?
Thanks in advance
Hello,
1) Button has 6px margin and Column has 15px padding (that is strictly forced by Bootstrap's grid) . So this example:
<MDBRow style={{ background: 'purple' }}>
<MDBCol style={{ background: 'silver' }}>
<MDBBtn>Some text</MDBBtn>
</MDBCol>
</MDBRow>
Will produce that layout:
One solution is to use style property (to not attach it globally), and set something like this:
<MDBRow style={{ margin: 0, background: 'purple' }}>
<MDBCol style={{ padding: 0, background: 'silver' }}>
<MDBBtn style={{ margin: 0 }}>Some text</MDBBtn>
</MDBCol>
</MDBRow>
Which will produce:
2) "size=xx" works as class="col-xx" in Bootstrap - so this setting works on the smallest screens.
Hope I helped. :)
Best,
Jakub
Thanks a lot Jakub for your answer, It was so helpful :)
Would please let me know why using "Start", "no-gutter" and many of the features has no effect. is there anything that I have to Import.
Can you please bring an example here for me.
Thanks in advance
Oh, actually, you could use no-gutters here. It should be added as className to the MDBRow component. There is no need to import anything more to use classes and utilities.
<MDBRow className="no-gutters" style={{ background: 'purple' }}>
<MDBCol style={{ background: 'silver' }}>
<MDBBtn style={{ margin: 0 }}>Some text</MDBBtn>
</MDBCol>
</MDBRow>
And start is just a flexbox alignment attribute (justify-content-start).
Best,
Jakub
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.4
- Device: MacBook
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No