Fix Size Buttons

afshinshahpari@gmail.com commented 6 years ago

Thanks Jakub,

I tried using "d-flex" but unfortunately it had no affect. is there any file to import or anything in the code that I have to do in order to use that.

I would appreciate to have a sample source code including other settings that I have to do in order to do that.

There are many other features that are in the help but unfortunately using them has no effect like using "start", "no-gutter", etc.

I thought there must be the same issue?

Thanks in advance for your advice

Jakub Mandra staff premium commented 6 years ago

Okay, that was my mistake, flex won't help here, unfortunately. I think the only way to do that is to fix the with of all the buttons.

class Buttons extends React.Component {
  render() {
    const style = { width: '200px' }
    return (
      <MDBContainer className="mt-5">
        <MDBRow>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some muuuuuuuuuuuuuuuuuuuuuuch longer text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some muuuuuuuuuuuuuuuuuuuuuuch longer text text text text text text text text text text text text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
          <MDBBtn style={style}>Some text</MDBBtn>
        </MDBRow>
      </MDBContainer>
    );
  }
}

export default Buttons;

Jakub Mandra staff premium commented 6 years ago

To combine more complex layout you could try to play with our new examples of Masonry layouts: https://mdbootstrap.com/docs/react/layout/masonry/

Best,

Jakub