Col and Row components

Topic: Col and Row components

Belovol pro asked 6 years ago

Can't find description of Col and Row component properties. Should guess using grid classnames description. These components are much more convenient for me and I'd like to use them, but I've forced to use div and className insted. Does this description exist?

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

Hi Belovol, we've introduced MDB prefix in our documentation because we have a plan to rename all of our component in the future. But first, we want our users to get used to the new syntax. So, you can still use components names without prefix, but someday it's going to be deprecated. Best, Ania

Add comment

Belovol pro answered 6 years ago

0 0 Best answer

It became much more usable. CSS tab is very very well. Will read throughout.

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

Hi Belovol, we've just updated gid docs. Please check it out (especially API tab). https://mdbootstrap.com/docs/react/layout/grid-usage/ https://mdbootstrap.com/docs/react/layout/grid-examples/ Best, Ania

Belovol pro commented 6 years ago

Why MDB prefix? What is the difference? Why not Col, Row?

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

Hi,

thank you for pointing this out. Indeed, we will have to update our documentation, we will try to update this section as soon as possible.

In general, it quite easy to use our components:

With <Col> component you can use these props, which are translated to css classes 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>You can read more about these classes in our <a href="https://mdbootstrap.com/react/layout/layout-grid/" target="_blank" >docs</a>.  If you have any question just ask here.</div>
<div>Best,</div>
<div>Ania</div>

Please insert min. 20 characters.

Hi, thank you for pointing this out. Indeed, we will have to update our documentation, we will try to update this section as soon as possible. In general, it quite easy to use our components: With <Col> component you can use these props, which are translated to css classes 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'

You can read more about these classes in our docs. If you have any question just ask here.

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

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: 4.7.1
Device: 4xIntel Core i7-4510U CPU @2 GHz
Browser: Google Chrome V- 68.0.3440.8
OS: openSUSE Leap 42.3
Provided sample code: No
Provided link: No

Belovol

Pro User 140Support score
8Questions 12Answers 0Snippets