how to use grid system in react

Topic: how to use grid system in react

MING WU pro asked 5 years ago

i noticed that some components like forms using Col, Row, Container. Unfortunately, I cannot find any tutorials that teach me how to use them. some uses className. This is very confusing. How to learn your grid system like Row, and Col?

Add comment

Anna Morawska staff answered 5 years ago

0 1 Best answer

Please insert min. 20 characters.

Sure, as I've mentioned we have to do this, we are working right now on improving our entire documentation, but it takes time. Sorry for the inconvenience. Grid documentation is a priority for us. It should be updated soon.

Yes, you are rigt, there is a small bug in our Select snippet, everything should be wrapped in one parent element, e.g. div. It should fix the problem. I've just tested it, and it looks like everything works fine. What error do you get?

Best,

Ania

Add comment

Anna Morawska staff answered 5 years ago

1 0 Best answer

Hi there,

thank you for pointing this out. Indeed, we will have to update our documentation accordingly.

In general, it quite easy to use our components:

With <Col> component you can use these props, whick are translated to css clases as shown bellow:
<pre class="code-toolbar grey lighten-2 p-3 mb-3">size  ->   'col-' + size  e.g. <Col size="4"> adds to your container class .size-4
sm ->   'col-sm-' + sm  e.g. <Col sm="4"> adds to your container class .size-sm-4
md ->   'col-md-' + md  e.g. <Col md="4"> adds to your container class .size-md-4
lg ->   'col-lg-' +lg  e.g. <Col lg="4"> adds to your container class .size-lg-4 
xl ->   'col-xl-' +xl  e.g. <Col xl="4"> adds to your container class .size-xl-4</pre>
<div></div>
<div>With <Row> component you can use props, whick are translated to css clases as shown bellow (by defoult it has row class) :</div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">end ->  <Row end> adds to your container class .justify-content-end'
start ->  <Row start> adds to your container class .justify-content-start'
center ->  <Row center> adds to your container class .justify-content-center'
between ->  <Row between> adds to your container class .justify-content-between'
around ->  <Row around> adds to your container class .justify-content-around'</pre>
<div></div>
<div>So, as you can see, those are quite simple components You can read more about these classes in our <a href="https://mdbootstrap.com/react/layout/layout-grid/" >docs</a>.  If you have any question just ask here.</div>
<div></div>
<div>Best,</div>
<div>Ania</div>

Please insert min. 20 characters.

Hi there, thank you for pointing this out. Indeed, we will have to update our documentation accordingly. In general, it quite easy to use our components: With <Col> component you can use these props, whick are translated to css clases as shown bellow:

size  ->   'col-' + size  e.g. <Col size="4"> adds to your container class .size-4
sm ->   'col-sm-' + sm  e.g. <Col sm="4"> adds to your container class .size-sm-4
md ->   'col-md-' + md  e.g. <Col md="4"> adds to your container class .size-md-4
lg ->   'col-lg-' +lg  e.g. <Col lg="4"> adds to your container class .size-lg-4 
xl ->   'col-xl-' +xl  e.g. <Col xl="4"> adds to your container class .size-xl-4

With <Row> component you can use props, whick are translated to css clases as shown bellow (by defoult it has row class) :

end ->  <Row end> adds to your container class .justify-content-end'
start ->  <Row start> adds to your container class .justify-content-start'
center ->  <Row center> adds to your container class .justify-content-center'
between ->  <Row between> adds to your container class .justify-content-between'
around ->  <Row around> adds to your container class .justify-content-around'

So, as you can see, those are quite simple components You can read more about these classes in our docs. If you have any question just ask here.

Best,

Ania

MING WU pro commented 5 years ago

You definitely need to update the documentation not just in grid parts. I do not think your explanation is clear. For example, how many cols in a row, how to adjust the size of a col, how to adjust the gaps between cols. For a completely beginner to your css framework, it is really hard to follow. ----------- I also found another error in select component. You have to wrap everything in one parent element. The following code is absolutely not working in react. You need to wrap them in a

or . I manually fixed this error in my file but the code is still not working. Please fix the error. import React from 'react' import { Select, SelectInput, SelectOptions, SelectOption } from 'mdbreact' class SelectPage extends React.Component { getSelectValue = (value) => { console.log(value); } render() { return( Example label ); } }; export default SelectPage;

You definitely need to update the documentation not just in grid parts.
I do not think your explanation is clear.  For example, how many cols in a row, how to adjust the size of a col, how to adjust the gaps between cols. 
For a completely beginner to your css framework, it is really hard to follow.
-----------
I also found another error in select component. You have to wrap everything in one parent element. The following code is absolutely not working in react. You need to wrap them in a <div></div> or <Fragment></Fragment>. I manually fixed this error in my file but the code is still not working. Please fix the error.

import React from 'react'
import { Select, SelectInput, SelectOptions, SelectOption } from 'mdbreact'

class SelectPage extends React.Component {
  getSelectValue = (value) => {
    console.log(value);
  }

render() {
    return(
      <Select getValue={this.getSelectValue}>
        <SelectInput selected="Choose your option"></SelectInput>
        <SelectOptions>
          <SelectOption disabled>Choose your option</SelectOption>
          <SelectOption>Option nr 1</SelectOption>
          <SelectOption>Option nr 2</SelectOption>
          <SelectOption>Option nr 3</SelectOption>
        </SelectOptions>
      </Select>
      <label>Example label</label>
    );
  }
};

export default SelectPage;

Please insert min. 15 characters.

MING WU pro commented 5 years ago

Hi Anna, Thanks for your reply. The documentation becomes much better to follow. Regards. Thanks

Ming

Anna Morawska staff commented 5 years ago

Hi there, nice to hear that, thank you! :) Best, Ania

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: macos
Browser: chrome
OS: 10.13
Provided sample code: No
Provided link: No

MING WU

Pro User 5Support score
1Questions 0Answers 0Snippets