Recently I wanted to have a ng-pagination control as well as a few “results per page” links to change the number of items displayed in a given page.
However, ngb-pagination is always displayed as a block, so you have to fiddle around with it to get it to work. First I tried to just put it in a div marked with display: inline, but that didn’t work. Next, used Bootstrap’s grid system to create columns, which did let things exist on the same line, but didn’t really work either as I didn’t want a big gap between the pagination element and my “results per page” links.
CSS
The trick is to look at the underlying source code and co-opt the elements by their tags or class names. In the case of ngb-pagination, we can find the source on GitHub. It turns out that the template is an unordered list, so we can either make sure that those elements are display: inline-block or use the classes pagination for the ul tags and page-item for the li tags. Create a class in your css or scss and style it. I noticed that using !important seemed to be necessary for it to work. Finally, add that class to the ngb-pagination element:
… and it only took me like an hour to figure this out!