1

Note: I've already tried the approaches mentioned in this question but none of them worked in my case.

Here's the link to my pagination component - pagination.jsx

I wish to align the pagination component in the centre of the page having responsive behaviour, how can I achieve it? I'm using material-ui and mdbootstrap both.

Expected Output

enter image description here

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Raghav Sharma
  • 141
  • 2
  • 13
  • 1
    There are many forms, but just this solve.
    ...
     – Jairon Alves Lima May 08 '20 at 18:37
  • What forms @JaironAlvesLima, it worked! :D, Thanks for the rescue. – Raghav Sharma May 08 '20 at 19:01
  • @JaironAlvesLima, you could also write it in answer, I would accept it! – Raghav Sharma May 08 '20 at 19:02
  • 1
    Thanks, but your doubt has a lot to do with styling and positioning your components with React. This issue is widely addressed in the community. An elaborate answer to your question would come from that point. In case you are using Material-UI and MD Bootstrap, these are similar and also deal well with this theme with their layout and styling systems. https://material-ui.com/components/grid/ - https://mdbootstrap.com/docs/react/layout/grid-usage/ – Jairon Alves Lima May 08 '20 at 19:38
  • Thank you for the links, @JaironAlvesLima. Yes, I'm just a beginner with this and I was struggling so badly with it. Thanks to the awesome community for rescuing me! – Raghav Sharma May 09 '20 at 08:48

1 Answers1

7

I don't know if you've already found the answer, but I would use Material-UI's Box component.

The code below will center the pagination component and add some top and bottom margin to place it further down like it seems you want in your picture.

<Box my={2} display="flex" justifyContent="center">
  <Pagination count={10} showFirstButton showLastButton />
</Box>
SeaMauFive
  • 101
  • 2
  • 6