MdbCol Spacing


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


Jakub Mandra staff premium answered 6 years ago

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:

enter image description here

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:

enter image description here

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


Jakub Mandra staff premium answered 6 years ago

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>

enter image description here

And start is just a flexbox alignment attribute (justify-content-start).

Best,

Jakub


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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