How to center pagination block with react-bootstrap

Question

I have built out a custom pagination setup for a small web-app I am building using react-bootstrap. I have got all the integration and pagination to work correctly. I am relatively new to react / bootstrap & have NOT done a lot of css. I want to avoid css to the extent possible, which is why I chose to work with react-bootstrap

The issue I am having is with not being able to make my pagination appear in the center of the block:

My react hook looks like this:

return (
        <div>
            <div align="center">
                <div className="p-3">
                    <Disclaimer/>
                </div>
                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>
                {custom_cards}
                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>
            </div>
        </div>
    );

I know the fix is here:

                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>

I have tried align and other things like text-center. Being new, I don't have the right keywords to power a good search result for me on web. If you have any leads here I would appreciate it.

Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Valerij, Oct 10 '20 at 21:23

score 5 · Answer 1 · answered May 28 '21 at 09:16

You can simply add these two CSS properties to a parent div:

style={{ display: "flex", justifyContent: "center" }}

<div style={{ display: "flex", justifyContent: "center" }}>
  <Pagination>
    <Pagination.First />
    <Pagination.Prev />
    <Pagination.Item>{1}</Pagination.Item>
    <Pagination.Ellipsis />

    <Pagination.Item>{10}</Pagination.Item>
    <Pagination.Item>{11}</Pagination.Item>
    <Pagination.Item active>{12}</Pagination.Item>
    <Pagination.Item>{13}</Pagination.Item>
    <Pagination.Item disabled>{14}</Pagination.Item>

    <Pagination.Ellipsis />
    <Pagination.Item>{20}</Pagination.Item>
    <Pagination.Next />
    <Pagination.Last />
  </Pagination>
</div>

score 2 · Accepted Answer · answered Jun 20 '21 at 21:01

2

You can use bootstrap classes to center the pagination component

<Pagination size="lg" className="d-flex justify-content-center">
    {pages}
</Pagination>

answered Jun 20 '21 at 21:01

fingerprints

2,751
1
25
45

score 0 · Answer 3 · answered Oct 10 '20 at 20:07

0

Maybe, you can use a footer/pagination class and .css class.

.Pagination {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
}

<footer className="Pagination">
   <p>I'm a footer</p>
</footer>

answered Oct 10 '20 at 20:07

aurajimenez

71
4

How to center pagination block with react-bootstrap

3 Answers3