Topic: Col and Row components

Belovol pro asked 5 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?

Anna Morawska staff answered 5 years ago


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

Belovol pro answered 5 years ago


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

Anna Morawska staff answered 5 years ago


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 5 years ago

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


Anna Morawska staff answered 5 years ago


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


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

  • 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