CODEWITHSUNDEEP
csstwitter-bootstrap
user5672998
user5672998

Reputation: 1170

Bootstrap CSS: how to override padding to default unspecified?

I'm using the Bootstrap Pagination, all the examples here are using it aligned to left of parent; while in cases I want to make it center aligned, horizontally; I have tried the inline style margin: 0 auto and display: inline-block; or block and many other ways, but it's still not working, in Chrome Dev Tools I can see it's because it has a .pagination class which defined padding-left: 0; that stopped from being center aligned, from the DevTool I can uncheck the line of padding-left: 0; and it becomes center aligned;

http://getbootstrap.com/components/#pagination

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}

So, for overriding, I know it's easy to override it to be another value, but if I override to another specific number, it would not be responsive to window dimension changes, I've tried to set padding: auto; but auto seems not valid for padding? I wonder is there anyway to override it to be unspecified? like uncheck it from DevTool?

Upvotes: 0

Views: 1167

Answers (1)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

Try putting text-align: center; on the parent container of the nav container. In this page here it works fine if doing it with dev tools. Find the class .bs-example and add text -align: center too see it work there.

Oddly enough the padding-left: 0; actually keeps it centered because of the ghost button/space to the left of the left navigation arrow.

Upvotes: -1

Related Questions