MdbCol Spacing

Topic: MdbCol Spacing

afshinshahpari@gmail.com free asked 5 years ago

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

Add comment

Jakub Mandra staff answered 5 years ago

1 0 Best answer

Hello,

1) Button has 6px margin and Column has 15px padding (that is strictly forced by Bootstrap's grid) .
So this example:

Will produce that layout:

One solution is to use <code>style</code> property (to not attach it globally), and set something like this:

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

Please insert min. 20 characters.

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

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

afshinshahpari@gmail.com free answered 5 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

afshinshahpari@gmail.com

100Support score
16Questions 2Answers 1Snippets